@solid-design-system/components 6.29.0 → 6.30.0

package/dist/solid-components.d.ts

@@ -57,6 +57,7 @@ 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 SdThemeListener } from './components/theme-listener/theme-listener.js';
+export { default as SdFileSelector } from './components/file-selector/file-selector.js';
 export * from './utilities/icon-library';
 export * from './utilities/localize';
 export * from './utilities/autocomplete-config';

package/dist/solid-components.js

@@ -1,222 +1,225 @@
+import "./chunks/chunk.HAL7R4WT.js";
 import {
   setupAutocomplete
 } from "./chunks/chunk.QGERTGJH.js";
-import "./chunks/chunk.HAL7R4WT.js";
+import {
+  SdTabPanel
+} from "./chunks/chunk.PBHCVOCE.js";
 import {
   SdTeaser
-} from "./chunks/chunk.TCCVXGO3.js";
+} from "./chunks/chunk.TLEU7YBO.js";
 import {
   SdTeaserMedia
-} from "./chunks/chunk.5JXNGWGO.js";
+} from "./chunks/chunk.OHJLLBZM.js";
 import {
   SdTextarea
-} from "./chunks/chunk.67F53YIT.js";
+} from "./chunks/chunk.2FO74NMB.js";
 import {
   SdVideo
-} from "./chunks/chunk.ZJE7OCFV.js";
+} from "./chunks/chunk.2UHCCORM.js";
+import {
+  SdSelect
+} from "./chunks/chunk.RB7LNC44.js";
 import {
   SdSkeleton
-} from "./chunks/chunk.KPKOJGRC.js";
+} from "./chunks/chunk.VGREAYYY.js";
 import {
   SdSpinner
-} from "./chunks/chunk.AQPWS7H5.js";
+} from "./chunks/chunk.KR5X73WV.js";
 import {
   SdStep
-} from "./chunks/chunk.7QCSVC6W.js";
+} from "./chunks/chunk.KIIB3FFM.js";
 import {
   SdStepGroup
-} from "./chunks/chunk.6A5KL2ME.js";
+} from "./chunks/chunk.MCRKOZZE.js";
 import {
   SdSwitch
-} from "./chunks/chunk.G3YXVIXP.js";
+} from "./chunks/chunk.4QH36I7J.js";
 import {
   SdTab
-} from "./chunks/chunk.DEKB47SU.js";
+} from "./chunks/chunk.VBWU6AAA.js";
 import {
   SdTabGroup
-} from "./chunks/chunk.UPUTDGVP.js";
+} from "./chunks/chunk.6QH7MUGI.js";
 import {
-  SdTabPanel
-} from "./chunks/chunk.NEPWG7EE.js";
+  SdQuickfact
+} from "./chunks/chunk.HKDY2SX6.js";
 import {
   SdRadioButton
-} from "./chunks/chunk.FGGJHWJQ.js";
+} from "./chunks/chunk.ALFOBBM3.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.TH56Y5BD.js";
+} from "./chunks/chunk.E7BGW6SN.js";
 import {
   SdRadio
-} from "./chunks/chunk.OPHYFYBJ.js";
+} from "./chunks/chunk.DNCDNML2.js";
 import {
   SdRange
-} from "./chunks/chunk.73VNCNET.js";
+} from "./chunks/chunk.BU2U2CE7.js";
 import {
   SdTooltip
-} from "./chunks/chunk.J2IWPOVN.js";
+} from "./chunks/chunk.AXF42D3S.js";
 import "./chunks/chunk.D3YSIVTB.js";
 import {
   SdRangeTick
-} from "./chunks/chunk.RM4W3RUJ.js";
+} from "./chunks/chunk.EBATDDUA.js";
 import {
   SdScrollable
-} from "./chunks/chunk.KOYTK43J.js";
+} from "./chunks/chunk.MXSG7VRT.js";
 import {
-  SdSelect
-} from "./chunks/chunk.M74NHLSR.js";
+  SdMenuItem
+} from "./chunks/chunk.GA5ZGGWC.js";
+import "./chunks/chunk.KEJFWGZI.js";
 import {
   SdNavigationItem
-} from "./chunks/chunk.YJ3HFB7U.js";
+} from "./chunks/chunk.CHQXV5AD.js";
 import {
   SdNotification
-} from "./chunks/chunk.SRHXZUZH.js";
+} from "./chunks/chunk.AFHCI6IS.js";
 import {
   SdOptgroup
-} from "./chunks/chunk.NZOLXA5P.js";
+} from "./chunks/chunk.47DEDQQK.js";
 import {
   SdOption
-} from "./chunks/chunk.L3QZLYWI.js";
+} from "./chunks/chunk.2DGYIFDJ.js";
 import {
   SdProgressBar
-} from "./chunks/chunk.DANLADQA.js";
-import {
-  SdQuickfact
-} from "./chunks/chunk.2R6BV36X.js";
+} from "./chunks/chunk.XS6AQ4CM.js";
 import {
   SdInclude
-} from "./chunks/chunk.5LPEWRVH.js";
+} from "./chunks/chunk.JU7PIHSF.js";
 import {
   SdInput
-} from "./chunks/chunk.EVXE6QT5.js";
+} from "./chunks/chunk.LCDZV7BS.js";
 import {
   SdMapMarker
-} from "./chunks/chunk.E7TO66OI.js";
+} from "./chunks/chunk.HLFIH4MY.js";
 import {
   SdMenu
-} from "./chunks/chunk.YXXCQXMG.js";
+} from "./chunks/chunk.SXXPU7JD.js";
 import {
-  SdMenuItem
-} from "./chunks/chunk.KBLFP77D.js";
-import "./chunks/chunk.KEJFWGZI.js";
+  SdFlipcard
+} from "./chunks/chunk.GBSWTGPJ.js";
 import {
   SdHeader
-} from "./chunks/chunk.GGTNOUL3.js";
+} from "./chunks/chunk.TPUZGQAZ.js";
 import {
   SdDatepicker
-} from "./chunks/chunk.GKK76LN5.js";
+} from "./chunks/chunk.H6K5MLEC.js";
 import "./chunks/chunk.A4LR62QO.js";
 import "./chunks/chunk.TJ2FFWLY.js";
 import {
   SdDialog
-} from "./chunks/chunk.WWVBSSYI.js";
+} from "./chunks/chunk.FBSBBENN.js";
 import {
   SdDivider
-} from "./chunks/chunk.SZX2DZVG.js";
+} from "./chunks/chunk.CNLGYJ26.js";
 import {
   SdExpandable
-} from "./chunks/chunk.6CQHWDTR.js";
+} from "./chunks/chunk.BDBOCJUQ.js";
 import {
-  SdFlipcard
-} from "./chunks/chunk.XDHACCFS.js";
+  SdFileSelector
+} from "./chunks/chunk.X7DORH6O.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.U3TJBK63.js";
+} from "./chunks/chunk.AV2HYF25.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.AQ2YHTJT.js";
+} from "./chunks/chunk.YBP7P46N.js";
 import {
   SdCombobox
-} from "./chunks/chunk.RZYQYD7F.js";
+} from "./chunks/chunk.SURNV5UB.js";
 import {
   SdTag
-} from "./chunks/chunk.ZN6NBM5K.js";
+} from "./chunks/chunk.BZQG2H25.js";
 import "./chunks/chunk.GI7VDIWX.js";
 import "./chunks/chunk.WBJBQ4QI.js";
 import "./chunks/chunk.UIQBHPD3.js";
 import {
   SdBadge
-} from "./chunks/chunk.JZERVNQH.js";
+} from "./chunks/chunk.VKAWXQBO.js";
 import {
   SdBrandshape
-} from "./chunks/chunk.G4M5E52C.js";
+} from "./chunks/chunk.QBHSDBEF.js";
 import {
   SdBreadcrumb
-} from "./chunks/chunk.OVLIDOUF.js";
+} from "./chunks/chunk.747CZOOT.js";
 import {
   SdDropdown
-} from "./chunks/chunk.Q6BM6VB4.js";
+} from "./chunks/chunk.64WDBXSH.js";
 import {
   SdPopup
-} from "./chunks/chunk.3SKQW3OF.js";
+} from "./chunks/chunk.XDZE7ROV.js";
 import {
   SdBreadcrumbItem
-} from "./chunks/chunk.UU33HKYA.js";
+} from "./chunks/chunk.ENJLFL4U.js";
 import {
   SdLink
-} from "./chunks/chunk.BHAJNYNR.js";
-import "./chunks/chunk.ZOAGCGB2.js";
+} from "./chunks/chunk.A2CJLIUM.js";
+import "./chunks/chunk.OUSUUA7K.js";
 import {
   SdCarousel
-} from "./chunks/chunk.S7MVQQ7P.js";
+} from "./chunks/chunk.KYZI324J.js";
 import "./chunks/chunk.W2YDXTG5.js";
 import "./chunks/chunk.6RE6UZ72.js";
 import "./chunks/chunk.UVI5HHLF.js";
 import {
   SdCarouselItem
-} from "./chunks/chunk.WQ53PAAJ.js";
+} from "./chunks/chunk.B2TWJWHR.js";
 import "./chunks/chunk.F4VGSDIW.js";
 import {
   SdAccordionGroup
-} from "./chunks/chunk.QP6NYUMR.js";
+} from "./chunks/chunk.5XZQBMKD.js";
 import {
   SdAccordion
-} from "./chunks/chunk.SUBKF7CK.js";
+} from "./chunks/chunk.A337UTOA.js";
 import {
   SdAnimation
-} from "./chunks/chunk.KLDMZEUO.js";
+} from "./chunks/chunk.SB6TO2NI.js";
 import "./chunks/chunk.TJOP7HQP.js";
 import {
   SdAudio
-} from "./chunks/chunk.UHD76K4J.js";
+} from "./chunks/chunk.NT2XMLYA.js";
 import {
   SdDrawer
-} from "./chunks/chunk.TD274Z54.js";
+} from "./chunks/chunk.G4M2C6HJ.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.SFQPANQ4.js";
+} from "./chunks/chunk.Q4BNLRER.js";
 import {
   SdThemeListener
-} from "./chunks/chunk.SMXDKTQJ.js";
+} from "./chunks/chunk.L5OGV3KL.js";
 import {
   SdLoader
-} from "./chunks/chunk.YVETO4SL.js";
+} from "./chunks/chunk.SFIA76OX.js";
 import "./chunks/chunk.C3WIBDGG.js";
 import "./chunks/chunk.IVMQWO2L.js";
 import "./chunks/chunk.N4LHE3QK.js";
 import "./chunks/chunk.B4BZKR24.js";
 import {
   SdIcon
-} from "./chunks/chunk.LCMQJOE7.js";
+} from "./chunks/chunk.SIFZJP32.js";
+import "./chunks/chunk.P52GZVKG.js";
+import "./chunks/chunk.RPB53XXV.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "./chunks/chunk.54DGZ62W.js";
+} from "./chunks/chunk.XBDLZTHZ.js";
 import "./chunks/chunk.ENZOJSYQ.js";
-import "./chunks/chunk.6SPABX2F.js";
+import "./chunks/chunk.Z3HEYXRX.js";
 import "./chunks/chunk.Q4LFZ4MN.js";
 import "./chunks/chunk.4TPOL3LB.js";
-import "./chunks/chunk.P52GZVKG.js";
-import "./chunks/chunk.RPB53XXV.js";
 import {
   LocalizeController
 } from "./chunks/chunk.X3FE7OHE.js";
-import "./chunks/chunk.BT6SAX2H.js";
-import "./chunks/chunk.X4IYFUX6.js";
+import "./chunks/chunk.7D23CZ3Y.js";
+import "./chunks/chunk.KE6F4NXN.js";
 import "./chunks/chunk.X2OQMWGY.js";
-import "./chunks/chunk.T73O2TL3.js";
+import "./chunks/chunk.RT3GEKSF.js";
 import "./chunks/chunk.HQWAKJBV.js";
 import "./chunks/chunk.POFWU6ZT.js";
 import "./chunks/chunk.S3NI7NKU.js";
@@ -242,6 +245,7 @@ export {
   SdDrawer,
   SdDropdown,
   SdExpandable,
+  SdFileSelector,
   SdFlipcard,
   SdHeader,
   SdIcon,

package/dist/translations/de.js

@@ -1,6 +1,6 @@
 import {
   de_default
-} from "../chunks/chunk.X4IYFUX6.js";
+} from "../chunks/chunk.7D23CZ3Y.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.BT6SAX2H.js";
+} from "../chunks/chunk.KE6F4NXN.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.QGERTGJH.js";
-import "../chunks/chunk.3SKQW3OF.js";
-import "../chunks/chunk.T73O2TL3.js";
+import "../chunks/chunk.XDZE7ROV.js";
+import "../chunks/chunk.RT3GEKSF.js";
 import "../chunks/chunk.HQWAKJBV.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/utilities/icon-library.js

@@ -2,9 +2,9 @@ import "../chunks/chunk.HAL7R4WT.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "../chunks/chunk.54DGZ62W.js";
+} from "../chunks/chunk.XBDLZTHZ.js";
 import "../chunks/chunk.ENZOJSYQ.js";
-import "../chunks/chunk.6SPABX2F.js";
+import "../chunks/chunk.Z3HEYXRX.js";
 import "../chunks/chunk.Q4LFZ4MN.js";
 import "../chunks/chunk.4TPOL3LB.js";
 import "../chunks/chunk.S3NI7NKU.js";

package/dist/utilities/localize.d.ts

@@ -35,6 +35,12 @@ export interface Translation extends DefaultTranslation {
     dateRangePlaceholder: string;
     endDateSelected: string;
     expandNavigationItem: string;
+    fileButtonText: string;
+    fileButtonTextMultiple: string;
+    fileDragDrop: string;
+    fileDragDropMultiple: string;
+    folderButtonText: string;
+    folderDragDrop: string;
     goToSlide: (slide: number, count: number) => string;
     hidePassword: string;
     invalidDate: string;
@@ -47,6 +53,7 @@ export interface Translation extends DefaultTranslation {
     nextYear: string;
     noResults: string;
     notifications: string;
+    numFilesSelected: (num: number, isDirectory: boolean, isMultiple: boolean) => string;
     numOptionsSelected: (num: number) => string;
     open: string;
     openTranscript: string;

package/dist/utilities/localize.js

@@ -1,8 +1,8 @@
 import {
   LocalizeController
 } from "../chunks/chunk.X3FE7OHE.js";
-import "../chunks/chunk.BT6SAX2H.js";
-import "../chunks/chunk.X4IYFUX6.js";
+import "../chunks/chunk.7D23CZ3Y.js";
+import "../chunks/chunk.KE6F4NXN.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   LocalizeController

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

@@ -1242,6 +1242,123 @@
         }
       ]
     },
+    {
+      "name": "sd-file-selector",
+      "description": "Used to select a file by clicking or dragging a file into a drop-area.\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-error** - Emitted when multiple files are selected via drag and drop, without the `multiple` property being set.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-input** - Emitted when the control receives input.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\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 - **label** - The file selector's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the file selector. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--sd-form-control-border-radius** - The border radius of the file selector. _(default: undefined)_\n- **--sd-form-control-color-border** - The border color of the file selector. _(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-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-wrapper** - The wrapper around the button and text value.\n- **button** - The sd-button acting as a file input trigger.\n- **value** - The chosen files or placeholder text for the file input.\n- **droparea** - The element wrapping the drop zone.\n- **droparea-background** - The background of the drop zone.\n- **droparea-icon** - The container that wraps the icon for the drop zone.\n- **droparea-value** - The text for the drop zone.\n- **invalid-icon-message** - The container that wraps the invalid icon and message.\n- **invalid-icon** - The invalid icon.\n- **invalid-message** - The invalid message.",
+      "attributes": [
+        {
+          "name": "files",
+          "description": "The selected files as a `FileList` object. The `FileList` behaves like an array, so you can get the number of\nselected files via its `length` property.",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "The name of the file selector, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "title",
+          "description": "The `title` attribute specifies extra information about an element most often as a default browser tooltip text when the mouse moves over the element.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The value of the file selector contains a string that represents the path of the selected file. If multiple\nfiles are selected, the value represents the first file in the list. The only valid value when setting a file\ninput is an empty string.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The file selector's size.",
+          "values": [{ "name": "sm" }, { "name": "md" }, { "name": "lg" }]
+        },
+        {
+          "name": "label",
+          "description": "The file selector's label, this field is required to ensure accessibility. It is visually hidden by default, use the `showLabel` property to display it.",
+          "values": []
+        },
+        {
+          "name": "show-label",
+          "description": "Visually displays the file selector's label.",
+          "values": []
+        },
+        {
+          "name": "help-text",
+          "description": "The file selector's help text. If you need to display HTML, use the `help-text` slot instead.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the file selector.",
+          "values": []
+        },
+        {
+          "name": "visually-disabled",
+          "description": "Styles the input as if it was disabled and enables aria-disabled",
+          "values": []
+        },
+        {
+          "name": "drop-area",
+          "description": "Draw the file selector as a drop area.",
+          "values": []
+        },
+        {
+          "name": "accept",
+          "description": "Comma-separated list of supported file types (e.g. `.jpg,.png,image/*`).",
+          "values": []
+        },
+        {
+          "name": "style-on-valid",
+          "description": "Shows success styles if the validity of the input is valid.",
+          "values": []
+        },
+        {
+          "name": "capture",
+          "description": "Specifies which camera to use for capture of image or video data. Works only when not using a droparea.",
+          "values": [{ "name": "user" }, { "name": "environment" }]
+        },
+        {
+          "name": "multiple",
+          "description": "Indicates whether the user can select more than one file. Has no effect if `webkitdirectory` is set.",
+          "values": []
+        },
+        {
+          "name": "webkitdirectory",
+          "description": "Indicates that the file selector should let the user select directories instead of files. Non-standard, but\nsupported by all major browsers.",
+          "values": []
+        },
+        {
+          "name": "form",
+          "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "Makes the input a required field.",
+          "values": []
+        },
+        {
+          "name": "hide-value",
+          "description": "Suppresses the value from being displayed in the file selector.",
+          "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-file-selector--docs"
+        }
+      ]
+    },
     {
       "name": "sd-flipcard",
       "description": "Used to display content on both sides of a card by presenting information on one side and revealing additional information when flipped.\n---\n\n\n### **Events:**\n - **sd-flip-front** - Emmited when the front face of the flipcard is clicked.\n- **sd-flip-back** - Emmited when the back face of the flipcard 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 - **front** - The front face of the flipcard.\n- **back** - The back face of the flipcard.\n- **media-front** - An optional media slot which can be as a background. Dependent from gradient variant.\n- **media-back** - An optional media slot which can be as a background. Dependent from gradient variant.\n\n### **CSS Properties:**\n - **--name** - Description of the flipcard. _(default: undefined)_\n- **--height** - Use this property to set the height of the flipcard. _(default: undefined)_\n- **--sd-informational-gradient--primary-800-color-background** - The color used in the gradient of the flipcard when the `gradient-dark` variant is used. By default, it uses the `--sd-color-primary-800` color. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **front** - The container that wraps the front-side of the flipcard.\n- **back** - The container that wraps the back-side of the flipcard.\n- **front-button** - The button that flips the flipcard to the back.\n- **back-button** - The button that flips the flipcard to the front.\n- **front-interactive-container** - The container that wraps the front side and the flip button.\n- **back-interactive-container** - The container that wraps the back side and the flip button.\n- **front-slot-container** - The container that wraps the front slot.\n- **back-slot-container** - The container that wraps the back slot.\n- **media-front** - The container that wraps the media-front slot.\n- **media-back** - The container that wraps the media-back slot.\n- **front-secondary-gradient** - The container that wraps the secondary gradient of the front side.\n- **back-secondary-gradient** - The container that wraps the secondary gradient of the back side.",