@solid-design-system/components 4.0.10 → 4.1.0

package/dist/custom-elements.json

@@ -6954,6 +6954,46 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/icon/library.status.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "icons",
+          "type": {
+            "text": "object"
+          },
+          "default": "{ 'status-check': ` <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"> <path d=\"M9.202 2.228a.832.832 0 0 0-1.14.274v.003L5.006 7.691 3.542 6.23a.834.834 0 0 0-1.178 1.178L4.586 9.63a.83.83 0 0 0 .579.258h.107a.836.836 0 0 0 .609-.399l.002-.004 3.611-6.11a.833.833 0 0 0-.287-1.145l-.005-.002Z\"/> </svg> `, 'status-exclamation': ` <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"> <path d=\"M6.833 10.167a.834.834 0 1 1-1.667 0 .834.834 0 0 1 1.667 0ZM6 1a.834.834 0 0 0-.833.833v5a.834.834 0 0 0 1.666 0v-5A.834.834 0 0 0 6 1Z\"/> </svg> `, 'status-close': ` <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"> <path d=\"M9.645 2.355a.834.834 0 0 0-1.178 0L6 4.822 3.533 2.355a.834.834 0 0 0-1.178 1.178L4.823 6 2.355 8.466a.834.834 0 0 0 1.178 1.178L6 7.179l2.467 2.467a.834.834 0 0 0 1.178-1.178L7.178 6l2.467-2.467a.83.83 0 0 0 0-1.178Z\"/> </svg> `, 'status-info': ` <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"> <path d=\"M5.862 3.927A1.244 1.244 0 1 0 5.86 1.44a1.244 1.244 0 0 0 0 2.488Zm.968 1.935A.83.83 0 0 0 6 5.033h-.829a.83.83 0 0 0 0 1.658v2.21h-.83a.83.83 0 0 0 0 1.659h3.317a.83.83 0 0 0 0-1.658H6.83v-3.04Z\"/> </svg> `, 'status-clock': ` <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"> <path d=\"M6.01 5.656v-3.99a.834.834 0 0 0-1.667 0V6c0 .058.006.115.018.17l-.001-.006c.007.03.015.054.024.078l-.002-.005c0 .027 0 .056.025.083a.59.59 0 0 0 .046.086l-.001-.003.03.059c.034.047.068.089.106.127l3.356 3.359a.835.835 0 0 0 1.18-1.18L6.01 5.655Z\"/> </svg> `, 'status-minus': ` <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"> <path d=\"M9.76 5.333h-7.5A.834.834 0 0 0 2.26 7h7.5a.834.834 0 0 0 0-1.667Z\"/> </svg> `, 'status-questionmark': ` <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"> <path d=\"M6.843 10.167a.834.834 0 1 1-1.667 0 .834.834 0 0 1 1.667 0ZM6.01 1a2.777 2.777 0 0 0-2.778 2.777.834.834 0 0 0 1.667 0 1.111 1.111 0 0 1 2.222 0c0 .24-.517.792-.834 1.111-.555.586-1.11 1.192-1.11 1.944v.015a.834.834 0 0 0 1.666.014c.196-.316.416-.59.666-.833.6-.64 1.278-1.362 1.278-2.262A2.777 2.777 0 0 0 6.01 1Z\"/> </svg> ` }"
+        },
+        {
+          "kind": "variable",
+          "name": "statusLibrary",
+          "type": {
+            "text": "IconLibrary"
+          },
+          "default": "{ name: 'sd-status-assets', resolver: (name: keyof typeof icons) => { if (name in icons) { return `data:image/svg+xml,${encodeURIComponent(icons[name])}`; } return ''; }, mutator: svg => svg.setAttribute('fill', 'currentColor') }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "icons",
+          "declaration": {
+            "name": "icons",
+            "module": "components/icon/library.status.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "statusLibrary",
+            "module": "components/icon/library.status.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/icon/library.system.js",
@@ -16708,7 +16748,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "4.0.10",
+    "version": "4.1.0",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"

package/dist/solid-components.js

@@ -2,6 +2,9 @@ import {
   setupAutocomplete
 } from "./chunks/chunk.6DKXZWRN.js";
 import "./chunks/chunk.HAL7R4WT.js";
+import {
+  SdTabPanel
+} from "./chunks/chunk.4Q7KKH5Z.js";
 import {
   SdTeaser
 } from "./chunks/chunk.ACST636J.js";
@@ -17,9 +20,12 @@ import {
 import {
   SdVideo
 } from "./chunks/chunk.2FXKQI26.js";
+import {
+  SdScrollable
+} from "./chunks/chunk.274HT4QS.js";
 import {
   SdSelect
-} from "./chunks/chunk.USMGTQQG.js";
+} from "./chunks/chunk.BTJACUD5.js";
 import {
   SdStep
 } from "./chunks/chunk.DU3O42BH.js";
@@ -36,8 +42,8 @@ import {
   SdTabGroup
 } from "./chunks/chunk.AQZSZKBJ.js";
 import {
-  SdTabPanel
-} from "./chunks/chunk.4Q7KKH5Z.js";
+  SdNotification
+} from "./chunks/chunk.KPA6BEFU.js";
 import {
   SdOptgroup
 } from "./chunks/chunk.PRXP5CUW.js";
@@ -56,9 +62,6 @@ import {
 import {
   SdRadio
 } from "./chunks/chunk.A625ONY2.js";
-import {
-  SdScrollable
-} from "./chunks/chunk.274HT4QS.js";
 import {
   SdInclude
 } from "./chunks/chunk.JZB2D4IZ.js";
@@ -74,9 +77,6 @@ import {
 import {
   SdNavigationItem
 } from "./chunks/chunk.F63YFNZS.js";
-import {
-  SdNotification
-} from "./chunks/chunk.KPA6BEFU.js";
 import {
   SdDropdown
 } from "./chunks/chunk.DPY2TYIS.js";
@@ -97,7 +97,7 @@ import {
 } from "./chunks/chunk.4SBQOWLU.js";
 import {
   SdCombobox
-} from "./chunks/chunk.4MHQ63NW.js";
+} from "./chunks/chunk.XOL74PNU.js";
 import {
   SdTag
 } from "./chunks/chunk.KH4M6HPE.js";
@@ -151,14 +151,15 @@ import {
 import "./chunks/chunk.N4LHE3QK.js";
 import {
   SdIcon
-} from "./chunks/chunk.X2PI2F35.js";
-import "./chunks/chunk.P52GZVKG.js";
-import "./chunks/chunk.RPB53XXV.js";
+} from "./chunks/chunk.UZKLVMCI.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "./chunks/chunk.JCK5DTZN.js";
+} from "./chunks/chunk.7WEXXSFH.js";
+import "./chunks/chunk.P52GZVKG.js";
+import "./chunks/chunk.RPB53XXV.js";
 import "./chunks/chunk.7VPFFNHR.js";
+import "./chunks/chunk.4TPOL3LB.js";
 import "./chunks/chunk.XS4QJO4N.js";
 import "./chunks/chunk.EY4JPJJQ.js";
 import "./chunks/chunk.B4BZKR24.js";
@@ -174,8 +175,8 @@ import "./chunks/chunk.YEZS5ZR2.js";
 import {
   LocalizeController
 } from "./chunks/chunk.YKM42GKF.js";
-import "./chunks/chunk.MNYQWRJE.js";
 import "./chunks/chunk.2S2CNWKY.js";
+import "./chunks/chunk.MNYQWRJE.js";
 import "./chunks/chunk.HFHUY7YD.js";
 import "./chunks/chunk.POFWU6ZT.js";
 import "./chunks/chunk.S3NI7NKU.js";

package/dist/utilities/icon-library.js

@@ -2,8 +2,9 @@ import "../chunks/chunk.HAL7R4WT.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "../chunks/chunk.JCK5DTZN.js";
+} from "../chunks/chunk.7WEXXSFH.js";
 import "../chunks/chunk.7VPFFNHR.js";
+import "../chunks/chunk.4TPOL3LB.js";
 import "../chunks/chunk.XS4QJO4N.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/utilities/localize.js

@@ -1,8 +1,8 @@
 import {
   LocalizeController
 } from "../chunks/chunk.YKM42GKF.js";
-import "../chunks/chunk.MNYQWRJE.js";
 import "../chunks/chunk.2S2CNWKY.js";
+import "../chunks/chunk.MNYQWRJE.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   LocalizeController

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

@@ -2638,102 +2638,6 @@
         }
       ]
     },
-    {
-      "name": "sd-tooltip",
-      "description": "Tooltips display additional information based on a specific action.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the tooltip begins to show.\n- **sd-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **sd-hide** - Emitted when the tooltip begins to hide.\n- **sd-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n- **anchor** - Slot to change the default trigger icon. The default icon is an info circle.\n- **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<sd-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body where its content is rendered.",
-      "attributes": [
-        {
-          "name": "size",
-          "description": "Sets the size of the default trigger icon.",
-          "values": [{ "name": "lg" }, { "name": "sm" }]
-        },
-        {
-          "name": "content",
-          "description": "The tooltip's content. If you need to display HTML, use the `content` slot instead.",
-          "values": []
-        },
-        {
-          "name": "placement",
-          "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
-          "values": [
-            { "name": "top" },
-            { "name": "top-start" },
-            { "name": "top-end" },
-            { "name": "bottom" },
-            { "name": "bottom-start" },
-            { "name": "bottom-end" }
-          ]
-        },
-        {
-          "name": "disabled",
-          "description": "Disables the tooltip so it won't show when triggered.",
-          "values": []
-        },
-        {
-          "name": "open",
-          "description": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.",
-          "values": []
-        },
-        {
-          "name": "trigger",
-          "description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.",
-          "values": []
-        },
-        {
-          "name": "hoist",
-          "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
-          "values": []
-        },
-        {
-          "name": "dir",
-          "description": "The element's directionality.",
-          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
-        },
-        {
-          "name": "lang",
-          "description": "The element's language.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-tooltip--docs"
-        }
-      ]
-    },
-    {
-      "name": "sd-video",
-      "description": "Used to wrap external video elements (e. g. from Moving Image or bare <video>-Tags) and provide some basic styling for Union Investment.\n---\n\n\n### **Events:**\n - **sd-play** - Event emitted when clicking the `play-icon`. Listen for this event and use it to play the wrapped video.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The default slot used to pass a video player element.\n- **play-icon** - The video's play icon.\n- **poster** - Specifies an image to be shown before initial play of the wrapped video. Acts like the `poster` attribute on the native video tag.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **play-button** - The `<button>` element wrapper around the play-icon slot (full screen to field all click events).\n- **play-button-bg** - The `<div>` element wrapper around the play-button that defines the circular background.",
-      "attributes": [
-        {
-          "name": "playing",
-          "description": "Set to `true` to hide the play icon.",
-          "values": []
-        },
-        {
-          "name": "isBelowBreakpoint",
-          "description": "Reactive property to trigger breakpoint re-renders.",
-          "values": []
-        },
-        {
-          "name": "dir",
-          "description": "The element's directionality.",
-          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
-        },
-        {
-          "name": "lang",
-          "description": "The element's language.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-video--docs"
-        }
-      ]
-    },
     {
       "name": "sd-textarea",
       "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the control loses focus.\n- **sd-change** - Emitted when an alteration to the control's value is committed by the user.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-input** - Emitted when the control receives input.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\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- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - **label** - The textarea's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **border** - The base part's absolutely positioned border. Allows for easy adjustment of border thickness without affecting component dimensions.\n- **textarea** - The internal `<textarea>` control.",
@@ -2880,6 +2784,102 @@
           "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-textarea--docs"
         }
       ]
+    },
+    {
+      "name": "sd-tooltip",
+      "description": "Tooltips display additional information based on a specific action.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the tooltip begins to show.\n- **sd-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **sd-hide** - Emitted when the tooltip begins to hide.\n- **sd-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n- **anchor** - Slot to change the default trigger icon. The default icon is an info circle.\n- **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<sd-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body where its content is rendered.",
+      "attributes": [
+        {
+          "name": "size",
+          "description": "Sets the size of the default trigger icon.",
+          "values": [{ "name": "lg" }, { "name": "sm" }]
+        },
+        {
+          "name": "content",
+          "description": "The tooltip's content. If you need to display HTML, use the `content` slot instead.",
+          "values": []
+        },
+        {
+          "name": "placement",
+          "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
+          "values": [
+            { "name": "top" },
+            { "name": "top-start" },
+            { "name": "top-end" },
+            { "name": "bottom" },
+            { "name": "bottom-start" },
+            { "name": "bottom-end" }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the tooltip so it won't show when triggered.",
+          "values": []
+        },
+        {
+          "name": "open",
+          "description": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.",
+          "values": []
+        },
+        {
+          "name": "trigger",
+          "description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.",
+          "values": []
+        },
+        {
+          "name": "hoist",
+          "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
+          "values": []
+        },
+        {
+          "name": "dir",
+          "description": "The element's directionality.",
+          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
+        },
+        {
+          "name": "lang",
+          "description": "The element's language.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-tooltip--docs"
+        }
+      ]
+    },
+    {
+      "name": "sd-video",
+      "description": "Used to wrap external video elements (e. g. from Moving Image or bare <video>-Tags) and provide some basic styling for Union Investment.\n---\n\n\n### **Events:**\n - **sd-play** - Event emitted when clicking the `play-icon`. Listen for this event and use it to play the wrapped video.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The default slot used to pass a video player element.\n- **play-icon** - The video's play icon.\n- **poster** - Specifies an image to be shown before initial play of the wrapped video. Acts like the `poster` attribute on the native video tag.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **play-button** - The `<button>` element wrapper around the play-icon slot (full screen to field all click events).\n- **play-button-bg** - The `<div>` element wrapper around the play-button that defines the circular background.",
+      "attributes": [
+        {
+          "name": "playing",
+          "description": "Set to `true` to hide the play icon.",
+          "values": []
+        },
+        {
+          "name": "isBelowBreakpoint",
+          "description": "Reactive property to trigger breakpoint re-renders.",
+          "values": []
+        },
+        {
+          "name": "dir",
+          "description": "The element's directionality.",
+          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
+        },
+        {
+          "name": "lang",
+          "description": "The element's language.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-video--docs"
+        }
+      ]
     }
   ]
 }