Merge branch 'main' into feature/picto-move-svgs-to-assets

Author: stefan-laux

.github/workflows/insider-release.yml

@@ -34,5 +34,6 @@ jobs:
           npm publish --tag=insider --access=public libraries/ui-library/
           npm publish --tag=insider --access=public libraries/ui-library-vue/
           npm publish --tag=insider --access=public libraries/ui-library-angular/dist/ui-library-angular/
+          npm publish --tag=insider --access=public libraries/ui-library-react/
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}

.github/workflows/pkg.pr.new.yml

@@ -0,0 +1,27 @@
+name: Publish PR preview release on demand
+on:
+  workflow_dispatch:
+
+permissions: {}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.number }}
+  cancel-in-progress: true
+
+jobs:
+  build-pr-release:
+    name: Publish PR Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'npm'
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - run: npm install
+      - run: npm run build
+      - run: npx pkg-pr-new publish './libraries/*'

.github/workflows/release.yml

@@ -36,7 +36,7 @@ jobs:
           git config user.name "GitHub action"
           git config user.email "<>"
           git checkout -b feature/${{ inputs.version }}
-          git add package*.json libraries/ui-library/package*.json libraries/ui-library-vue/package*.json libraries/ui-library-angular/package*.json
+          git add package*.json libraries/ui-library/package*.json libraries/ui-library-vue/package*.json libraries/ui-library-angular/package*.json libraries/ui-library-react/package*.json
           git commit -m "${{ inputs.version }}"
           git push origin release/package-updates-${{ inputs.version }}
 
@@ -49,6 +49,7 @@ jobs:
         run: |
           npm publish --tag=latest --access=public libraries/ui-library/
           npm publish --tag=latest --access=public libraries/ui-library-vue/
+          npm publish --tag=latest --access=public libraries/ui-library-react/
           npm publish --tag=latest --access=public libraries/ui-library-angular/dist/ui-library-angular/
 
       - name: 'Create tag'

.idea/codeStyles/Project.xml

@@ -4,13 +4,16 @@ dist
 build
 www
 libraries/ui-library/src/**/readme.md
-libraries/**/components.ts
+libraries/**/components.server.ts
 libraries/**/components.d.ts
 libraries/ui-library/loader
 libraries/ui-library/docs
+libraries/ui-library/hydrate
 .angular
+.nuxt
+.output
 stencil-generated
 docs/examples
 docs/components
 docs/.vitepress/cache
-docs/.vitepress/dist
+.next

.prettierignore

@@ -1,6 +1,7 @@
 {
   "printWidth": 120,
   "singleQuote": true,
+  "trailingComma": "es5",
   "overrides": [
     {
       "files": ["docs/**/*"],

.prettierrc.json

@@ -25,7 +25,7 @@ Thank you to all the people who already contributed to the Six-Webcomponents!
 
 ## Examples
 
-There are example apps for Angular, Plain Javascript and Vue. You can find them in the `examples` directory.
+There are example apps for Angular, Plain Javascript, Vue and React. You can find them in the `examples` directory.
 
 ## Structure
 

README.md

@@ -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' },
@@ -58,9 +59,14 @@ export default withMermaid({
               text: 'Styling',
               collapsed: false,
               items: [
-                { text: 'Styles', link: '/guide/styling/styles' },
                 { text: 'Tables', link: '/guide/styling/tables' },
                 { text: 'Colors', link: '/guide/styling/colors' },
+                { text: 'Spacing', link: '/guide/styling/spacing' },
+                { text: 'Typography', link: '/guide/styling/typography' },
+                { text: 'Shadows', link: '/guide/styling/shadows' },
+                { text: 'Border Radius', link: '/guide/styling/border-radius' },
+                { text: 'Transitions', link: '/guide/styling/transitions' },
+                { text: 'Z-Index', link: '/guide/styling/z-index' },
                 { text: 'TailwindCSS', link: '/guide/styling/tailwind' },
               ],
             },

docs/.vitepress/config.mts

@@ -37,8 +37,8 @@
   --vp-button-brand-active-bg: var(--vp-button-brand-bg);
 }
 
-/* overwrite rounded design to follow six design */
-* {
+/* overwrite rounded design to follow six design (apart from the examples) */
+*:not(.example) {
   border-radius: 0 !important;
 }
 

docs/.vitepress/theme/style.css

@@ -8,14 +8,54 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ### Added
 
+- **⚠️Experimental**: Bringing back the support for React output target.
+- **⚠️Experimental**: Added example React app with Vite.
+- **⚠️Experimental**: Added example Nuxt app with Client Side Rendering (CSR).
+- **⚠️Experimental**: Added the `six-date` component, intended to eventually replace the
+  `six-datepicker`.
+
+- [Documentation](guide/angular.md) for using web components with Angular's standalone bootstrapping
+- `ActiveSidebarItemGroupDirective` and `ActiveSidebarItemDirective`: Added optional angular sidebar
+  helper directives. See the [Angular guide](guide/angular.md) for more information.
+- Added nested sidbar menu to the angular demo application to showcase the helper directives
+- `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.
+- `six-sidebar-item` : added icon property analog to `six-sidebar-item-group`
+- `six-select` : support the use of prefix/suffix slot of the `six-menu-item` which can be used as
+  links for example.
+- Added support for aria-attributes in JSX typings through upgrade of an underlying library
+
+### Fixed
+
+- `six-logo`: removed inline style tag
+- `six-timepicker`: removed unnecessary bottom padding
+- `six-button` : simplify use of prefix and suffix icons
+- `six-sidebar-item-group`: fixed spacing for subitems
+
 ### 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
 
   The SIX Webcomponents cannot be used with Node 16 or 18 anymore. Please upgrade to Node 20.
 
+- **⚠️Breaking**: `six-file-upload` on upload success now returns a `FileList` regardless of the
+  value of the `multiple` property
+- Upgraded Stencil to latest release and upgraded Vue output target
+- Upgraded React output target to version 1.0.0
+
 ## 4.3.2 - 2025-02-13
 
 No changes in functionality, but changed release creation workflow, that makes sure, that deployed