@solid-design-system/components 5.10.1 → 5.12.0

package/dist/solid-components.d.ts

@@ -4,6 +4,8 @@ export { default as SdAnimation } from './components/animation/animation.js';
 export { default as SdAudio } from './components/audio/audio.js';
 export { default as SdBadge } from './components/badge/badge.js';
 export { default as SdBrandshape } from './components/brandshape/brandshape.js';
+export { default as SdBreadcrumb } from './components/breadcrumb/breadcrumb.js';
+export { default as SdBreadcrumbItem } from './components/breadcrumb-item/breadcrumb-item.js';
 export { default as SdButton } from './components/button/button.js';
 export { default as SdCarousel } from './components/carousel/carousel.js';
 export { default as SdCarouselItem } from './components/carousel-item/carousel-item.js';
@@ -21,6 +23,7 @@ export { default as SdIcon } from './components/icon/icon.js';
 export { default as SdInclude } from './components/include/include.js';
 export { default as SdInput } from './components/input/input.js';
 export { default as SdLink } from './components/link/link.js';
+export { default as SdLoader } from './components/loader/loader.js';
 export { default as SdMapMarker } from './components/map-marker/map-marker.js';
 export { default as SdMenu } from './components/menu/menu.js';
 export { default as SdMenuItem } from './components/menu-item/menu-item.js';
@@ -33,6 +36,8 @@ export { default as SdQuickfact } from './components/quickfact/quickfact.js';
 export { default as SdRadio } from './components/radio/radio.js';
 export { default as SdRadioButton } from './components/radio-button/radio-button.js';
 export { default as SdRadioGroup } from './components/radio-group/radio-group.js';
+export { default as SdRange } from './components/range/range.js';
+export { default as SdRangeTick } from './components/range-tick/range-tick.js';
 export { default as SdScrollable } from './components/scrollable/scrollable.js';
 export { default as SdSelect } from './components/select/select.js';
 export { default as SdSpinner } from './components/spinner/spinner.js';
@@ -48,8 +53,6 @@ export { default as SdTeaserMedia } from './components/teaser-media/teaser-media
 export { default as SdTextarea } from './components/textarea/textarea.js';
 export { default as SdTooltip } from './components/tooltip/tooltip.js';
 export { default as SdVideo } from './components/video/video.js';
-export { default as SdBreadcrumb } from './components/breadcrumb/breadcrumb.js';
-export { default as SdBreadcrumbItem } from './components/breadcrumb-item/breadcrumb-item.js';
 export * from './utilities/icon-library';
 export * from './utilities/localize';
 export * from './utilities/autocomplete-config';

package/dist/solid-components.js

@@ -1,181 +1,191 @@
+import "./chunks/chunk.HAL7R4WT.js";
+import {
+  SdVideo
+} from "./chunks/chunk.5EHIHSWD.js";
 import {
   setupAutocomplete
 } from "./chunks/chunk.6DKXZWRN.js";
-import "./chunks/chunk.HAL7R4WT.js";
+import {
+  SdTab
+} from "./chunks/chunk.L2D6TOK4.js";
+import {
+  SdTabGroup
+} from "./chunks/chunk.VD6EMWBX.js";
+import {
+  SdTabPanel
+} from "./chunks/chunk.2E6AZ7IS.js";
 import {
   SdTeaser
-} from "./chunks/chunk.R2XG3O7O.js";
+} from "./chunks/chunk.FKIK5XXL.js";
 import {
   SdTeaserMedia
-} from "./chunks/chunk.7EMNYFIP.js";
+} from "./chunks/chunk.LBZP6N7M.js";
 import {
   SdTextarea
-} from "./chunks/chunk.I6NQOQEO.js";
+} from "./chunks/chunk.UTF4KIPA.js";
 import {
   SdTooltip
-} from "./chunks/chunk.UDULBIWD.js";
+} from "./chunks/chunk.KSDF7SV6.js";
 import {
-  SdVideo
-} from "./chunks/chunk.MQ5VT5VP.js";
+  SdRangeTick
+} from "./chunks/chunk.Q5NANOL5.js";
+import {
+  SdScrollable
+} from "./chunks/chunk.OVMZ5AQ3.js";
+import {
+  SdSelect
+} from "./chunks/chunk.WYGXHCZK.js";
+import {
+  SdSpinner
+} from "./chunks/chunk.MHXRRPRS.js";
 import {
   SdStep
-} from "./chunks/chunk.EO5MCLIR.js";
+} from "./chunks/chunk.YVIGSH2Q.js";
 import {
   SdStepGroup
-} from "./chunks/chunk.YGVCQCO4.js";
+} from "./chunks/chunk.K5VSAEEA.js";
 import {
   SdSwitch
-} from "./chunks/chunk.FDQQDXKD.js";
-import {
-  SdTab
-} from "./chunks/chunk.ZSZ2IB2L.js";
+} from "./chunks/chunk.GJKBJOMN.js";
 import {
-  SdTabGroup
-} from "./chunks/chunk.7VIYCZ4Z.js";
-import {
-  SdTabPanel
-} from "./chunks/chunk.BK4CYVLA.js";
+  SdOptgroup
+} from "./chunks/chunk.CNKD3LT7.js";
 import {
   SdOption
-} from "./chunks/chunk.KFVC6XFD.js";
+} from "./chunks/chunk.N73QET3I.js";
 import {
   SdQuickfact
-} from "./chunks/chunk.XKFVXICF.js";
+} from "./chunks/chunk.J5KZ6AYY.js";
 import {
   SdRadioButton
-} from "./chunks/chunk.2VDSJ75Q.js";
+} from "./chunks/chunk.SDNZJEO4.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.SW6AKO54.js";
+} from "./chunks/chunk.GCLUX5DU.js";
 import {
   SdRadio
-} from "./chunks/chunk.47VXT6XF.js";
-import {
-  SdScrollable
-} from "./chunks/chunk.VFG2SXVE.js";
+} from "./chunks/chunk.MYCJZM33.js";
 import {
-  SdSelect
-} from "./chunks/chunk.5XKGAQGU.js";
+  SdRange
+} from "./chunks/chunk.ZXPTGOCQ.js";
+import "./chunks/chunk.D3YSIVTB.js";
 import {
   SdLink
-} from "./chunks/chunk.AQKWXHIC.js";
+} from "./chunks/chunk.XE2TTS56.js";
 import {
   SdMapMarker
-} from "./chunks/chunk.3PUMOBIO.js";
+} from "./chunks/chunk.53TIETIU.js";
 import {
   SdMenu
-} from "./chunks/chunk.JJTGSFOV.js";
+} from "./chunks/chunk.2TRX3FZB.js";
 import {
   SdMenuItem
-} from "./chunks/chunk.RGFFEJMJ.js";
+} from "./chunks/chunk.3LB6F6UZ.js";
 import "./chunks/chunk.KEJFWGZI.js";
 import {
   SdNavigationItem
-} from "./chunks/chunk.UJHYOR23.js";
+} from "./chunks/chunk.FG5EPKY3.js";
 import {
   SdNotification
-} from "./chunks/chunk.WSEY3LJE.js";
-import {
-  SdOptgroup
-} from "./chunks/chunk.3JIBD4DC.js";
+} from "./chunks/chunk.6OA4LXDX.js";
 import {
   SdInclude
-} from "./chunks/chunk.5UQ6EJAW.js";
+} from "./chunks/chunk.5YHSIEJI.js";
 import {
   SdInput
-} from "./chunks/chunk.UQ55GFI3.js";
+} from "./chunks/chunk.5WAILGKS.js";
 import {
   SdDialog
-} from "./chunks/chunk.UJHYUCHT.js";
+} from "./chunks/chunk.7QXCN2ON.js";
 import {
   SdDivider
-} from "./chunks/chunk.6ID5BKH5.js";
+} from "./chunks/chunk.7O463ZCI.js";
 import {
   SdDropdown
-} from "./chunks/chunk.EIUEZZ5G.js";
+} from "./chunks/chunk.QEMBE34K.js";
 import {
   SdExpandable
-} from "./chunks/chunk.4Z5MLLDU.js";
+} from "./chunks/chunk.K6PS5MI5.js";
 import {
   SdFlipcard
-} from "./chunks/chunk.N7WBIQUG.js";
+} from "./chunks/chunk.2KGI4RGY.js";
 import {
   SdHeader
-} from "./chunks/chunk.N3MU3643.js";
+} from "./chunks/chunk.A3OMC6GV.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.MEHX7EVL.js";
+} from "./chunks/chunk.U5XX2CPX.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.ZF7CPAC2.js";
+} from "./chunks/chunk.SHDQPZVK.js";
 import {
   SdCombobox
-} from "./chunks/chunk.WEUFN5UU.js";
+} from "./chunks/chunk.G4SPWXEP.js";
 import {
   SdTag
-} from "./chunks/chunk.7ZISZOWN.js";
+} from "./chunks/chunk.2I3XKHRL.js";
 import {
   SdPopup
-} from "./chunks/chunk.UAADOLK5.js";
+} from "./chunks/chunk.JW6RZW7I.js";
 import "./chunks/chunk.GI7VDIWX.js";
 import "./chunks/chunk.WBJBQ4QI.js";
 import "./chunks/chunk.UIQBHPD3.js";
 import {
   SdBadge
-} from "./chunks/chunk.6SZYSES2.js";
+} from "./chunks/chunk.BS3O2QJ6.js";
 import {
   SdBrandshape
-} from "./chunks/chunk.JUUDZ47Q.js";
+} from "./chunks/chunk.LM6HLQCE.js";
 import {
   SdBreadcrumb
-} from "./chunks/chunk.QS7N47CI.js";
+} from "./chunks/chunk.SNZAP25L.js";
 import {
   SdBreadcrumbItem
-} from "./chunks/chunk.P4UKJXBL.js";
-import "./chunks/chunk.TX6S5UVP.js";
+} from "./chunks/chunk.GLR5XK2G.js";
+import "./chunks/chunk.WISC4V5Q.js";
 import {
   SdCarousel
-} from "./chunks/chunk.FUGGYSQF.js";
+} from "./chunks/chunk.2OIBQGHM.js";
 import "./chunks/chunk.W2YDXTG5.js";
 import "./chunks/chunk.FNYEXUNK.js";
 import "./chunks/chunk.NOWCQZBS.js";
 import {
   SdCarouselItem
-} from "./chunks/chunk.TWDHTS5K.js";
+} from "./chunks/chunk.ZYSPY56A.js";
 import "./chunks/chunk.F4VGSDIW.js";
 import {
   SdAccordionGroup
-} from "./chunks/chunk.FFAUGMVF.js";
+} from "./chunks/chunk.OT4PPAKV.js";
 import {
   SdAccordion
-} from "./chunks/chunk.WL7EGHGP.js";
+} from "./chunks/chunk.MQGUFVIS.js";
 import {
   SdAnimation
-} from "./chunks/chunk.TQMYNSM4.js";
+} from "./chunks/chunk.UYJNZRYC.js";
 import "./chunks/chunk.TJOP7HQP.js";
 import {
   SdAudio
-} from "./chunks/chunk.FDUVN4I6.js";
+} from "./chunks/chunk.ULYZ7HF4.js";
 import {
   SdDrawer
-} from "./chunks/chunk.ZVLZ6XOK.js";
+} from "./chunks/chunk.LNUCDACW.js";
 import "./chunks/chunk.SF6AUNJF.js";
 import "./chunks/chunk.EDMG7C5H.js";
 import "./chunks/chunk.UMIKFOMI.js";
 import "./chunks/chunk.WDWV53JP.js";
 import {
   SdButton
-} from "./chunks/chunk.MEDUZPGV.js";
+} from "./chunks/chunk.PMNTW4FI.js";
 import {
-  SdSpinner
-} from "./chunks/chunk.ZCI47J45.js";
+  SdLoader
+} from "./chunks/chunk.5ZCXBV7F.js";
 import "./chunks/chunk.KVKRZJS7.js";
 import "./chunks/chunk.IVMQWO2L.js";
 import "./chunks/chunk.N4LHE3QK.js";
 import "./chunks/chunk.B4BZKR24.js";
 import {
   SdIcon
-} from "./chunks/chunk.YRFRBXRK.js";
+} from "./chunks/chunk.F4RHOUGP.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
@@ -188,10 +198,10 @@ import "./chunks/chunk.RPB53XXV.js";
 import {
   LocalizeController
 } from "./chunks/chunk.YKM42GKF.js";
-import "./chunks/chunk.2G46ORZ2.js";
-import "./chunks/chunk.ZC7XGWJ6.js";
+import "./chunks/chunk.P3RYNUKZ.js";
+import "./chunks/chunk.YXCPZAFU.js";
 import "./chunks/chunk.X2OQMWGY.js";
-import "./chunks/chunk.PP5IDYES.js";
+import "./chunks/chunk.QWL32OLS.js";
 import "./chunks/chunk.HQWAKJBV.js";
 import "./chunks/chunk.POFWU6ZT.js";
 import "./chunks/chunk.S3NI7NKU.js";
@@ -222,6 +232,7 @@ export {
   SdInclude,
   SdInput,
   SdLink,
+  SdLoader,
   SdMapMarker,
   SdMenu,
   SdMenuItem,
@@ -234,6 +245,8 @@ export {
   SdRadio,
   SdRadioButton,
   SdRadioGroup,
+  SdRange,
+  SdRangeTick,
   SdScrollable,
   SdSelect,
   SdSpinner,

package/dist/translations/de.js

@@ -1,6 +1,6 @@
 import {
   de_default
-} from "../chunks/chunk.2G46ORZ2.js";
+} from "../chunks/chunk.P3RYNUKZ.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   de_default as default

package/dist/translations/en.js

@@ -1,6 +1,6 @@
 import {
   en_default
-} from "../chunks/chunk.ZC7XGWJ6.js";
+} from "../chunks/chunk.YXCPZAFU.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   en_default as default

package/dist/utilities/autocomplete-config.js

@@ -1,8 +1,8 @@
 import {
   setupAutocomplete
 } from "../chunks/chunk.6DKXZWRN.js";
-import "../chunks/chunk.UAADOLK5.js";
-import "../chunks/chunk.PP5IDYES.js";
+import "../chunks/chunk.JW6RZW7I.js";
+import "../chunks/chunk.QWL32OLS.js";
 import "../chunks/chunk.HQWAKJBV.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/utilities/localize.d.ts

@@ -32,6 +32,8 @@ export interface Translation extends DefaultTranslation {
     goToSlide: (slide: number, count: number) => string;
     hidePassword: string;
     loading: string;
+    maximum: string;
+    minimum: string;
     mute: string;
     nextSlide: string;
     noResults: string;

package/dist/utilities/localize.js

@@ -1,8 +1,8 @@
 import {
   LocalizeController
 } from "../chunks/chunk.YKM42GKF.js";
-import "../chunks/chunk.2G46ORZ2.js";
-import "../chunks/chunk.ZC7XGWJ6.js";
+import "../chunks/chunk.P3RYNUKZ.js";
+import "../chunks/chunk.YXCPZAFU.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   LocalizeController

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

@@ -1518,6 +1518,37 @@
         }
       ]
     },
+    {
+      "name": "sd-loader",
+      "description": "Loaders are used to show the progress of an indeterminate operation.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
+      "attributes": [
+        {
+          "name": "color",
+          "description": "The color of the loader.",
+          "values": [
+            { "name": "primary" },
+            { "name": "white" },
+            { "name": "currentColor" }
+          ]
+        },
+        {
+          "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-loader--docs"
+        }
+      ]
+    },
     {
       "name": "sd-map-marker",
       "description": "A marker identifies a location on google map\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the map marker loses focus.\n- **sd-focus** - Emitted when the map marker is focused.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The marker's content.\\\n\n### **CSS Properties:**\n - **--map-marker-scaling** - Scale the marker size. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The components' base wrapper.\n- **marker** - The markers' svg wrapper.\n- **content** - The container that wraps the default slot.\n- **motion-wrapper** - The container that wraps the motion animation.",
@@ -2220,6 +2251,110 @@
         }
       ]
     },
+    {
+      "name": "sd-range",
+      "description": "Used to allow users to select a single or multiple values within a defined range using a slider.\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-move** - Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement.\n\n### **Methods:**\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- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The default slot.\n- **help-text** - Text that describes how to use the range. Alternatively, you can use the `help-text` attribute.\n- **label** - The range's label. Alternatively, you can use the `label` attribute.\n- **scale-ticks** - Used to display tick marks at specific intervals along the range.\n\n### **CSS Properties:**\n - **--track-active-offset** - The point of origin of the active track, starting at the left side of the range. _(default: undefined)_\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-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input-wrapper** - The container that wraps the input track and ticks.\n- **track-wrapper** - The wrapper for the track.\n- **track** - The inactive track.\n- **active-track** - The active track.\n- **track-click-helper** - The element that increases the track clickable area.\n- **thumb** - The thumb(s) that the user can drag to change the range.\n- **scale-ticks** - The container that wraps the tick marks.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The name of the range, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+          "values": []
+        },
+        {
+          "name": "help-text",
+          "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+          "values": []
+        },
+        {
+          "name": "min",
+          "description": "The minimum acceptable value of the range.",
+          "values": []
+        },
+        {
+          "name": "max",
+          "description": "The maximum acceptable value of the range.",
+          "values": []
+        },
+        {
+          "name": "step",
+          "description": "The interval at which the range will increase and decrease.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the range.",
+          "values": []
+        },
+        {
+          "name": "visually-disabled",
+          "description": "Disables the range visually.",
+          "values": []
+        },
+        {
+          "name": "no-track-bar",
+          "description": "Disables the active track bar.",
+          "values": []
+        },
+        {
+          "name": "no-tooltip",
+          "description": "Disables the thumbs tooltip.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The current values of the input (in ascending order) as a string of space separated values",
+          "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-range--docs"
+        }
+      ]
+    },
+    {
+      "name": "sd-range-tick",
+      "description": "Ticks visually improve positioning on range sliders.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The tick's label\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The component's label.\n- **line** - The component's tick line.",
+      "attributes": [
+        {
+          "name": "subtick",
+          "description": "Whether the tick should be shown as a subtick.",
+          "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-range-tick--docs"
+        }
+      ]
+    },
     {
       "name": "sd-scrollable",
       "description": "Scrollable is used to indicate there is hidden content to be scrolled.\n---\n\n\n### **Events:**\n - **start** - Emitted when the start of the scrollable is reached.\n- **end** - Emitted when the end of the scrollable is reached.\n- **eventName**\n- **button-left** - Emitted when the left button is clicked.\n- **button-right** - Emitted when the right button is clicked.\n- **button-up** - Emitted when the top button is clicked.\n- **button-down** - Emitted when the bottom button is clicked.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The scrollable's content.\n- **icon-start** - The scrollable's start icon.\n- **icon-end** - The scrollable's end icon.\n\n### **CSS Properties:**\n - **--gradient-color** - Defines a custom color for the gradient. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The scrollable's base wrapper.\n- **scroll-content** - The scrollable's content.\n- **button-start** - The scrollable's start scroll button.\n- **button-end** - The scrollable's end scroll button.\n- **button-left** - The scrollable's left scroll button.\n- **button-right** - The scrollable's right scroll button.\n- **button-top** - The scrollable's top scroll button.\n- **button-bottom** - The scrollable's bottom scroll button.\n- **shadow-left** - The scrollable's left shadow.\n- **shadow-right** - The scrollable's right shadow.\n- **shadow-top** - The scrollable's top shadow.\n- **shadow-bottom** - The scrollable's bottom shadow.",