Upgrade guide V5, deprecation removals, fixes for six-header, angular guide for standalone bootstrapping

docs/.vitepress/config.mts

@@ -43,6 +43,7 @@ export default withMermaid({
         {
           items: [
             { text: 'Introduction', link: '/guide/readme' },
+            { text: 'Upgrade to v5', link: '/guide/upgrade-v5' },
             { text: 'Upgrade to v4', link: '/guide/upgrade-v4' },
             { text: 'Design', link: '/guide/design' },
             { text: 'Architecture', link: '/guide/architecture' },

docs/changelog.md

@@ -8,8 +8,23 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ### Added
 
+- [Documentation](guide/angular.md) for using web components with Angular's standalone bootstrapping
+- `six-header-dropdown`: Added `filter` and `filterPlaceholder` properties.
+- `six-header-menu-button`: Added `caret`, `disabled`, `loading`, `submit` and `reset` properties.
+- `six-header-menu-button`: Added `suffix` and `prefix` slots.
+
 ### Removed
 
+- **⚠️Breaking**: Removed most slots, properties and events on the `six-header` component. Replaced
+  with a flexible approach for customization, allowing the header to be composed in a modular way
+  using child elements such as `six-header-item`, `six-header-dropdown-item`,
+  `six-header-menu-button`, and `six-logo`. Check the [upgrade guide](guide/upgrade-v5.md) for
+  detailed instructions.
+- **⚠️Breaking**: Removed the previously deprecated `reposition()` method of the `six-dropdown`
+  component. You can use the `matchTriggerWidth` property instead.
+- **⚠️Breaking**: Removed the previously deprecated tag `maxTagsVisible` of the `six-select`
+  component.
+
 ### Changed
 
 - **⚠️Breaking**: Upgraded library to Node 20

docs/components/six-dropdown.md

@@ -493,17 +493,6 @@ Type: `Promise<void>`
 
 
 
-### `reposition() => Promise<void>`
-
-<span style="color:red">**[DEPRECATED]**</span> : use the property `matchTriggerWidth` instead.<br/><br/>Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
-is activated.
-
-#### Returns
-
-Type: `Promise<void>`
-
-
-
 ### `show() => Promise<void>`
 
 Shows the dropdown panel
@@ -538,7 +527,6 @@ Type: `Promise<void>`
 
 ### Used by
 
- - [six-header](six-header.html)
  - [six-header-dropdown-item](six-header-dropdown-item.html)
  - [six-select](six-select.html)
 
@@ -562,7 +550,6 @@ graph TD;
   six-input --> six-icon
   six-input --> six-error
   six-menu --> six-menu-item
-  six-header --> six-dropdown
   six-header-dropdown-item --> six-dropdown
   six-select --> six-dropdown
   style six-dropdown fill:#f9f,stroke:#333,stroke-width:4px

docs/components/six-header-dropdown-item.md

@@ -8,7 +8,7 @@ Header dropdown items provide dropdown elements in the header. Sets the active f
 <docs-demo-six-header-dropdown-item-0></docs-demo-six-header-dropdown-item-0>
 
 ```html
-<six-header custom>
+<six-header>
   <six-header-item>
     <six-logo></six-logo>
   </six-header-item>
@@ -29,6 +29,14 @@ Header dropdown items provide dropdown elements in the header. Sets the active f
 <!-- Auto Generated Below -->
 
 
+## Properties
+
+| Property            | Attribute            | Description                                                                                                                                                                                                                                            | Type      | Default       |
+| ------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | ------------- |
+| `filter`            | `filter`             | Set to true to allow auto filtering for entries in the dropdown. With this flag the dropdown will automatically filter itsel. If you need to coordinate the shown elements yourself, e.g. because you need to call an endpoint use asyncFilter instead | `boolean` | `false`       |
+| `filterPlaceholder` | `filter-placeholder` | The filter's placeholder text.                                                                                                                                                                                                                         | `string`  | `'Filter...'` |
+
+
 ## Dependencies
 
 ### Depends on

docs/components/six-header-item.md

@@ -38,19 +38,6 @@ Set the active attribute to display a border below the item.
 | `active` | `active`  | Indicates whether the item is styled as active. When set to `true`, a border is displayed below the trigger element.  Use <code>six-header-dropdown-item</code> to automatically set the active state for dropdowns. | `boolean` | `false` |
 
 
-## Dependencies
-
-### Used by
-
- - [six-header](six-header.html)
-
-### Graph
-```mermaid
-graph TD;
-  six-header --> six-header-item
-  style six-header-item fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 Copyright © 2021-present SIX-Group

docs/components/six-header-menu-button.md

@@ -8,9 +8,10 @@ Header Menu button with a text and an icon. Usually used for dropdowns.
 <docs-demo-six-header-menu-button-0></docs-demo-six-header-menu-button-0>
 
 ```html
-<six-header custom>
+<six-header>
   <six-header-dropdown-item>
-    <six-header-menu-button slot="trigger" icon="apps">App 1</six-header-menu-button>
+    <six-header-menu-button slot="trigger"
+      >App 1 <six-icon slot="suffix">apps</six-icon></six-header-menu-button>
     <six-menu>
       <six-menu-item checked>App 1</six-menu-item>
       <six-menu-item>App 2</six-menu-item>
@@ -39,23 +40,25 @@ Header Menu button with a text and an icon. Usually used for dropdowns.
 
 ## Properties
 
-| Property | Attribute | Description                  | Type     | Default |
-| -------- | --------- | ---------------------------- | -------- | ------- |
-| `icon`   | `icon`    | The icon of the menu button. | `string` | `''`    |
+| Property   | Attribute  | Description                                                                            | Type      | Default |
+| ---------- | ---------- | -------------------------------------------------------------------------------------- | --------- | ------- |
+| `caret`    | `caret`    | Set to true to draw the button with a caret for use with dropdowns, popovers, etc.     | `boolean` | `false` |
+| `disabled` | `disabled` | Set to true to disable the button.                                                     | `boolean` | `false` |
+| `loading`  | `loading`  | Set to true to draw the button in a loading state.                                     | `boolean` | `false` |
+| `reset`    | `reset`    | Indicates if activating the button should reset the form.                              | `boolean` | `false` |
+| `submit`   | `submit`   | Indicates if activating the button should submit the form. Ignored when `href` is set. | `boolean` | `false` |
 
 
 ## Dependencies
 
 ### Depends on
 
 - [six-button](six-button.html)
-- [six-icon](six-icon.html)
 
 ### Graph
 ```mermaid
 graph TD;
   six-header-menu-button --> six-button
-  six-header-menu-button --> six-icon
   six-button --> six-spinner
   style six-header-menu-button fill:#f9f,stroke:#333,stroke-width:4px
 ```