Flexible six-header layout

docs/changelog.md

@@ -6,6 +6,19 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## Upcoming
 
+### Added
+
+- The `six-header` component now offers a flexible approach for customization, allowing the header
+  to be composed in a more modular way using child elements such as `six-header-item`,
+  `six-header-dropdown-item`, `six-header-menu-button`, and `six-logo`.
+- Added `six-logo` component to display the SIX- or BME-logo anywhere, not just within the
+  `six-header` component.
+
+### Deprecated
+
+- Most slots, properties and events on the `six-header` component are now deprecated and will be
+  removed in one of the next releases.
+
 ### Removed
 
 - **Breaking**: Temporarily removed React support to unblock dependency updates.
@@ -22,6 +35,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 - Fixed mermaid diagrams in component documentation.
 - `six-file-upload`: handleFiles is called twice when a file is dropped.
+- Improved accessibility of `six-sidebar-item` `six-sidebar-item-group` `six-button` and
+  `six-icon-button`.
 
 ## 4.2.6 - 2024-10-04
 

docs/components/component.tags.mts

@@ -1 +1 @@
-export const components = ["six-alert","six-avatar","six-badge","six-button","six-card","six-checkbox","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-tile","six-timepicker","six-tooltip"];
+export const components = ["six-alert","six-avatar","six-badge","six-button","six-card","six-checkbox","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-header-dropdown-item","six-header-item","six-header-menu-button","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-logo","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-tile","six-timepicker","six-tooltip"];

docs/components/six-button.md

@@ -346,6 +346,7 @@ Type: `Promise<void>`
 
 ### Used by
 
+ - [six-header-menu-button](six-header-menu-button.html)
  - [six-select](six-select.html)
 
 ### Depends on
@@ -356,6 +357,7 @@ Type: `Promise<void>`
 ```mermaid
 graph TD;
   six-button --> six-spinner
+  six-header-menu-button --> six-button
   six-select --> six-button
   style six-button fill:#f9f,stroke:#333,stroke-width:4px
 ```

docs/components/six-dropdown.md

@@ -539,6 +539,7 @@ Type: `Promise<void>`
 ### Used by
 
  - [six-header](six-header.html)
+ - [six-header-dropdown-item](six-header-dropdown-item.html)
  - [six-select](six-select.html)
 
 ### Depends on
@@ -562,6 +563,7 @@ graph TD;
   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

@@ -0,0 +1,57 @@
+# six-header
+
+
+## Header Dropdown Item
+
+Header dropdown items provide dropdown elements in the header. Sets the active flag (bottom border) when the dropdown is open.
+
+<docs-demo-six-header-dropdown-item-0></docs-demo-six-header-dropdown-item-0>
+
+```html
+<six-header custom>
+  <six-header-item>
+    <six-logo></six-logo>
+  </six-header-item>
+
+  <six-header-dropdown-item>
+    <six-icon-button slot="trigger" name="settings"></six-icon-button>
+    <six-menu>
+      <six-menu-item>Option A</six-menu-item>
+      <six-menu-item>Option B</six-menu-item>
+      <six-menu-item>Option C</six-menu-item>
+    </six-menu>
+  </six-header-dropdown-item>
+</six-header>
+```
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Dependencies
+
+### Depends on
+
+- [six-dropdown](six-dropdown.html)
+
+### Graph
+```mermaid
+graph TD;
+  six-header-dropdown-item --> six-dropdown
+  six-dropdown --> six-menu-item
+  six-dropdown --> six-input
+  six-dropdown --> six-icon
+  six-dropdown --> six-menu
+  six-menu-item --> six-checkbox
+  six-menu-item --> six-icon
+  six-checkbox --> six-error
+  six-input --> six-icon
+  six-input --> six-error
+  six-menu --> six-menu-item
+  style six-header-dropdown-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+Copyright © 2021-present SIX-Group

docs/components/six-header-item.md

@@ -0,0 +1,56 @@
+# six-header
+
+
+## Header Item
+
+Child elements for header.
+
+<docs-demo-six-header-item-0></docs-demo-six-header-item-0>
+
+```html
+<six-header-item>
+  <six-icon-button name="search"></six-icon-button>
+</six-header-item>
+```
+
+
+### Active State
+
+Set the active attribute to display a border below the item.
+
+<docs-demo-six-header-item-1></docs-demo-six-header-item-1>
+
+```html
+<six-header-item active>
+  <six-icon-button name="search"></six-icon-button>
+</six-header-item>
+```
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description                                                                                                                                                                                                          | Type      | Default |
+| -------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
+| `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

@@ -0,0 +1,65 @@
+# six-header
+
+
+## Header Menu Button
+
+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-dropdown-item>
+    <six-header-menu-button slot="trigger" icon="apps">App 1</six-header-menu-button>
+    <six-menu>
+      <six-menu-item checked>App 1</six-menu-item>
+      <six-menu-item>App 2</six-menu-item>
+      <six-menu-item>App 3</six-menu-item>
+    </six-menu>
+  </six-header-dropdown-item>
+</six-header>
+<script type="module">
+  const menuItems = document.querySelectorAll('six-menu-item');
+  const headerButton = document.querySelector('six-header-menu-button');
+
+  menuItems.forEach((item) => {
+    item.addEventListener('click', () => {
+      headerButton.innerText = this.innerText;
+      menuItems.forEach((item) => (item.checked = false));
+      item.checked = true;
+    });
+  });
+</script>
+```
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description                  | Type     | Default |
+| -------- | --------- | ---------------------------- | -------- | ------- |
+| `icon`   | `icon`    | The icon of the menu button. | `string` | `''`    |
+
+
+## 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
+```
+
+----------------------------------------------
+
+Copyright © 2021-present SIX-Group