@solid-design-system/components 1.0.1 → 1.1.0

package/dist/versioned-package/utilities/animation-registry.d.ts

@@ -0,0 +1,14 @@
+export interface ElementAnimation {
+    keyframes: Keyframe[];
+    rtlKeyframes?: Keyframe[];
+    options?: KeyframeAnimationOptions;
+}
+export interface ElementAnimationMap {
+    [animationName: string]: ElementAnimation;
+}
+export interface GetAnimationOptions {
+    dir: string;
+}
+export declare function setDefaultAnimation(animationName: string, animation: ElementAnimation | null): void;
+export declare function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null): void;
+export declare function getAnimation(el: Element, animationName: string, options: GetAnimationOptions): ElementAnimation;

package/dist/versioned-package/utilities/animation-registry.js

@@ -0,0 +1,35 @@
+const defaultAnimationRegistry = /* @__PURE__ */ new Map();
+const customAnimationRegistry = /* @__PURE__ */ new WeakMap();
+function ensureAnimation(animation) {
+  return animation ?? { keyframes: [], options: { duration: 0 } };
+}
+function getLogicalAnimation(animation, dir) {
+  if (dir.toLowerCase() === "rtl") {
+    return {
+      keyframes: animation.rtlKeyframes || animation.keyframes,
+      options: animation.options
+    };
+  }
+  return animation;
+}
+function setDefaultAnimation(animationName, animation) {
+  defaultAnimationRegistry.set(animationName, ensureAnimation(animation));
+}
+function getAnimation(el, animationName, options) {
+  const customAnimation = customAnimationRegistry.get(el);
+  if (customAnimation == null ? void 0 : customAnimation[animationName]) {
+    return getLogicalAnimation(customAnimation[animationName], options.dir);
+  }
+  const defaultAnimation = defaultAnimationRegistry.get(animationName);
+  if (defaultAnimation) {
+    return getLogicalAnimation(defaultAnimation, options.dir);
+  }
+  return {
+    keyframes: [],
+    options: { duration: 0 }
+  };
+}
+export {
+  getAnimation,
+  setDefaultAnimation
+};

package/dist/vscode.html-custom-data.json

@@ -1,6 +1,35 @@
 {
   "version": 1.1,
   "tags": [
+    {
+      "name": "sd-accordion-group",
+      "description": "Short summary of the component's intended use.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The default slot where `<sd-accordion>` elements are placed.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "close-others",
+          "description": "Closes other accordions.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "sd-accordion",
+      "description": "Accordion shows a brief summary and expands to show additional content.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-show** - Emitted when the accordion opens.\n- **sd-after-show** - Emitted after the accordion opens and all animations are complete.\n- **sd-hide** - Emitted when the accordion closes.\n- **sd-after-hide** - Emitted after the accordion closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the accordion.\n- **hide()** - Hides the accordion\n\n### **Slots:**\n - _default_ - The accordion main content.\n- **summary** - The accordion summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sd-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **content** - The accordion content.",
+      "attributes": [
+        {
+          "name": "open",
+          "description": "Indicates whether or not the accordion is open. You can toggle this attribute to show and hide the accordion, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordion' open state.",
+          "values": []
+        },
+        {
+          "name": "summary",
+          "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "sd-button",
       "description": "Buttons represent actions that are available to the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The button's label.\n- **icon-left** - A prefix icon or similar element.\n- **icon-right** - A suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The button's label.\n- **icon-right** - The container that wraps the right icon area.",
@@ -330,7 +359,36 @@
       "references": []
     },
     {
-      "name": "sd-1-0-1-button",
+      "name": "sd-1-1-0-accordion-group",
+      "description": "Short summary of the component's intended use.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The default slot where `<sd-accordion>` elements are placed.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "close-others",
+          "description": "Closes other accordions.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "sd-1-1-0-accordion",
+      "description": "Accordion shows a brief summary and expands to show additional content.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-show** - Emitted when the accordion opens.\n- **sd-after-show** - Emitted after the accordion opens and all animations are complete.\n- **sd-hide** - Emitted when the accordion closes.\n- **sd-after-hide** - Emitted after the accordion closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the accordion.\n- **hide()** - Hides the accordion\n\n### **Slots:**\n - _default_ - The accordion main content.\n- **summary** - The accordion summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sd-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **content** - The accordion content.",
+      "attributes": [
+        {
+          "name": "open",
+          "description": "Indicates whether or not the accordion is open. You can toggle this attribute to show and hide the accordion, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordion' open state.",
+          "values": []
+        },
+        {
+          "name": "summary",
+          "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "sd-1-1-0-button",
       "description": "Buttons represent actions that are available to the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The button's label.\n- **icon-left** - A prefix icon or similar element.\n- **icon-right** - A suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The button's label.\n- **icon-right** - The container that wraps the right icon area.",
       "attributes": [
         {
@@ -502,7 +560,7 @@
       "references": []
     },
     {
-      "name": "sd-1-0-1-icon",
+      "name": "sd-1-1-0-icon",
       "description": "Icons are symbols that can be used to represent various options within an application.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-load** - Emitted when the icon has loaded.\n- **sd-error** - Emitted when the icon fails to load due to an error.",
       "attributes": [
         {
@@ -544,7 +602,7 @@
       "references": []
     },
     {
-      "name": "sd-1-0-1-include",
+      "name": "sd-1-1-0-include",
       "description": "Includes give you the power to embed external HTML files into the page.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-load** - Emitted when the included file is loaded.\n- **sd-error** - Emitted when the included file fails to load due to an error.",
       "attributes": [
         {
@@ -576,7 +634,7 @@
       "references": []
     },
     {
-      "name": "sd-1-0-1-link",
+      "name": "sd-1-1-0-link",
       "description": "A link component.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-blur** - Emitted when the link loses focus.\n- **sd-focus** - Emitted when the link gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n\n### **Slots:**\n - _default_ - The default slot.\n- **icon-left** - The icon to display on the left side of the link.\n- **icon-right** - The icon to display on the right side of the link.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The link's label.\n- **icon-right** - The container that wraps the right icon area.",
       "attributes": [
         {
@@ -636,7 +694,7 @@
       "references": []
     },
     {
-      "name": "sd-1-0-1-spinner",
+      "name": "sd-1-1-0-spinner",
       "description": "Spinners are used to show the progress of an indeterminate operation.\n\n\n---\n\n\n",
       "attributes": [
         {

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/web-types",
   "name": "@solid-design-system/components",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description-markup": "markdown",
   "framework-config": {
     "enable-when": {
@@ -13,6 +13,119 @@
   "contributions": {
     "html": {
       "elements": [
+        {
+          "name": "sd-accordion-group",
+          "description": "",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/accordion-group",
+          "js": {
+            "properties": [
+              {
+                "name": "closeOthers",
+                "description": "Closes other accordions.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "handleAccordionShow",
+                "value": {}
+              }
+            ],
+            "events": []
+          },
+          "attributes": [
+            {
+              "name": "close-others",
+              "description": "Closes other accordions.",
+              "value": {
+                "type": "boolean"
+              }
+            }
+          ]
+        },
+        {
+          "name": "sd-accordion",
+          "description": "",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/accordion",
+          "js": {
+            "properties": [
+              {
+                "name": "localize",
+                "value": {}
+              },
+              {
+                "name": "open",
+                "description": "Indicates whether or not the accordion is open. You can toggle this attribute to show and hide the accordion, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordion' open state.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "summary",
+                "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+                "value": {
+                  "type": "string"
+                }
+              },
+              {
+                "name": "handleSummaryClick",
+                "value": {}
+              },
+              {
+                "name": "handleSummaryKeyDown",
+                "value": {}
+              },
+              {
+                "name": "handleOpenChange",
+                "value": {}
+              },
+              {
+                "name": "show",
+                "description": "Shows the accordion.",
+                "value": {}
+              },
+              {
+                "name": "hide",
+                "description": "Hides the accordion",
+                "value": {}
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-show",
+                "description": "Emitted when the accordion opens."
+              },
+              {
+                "name": "sd-after-show",
+                "description": "Emitted after the accordion opens and all animations are complete."
+              },
+              {
+                "name": "sd-hide",
+                "description": "Emitted when the accordion closes."
+              },
+              {
+                "name": "sd-after-hide",
+                "description": "Emitted after the accordion closes and all animations are complete."
+              }
+            ]
+          },
+          "attributes": [
+            {
+              "name": "open",
+              "description": "Indicates whether or not the accordion is open. You can toggle this attribute to show and hide the accordion, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordion' open state.",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "summary",
+              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+              "value": {
+                "type": "string"
+              }
+            }
+          ]
+        },
         {
           "name": "sd-button",
           "description": "",
@@ -768,7 +881,120 @@
           ]
         },
         {
-          "name": "sd-1-0-1-button",
+          "name": "sd-1-1-0-accordion-group",
+          "description": "",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/accordion-group",
+          "js": {
+            "properties": [
+              {
+                "name": "closeOthers",
+                "description": "Closes other accordions.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "handleAccordionShow",
+                "value": {}
+              }
+            ],
+            "events": []
+          },
+          "attributes": [
+            {
+              "name": "close-others",
+              "description": "Closes other accordions.",
+              "value": {
+                "type": "boolean"
+              }
+            }
+          ]
+        },
+        {
+          "name": "sd-1-1-0-accordion",
+          "description": "",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/accordion",
+          "js": {
+            "properties": [
+              {
+                "name": "localize",
+                "value": {}
+              },
+              {
+                "name": "open",
+                "description": "Indicates whether or not the accordion is open. You can toggle this attribute to show and hide the accordion, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordion' open state.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "summary",
+                "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+                "value": {
+                  "type": "string"
+                }
+              },
+              {
+                "name": "handleSummaryClick",
+                "value": {}
+              },
+              {
+                "name": "handleSummaryKeyDown",
+                "value": {}
+              },
+              {
+                "name": "handleOpenChange",
+                "value": {}
+              },
+              {
+                "name": "show",
+                "description": "Shows the accordion.",
+                "value": {}
+              },
+              {
+                "name": "hide",
+                "description": "Hides the accordion",
+                "value": {}
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-show",
+                "description": "Emitted when the accordion opens."
+              },
+              {
+                "name": "sd-after-show",
+                "description": "Emitted after the accordion opens and all animations are complete."
+              },
+              {
+                "name": "sd-hide",
+                "description": "Emitted when the accordion closes."
+              },
+              {
+                "name": "sd-after-hide",
+                "description": "Emitted after the accordion closes and all animations are complete."
+              }
+            ]
+          },
+          "attributes": [
+            {
+              "name": "open",
+              "description": "Indicates whether or not the accordion is open. You can toggle this attribute to show and hide the accordion, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordion' open state.",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "summary",
+              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+              "value": {
+                "type": "string"
+              }
+            }
+          ]
+        },
+        {
+          "name": "sd-1-1-0-button",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/button",
           "js": {
@@ -1107,7 +1333,7 @@
           ]
         },
         {
-          "name": "sd-1-0-1-icon",
+          "name": "sd-1-1-0-icon",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/icon",
           "js": {
@@ -1216,7 +1442,7 @@
           ]
         },
         {
-          "name": "sd-1-0-1-include",
+          "name": "sd-1-1-0-include",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/include",
           "js": {
@@ -1287,7 +1513,7 @@
           ]
         },
         {
-          "name": "sd-1-0-1-link",
+          "name": "sd-1-1-0-link",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/link",
           "js": {
@@ -1414,7 +1640,7 @@
           ]
         },
         {
-          "name": "sd-1-0-1-spinner",
+          "name": "sd-1-1-0-spinner",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/spinner",
           "js": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solid-design-system/components",
   "description": "Solid Design System: Components",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "homepage": "https://solid-design-system.fe.union-investment.de/x.x.x/storybook/",
   "author": {
     "name": "Union Investment"
@@ -48,16 +48,13 @@
     "build.cdn": "pnpm build.components && pnpm build.storybook && node ./scripts/node-version-components.cjs",
     "build.npm": "pnpm build.components && pnpm build.package && node ./scripts/node-version-components.cjs",
     "build.components": "vite build  --config vite.config.js",
-    "build.package": "vite build --config vite.config.package.js",
+    "build.package": "pnpm build.package/create-index && vite build --config vite.config.package.js && pnpm build.package/remove-index",
+    "build.package/create-index": "node scripts/node-generate-package-index.cjs && echo '✅ Index created'",
+    "build.package/remove-index": "node -e \"require('fs').unlinkSync('src/solid-components.package.ts')\" && echo '✅ Index removed'",
     "build.storybook": "storybook build --output-dir dist/storybook && cp dist/custom-elements.json dist/storybook/custom-elements.json",
     "build.chromatic": "pnpm build.storybook && pnpm ci.optimize-chromatic",
     "preview": "vite preview",
-    "fix": "pnpm lint.fix && pnpm format.fix",
-    "verify": "pnpm format.verify > /dev/null && pnpm lint.verify && pnpm ts.verify && pnpm build && echo '✅ Build verified' && pnpm ci.optimize-chromatic && echo '✅ Chromatic optimization verified' && pnpm test && echo '✅ Test verified'",
-    "format.fix": "prettier --write --loglevel warn .",
-    "format.verify": "prettier --check --loglevel warn . && echo '✅ Formatting verified'",
-    "lint.fix": "eslint src --max-warnings 0 --fix",
-    "lint.verify": "eslint src --max-warnings 0 && echo '✅ Linting verified'",
+    "verify": "pnpm ts.verify && pnpm build && echo '✅ Build verified' && pnpm ci.optimize-chromatic && echo '✅ Chromatic optimization verified' && pnpm test && echo '✅ Test verified'",
     "ts.verify": "tsc --noEmit --project ./tsconfig.json && echo '✅ TypeScript verified'",
     "plop": "plop --plopfile scripts/plop/plopfile.js",
     "ci.optimize-chromatic": "node ./scripts/storybook/optimize-chromatic.cjs",
@@ -96,8 +93,6 @@
     "@storybook/web-components-vite": "^7.0.20",
     "@types/mocha": "^10.0.1",
     "@types/sinon": "^10.0.15",
-    "@typescript-eslint/eslint-plugin": "^5.59.9",
-    "@typescript-eslint/parser": "^5.59.9",
     "@web/test-runner": "^0.16.1",
     "@web/test-runner-commands": "^0.7.0",
     "@web/test-runner-playwright": "^0.10.1",
@@ -106,16 +101,6 @@
     "chromatic": "^6.18.2",
     "comment-parser": "^1.3.1",
     "cssnano": "^6.0.1",
-    "eslint": "^8.42.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-chai-expect": "^3.0.0",
-    "eslint-plugin-chai-friendly": "^0.7.2",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-lit": "^1.8.3",
-    "eslint-plugin-lit-a11y": "^2.4.1",
-    "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
-    "eslint-plugin-storybook": "^0.6.12",
-    "eslint-plugin-wc": "^1.5.0",
     "globby": "^13.1.4",
     "gzip-size": "^7.0.0",
     "html-format": "^1.1.2",
@@ -184,8 +169,8 @@
   "readme": "README.md",
   "meta": {
     "bundleSizeInKb": {
-      "uncompressed": 61,
-      "gzip": 18
+      "uncompressed": 69,
+      "gzip": 20
     }
   }
 }