@sbb-esta/lyne-elements 4.0.0-next.1 → 4.0.0-next.3

package/development/visual-checkbox/visual-checkbox.component.js

@@ -13,111 +13,65 @@ import { isLean } from "../core/dom.js";
 import { SbbDisabledMixin, SbbNegativeMixin } from "../core/mixins.js";
 import { boxSizingStyles } from "../core/styles.js";
 const style = css`:host {
-  display: block;
-  --sbb-visual-checkbox-dimension: var(--sbb-size-icon-ui-small);
-  --sbb-visual-checkbox-background-color: var(--sbb-background-color-1);
-  --sbb-visual-checkbox-border-color: var(--sbb-border-color-5);
-  --sbb-visual-checkbox-border-style: solid;
-  --sbb-visual-checkbox-border-width: var(--sbb-border-width-1x);
-  --sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
-  --sbb-visual-checkbox-cursor: var(--sbb-cursor-pointer);
-}
-@media (forced-colors: active) {
-  :host {
-    --sbb-visual-checkbox-selection-color: Canvas;
-    --sbb-visual-checkbox-border-width: 0;
-  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--sbb-visual-checkbox-dimension);
+  height: var(--sbb-visual-checkbox-dimension);
+  border-radius: var(--sbb-border-radius-2x);
+  background-color: var(--sbb-visual-checkbox-background-color);
+  cursor: var(--sbb-visual-checkbox-cursor);
+  outline: var(--sbb-visual-checkbox-border-width) var(--sbb-visual-checkbox-border-style) var(--sbb-visual-checkbox-border-color);
+  outline-offset: calc(-1 * var(--sbb-visual-checkbox-border-width));
 }
 
 :host([size=xs]) {
-  --sbb-visual-checkbox-dimension: 1.25rem;
+  --sbb-visual-checkbox-dimension: var(--sbb-visual-checkbox-dimension-xs);
 }
 
-:host([negative]) {
-  --sbb-visual-checkbox-background-color: var(--sbb-background-color-1-negative);
-  --sbb-visual-checkbox-border-color: var(--sbb-border-color-5);
-  --sbb-visual-checkbox-selection-color: var(--sbb-color-primary85);
+:host(:is([size=s], [size=m])) {
+  --sbb-visual-checkbox-dimension: var(--sbb-visual-checkbox-dimension-m);
 }
-@media (forced-colors: active) {
-  :host([negative]) {
-    --sbb-visual-checkbox-selection-color: Canvas;
-  }
+
+:host([negative]) {
+  --sbb-visual-checkbox-background-color: var(--sbb-visual-checkbox-background-color-negative);
+  --sbb-visual-checkbox-selection-color: var(--sbb-visual-checkbox-selection-color-negative);
 }
 
 :host([disabled]) {
-  --sbb-visual-checkbox-background-color: var(--sbb-background-color-3);
-  --sbb-visual-checkbox-border-color: var(--sbb-border-color-5);
-  --sbb-visual-checkbox-border-style: dashed;
-  --sbb-visual-checkbox-selection-color: var(--sbb-color-2);
+  --sbb-visual-checkbox-background-color: var(--sbb-visual-checkbox-background-color-disabled);
+  --sbb-visual-checkbox-border-style: var(--sbb-visual-checkbox-border-style-disabled);
   --sbb-visual-checkbox-cursor: var(--sbb-cursor-default);
-}
-@media (forced-colors: active) {
-  :host([disabled]) {
-    --sbb-visual-checkbox-selection-color: Canvas;
-  }
+  --sbb-visual-checkbox-border-color: var(--sbb-visual-checkbox-border-color-disabled);
+  --sbb-visual-checkbox-selection-color: var(--sbb-visual-checkbox-selection-color-disabled);
 }
 
 :host([disabled][negative]) {
-  --sbb-visual-checkbox-background-color: var(--sbb-background-color-3-negative);
-  --sbb-visual-checkbox-border-color: var(--sbb-border-color-5);
-  --sbb-visual-checkbox-selection-color: var(--sbb-color-2-negative);
-}
-@media (forced-colors: active) {
-  :host([disabled][negative]) {
-    --sbb-visual-checkbox-selection-color: Canvas;
-  }
+  --sbb-visual-checkbox-background-color: var(
+    --sbb-visual-checkbox-background-color-negative-disabled
+  );
+  --sbb-visual-checkbox-selection-color: var(
+    --sbb-visual-checkbox-selection-color-disabled-negative
+  );
 }
 
 @media (forced-colors: active) {
   :host([indeterminate]) {
     --sbb-visual-checkbox-selection-color: ButtonBorder;
   }
-}
-
-@media (forced-colors: active) {
   :host([indeterminate][disabled]) {
     --sbb-visual-checkbox-selection-color: GrayText;
   }
-}
-
-.sbb-visual-checkbox {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--sbb-visual-checkbox-dimension);
-  height: var(--sbb-visual-checkbox-dimension);
-  border-radius: var(--sbb-border-radius-2x);
-  border: var(--sbb-visual-checkbox-border-width) var(--sbb-visual-checkbox-border-style) var(--sbb-visual-checkbox-border-color);
-  background-color: var(--sbb-visual-checkbox-background-color);
-  cursor: var(--sbb-visual-checkbox-cursor);
-}
-@media (forced-colors: active) {
-  .sbb-visual-checkbox {
-    outline: var(--sbb-border-width-2x) solid ButtonBorder;
-    outline-offset: calc(-1 * var(--sbb-border-width-2x));
-  }
-  :host([checked]:not([indeterminate])) .sbb-visual-checkbox {
-    background-color: HighLight;
-    outline: none;
-  }
-  :host([disabled]) .sbb-visual-checkbox {
-    outline-color: GrayText;
+  :host([checked]:not([indeterminate])) {
+    --sbb-visual-checkbox-background-color: Highlight;
+    --sbb-visual-checkbox-border-width: 0;
   }
-  :host([checked][disabled]:not([indeterminate])) .sbb-visual-checkbox {
-    background-color: GrayText;
+  :host([disabled][checked]:not([indeterminate])) {
+    --sbb-visual-checkbox-background-color: GrayText;
   }
 }
-
-.sbb-visual-checkbox__icon {
-  display: inline-flex;
-  width: var(--sbb-visual-checkbox-dimension);
-  height: var(--sbb-visual-checkbox-dimension);
-}
-.sbb-visual-checkbox__icon svg {
-  margin: auto;
-}
-.sbb-visual-checkbox__icon path {
+path {
   stroke: var(--sbb-visual-checkbox-selection-color);
 }`;
 let SbbVisualCheckboxElement = (() => {
@@ -170,24 +124,20 @@ let SbbVisualCheckboxElement = (() => {
     }
     render() {
       return html`
-      <span class="sbb-visual-checkbox">
-        <span class="sbb-visual-checkbox__icon">
-          ${this.checked || this.indeterminate ? html`<svg
-                width=${this.size === "xs" ? "20" : "24"}
-                height=${this.size === "xs" ? "20" : "24"}
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d=${this.indeterminate ? "M9 12H15" : "M8 12.3304L10.4615 15L16 9"}
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>` : nothing}
-        </span>
-      </span>
+      ${this.checked || this.indeterminate ? html`<svg
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            width="100%"
+            height="100%"
+          >
+            <path
+              fill="none"
+              d=${this.indeterminate ? "M9 12H15" : "M8 12.3304L10.4615 15L16 9"}
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>` : nothing}
     `;
     }
   }, _checked_accessor_storage = new WeakMap(), _indeterminate_accessor_storage = new WeakMap(), _size_accessor_storage = new WeakMap(), _classThis = _a, (() => {
@@ -213,4 +163,4 @@ let SbbVisualCheckboxElement = (() => {
 export {
   SbbVisualCheckboxElement
 };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlzdWFsLWNoZWNrYm94LmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL3Zpc3VhbC1jaGVja2JveC92aXN1YWwtY2hlY2tib3guY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGh0bWwsIExpdEVsZW1lbnQsIG5vdGhpbmcgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCwgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCB0eXBlIHsgU2JiQ2hlY2tib3hTaXplIH0gZnJvbSAnLi4vY2hlY2tib3gvY29tbW9uLmpzJztcbmltcG9ydCB7IGZvcmNlVHlwZSB9IGZyb20gJy4uL2NvcmUvZGVjb3JhdG9ycy5qcyc7XG5pbXBvcnQgeyBpc0xlYW4gfSBmcm9tICcuLi9jb3JlL2RvbS5qcyc7XG5pbXBvcnQgeyBTYmJEaXNhYmxlZE1peGluLCBTYmJOZWdhdGl2ZU1peGluIH0gZnJvbSAnLi4vY29yZS9taXhpbnMuanMnO1xuaW1wb3J0IHsgYm94U2l6aW5nU3R5bGVzIH0gZnJvbSAnLi4vY29yZS9zdHlsZXMuanMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi92aXN1YWwtY2hlY2tib3guc2Nzcz9saXQmaW5saW5lJztcblxuLyoqXG4gKiBJdCB2aXN1YWxseSBkaXNwbGF5cyBhIG5vbi1pbnRlcmFjdGl2ZSBjaGVja2JveC5cbiAqL1xuZXhwb3J0XG5AY3VzdG9tRWxlbWVudCgnc2JiLXZpc3VhbC1jaGVja2JveCcpXG5jbGFzcyBTYmJWaXN1YWxDaGVja2JveEVsZW1lbnQgZXh0ZW5kcyBTYmJEaXNhYmxlZE1peGluKFNiYk5lZ2F0aXZlTWl4aW4oTGl0RWxlbWVudCkpIHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gW2JveFNpemluZ1N0eWxlcywgc3R5bGVdO1xuXG4gIC8qKiBDaGVja2VkIHN0YXRlLiAqL1xuICBAZm9yY2VUeXBlKClcbiAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSwgdHlwZTogQm9vbGVhbiB9KVxuICBwdWJsaWMgYWNjZXNzb3IgY2hlY2tlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKiBJbmRldGVybWluYXRlIHN0YXRlLiAqL1xuICBAZm9yY2VUeXBlKClcbiAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSwgdHlwZTogQm9vbGVhbiB9KVxuICBwdWJsaWMgYWNjZXNzb3IgaW5kZXRlcm1pbmF0ZTogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBTaXplIG9mIHRoZSBjaGVja2JveCwgZWl0aGVyIHhzLCBzIG9yIG0uXG4gICAqIEBkZWZhdWx0ICdtJyAvICd4cycgKGxlYW4pXG4gICAqL1xuICBAcHJvcGVydHkoeyByZWZsZWN0OiB0cnVlIH0pIHB1YmxpYyBhY2Nlc3NvciBzaXplOiBTYmJDaGVja2JveFNpemUgPSBpc0xlYW4oKSA/ICd4cycgOiAnbSc7XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8c3BhbiBjbGFzcz1cInNiYi12aXN1YWwtY2hlY2tib3hcIj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItdmlzdWFsLWNoZWNrYm94X19pY29uXCI+XG4gICAgICAgICAgJHt0aGlzLmNoZWNrZWQgfHwgdGhpcy5pbmRldGVybWluYXRlXG4gICAgICAgICAgICA/IGh0bWxgPHN2Z1xuICAgICAgICAgICAgICAgIHdpZHRoPSR7dGhpcy5zaXplID09PSAneHMnID8gJzIwJyA6ICcyNCd9XG4gICAgICAgICAgICAgICAgaGVpZ2h0PSR7dGhpcy5zaXplID09PSAneHMnID8gJzIwJyA6ICcyNCd9XG4gICAgICAgICAgICAgICAgdmlld0JveD1cIjAgMCAyNCAyNFwiXG4gICAgICAgICAgICAgICAgZmlsbD1cIm5vbmVcIlxuICAgICAgICAgICAgICAgIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIlxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgICAgICAgIGQ9JHt0aGlzLmluZGV0ZXJtaW5hdGUgPyAnTTkgMTJIMTUnIDogJ004IDEyLjMzMDRMMTAuNDYxNSAxNUwxNiA5J31cbiAgICAgICAgICAgICAgICAgIHN0cm9rZS13aWR0aD1cIjJcIlxuICAgICAgICAgICAgICAgICAgc3Ryb2tlLWxpbmVjYXA9XCJyb3VuZFwiXG4gICAgICAgICAgICAgICAgICBzdHJva2UtbGluZWpvaW49XCJyb3VuZFwiXG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgPC9zdmc+YFxuICAgICAgICAgICAgOiBub3RoaW5nfVxuICAgICAgICA8L3NwYW4+XG4gICAgICA8L3NwYW4+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLXZpc3VhbC1jaGVja2JveCc6IFNiYlZpc3VhbENoZWNrYm94RWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0lBaUJNLDRCQUF3QixNQUFBOzswQkFEN0IsY0FBYyxxQkFBcUIsQ0FBQzs7OztBQUNFLE1BQUEsY0FBQSxpQkFBaUIsaUJBQWlCLFVBQVUsQ0FBQzs7Ozs7Ozs7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
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlzdWFsLWNoZWNrYm94LmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL3Zpc3VhbC1jaGVja2JveC92aXN1YWwtY2hlY2tib3guY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGh0bWwsIExpdEVsZW1lbnQsIG5vdGhpbmcgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCwgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCB0eXBlIHsgU2JiQ2hlY2tib3hTaXplIH0gZnJvbSAnLi4vY2hlY2tib3gvY29tbW9uLnRzJztcbmltcG9ydCB7IGZvcmNlVHlwZSB9IGZyb20gJy4uL2NvcmUvZGVjb3JhdG9ycy50cyc7XG5pbXBvcnQgeyBpc0xlYW4gfSBmcm9tICcuLi9jb3JlL2RvbS50cyc7XG5pbXBvcnQgeyBTYmJEaXNhYmxlZE1peGluLCBTYmJOZWdhdGl2ZU1peGluIH0gZnJvbSAnLi4vY29yZS9taXhpbnMudHMnO1xuaW1wb3J0IHsgYm94U2l6aW5nU3R5bGVzIH0gZnJvbSAnLi4vY29yZS9zdHlsZXMudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi92aXN1YWwtY2hlY2tib3guc2Nzcz9saXQmaW5saW5lJztcblxuLyoqXG4gKiBJdCB2aXN1YWxseSBkaXNwbGF5cyBhIG5vbi1pbnRlcmFjdGl2ZSBjaGVja2JveC5cbiAqL1xuZXhwb3J0XG5AY3VzdG9tRWxlbWVudCgnc2JiLXZpc3VhbC1jaGVja2JveCcpXG5jbGFzcyBTYmJWaXN1YWxDaGVja2JveEVsZW1lbnQgZXh0ZW5kcyBTYmJEaXNhYmxlZE1peGluKFNiYk5lZ2F0aXZlTWl4aW4oTGl0RWxlbWVudCkpIHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gW2JveFNpemluZ1N0eWxlcywgc3R5bGVdO1xuXG4gIC8qKiBDaGVja2VkIHN0YXRlLiAqL1xuICBAZm9yY2VUeXBlKClcbiAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSwgdHlwZTogQm9vbGVhbiB9KVxuICBwdWJsaWMgYWNjZXNzb3IgY2hlY2tlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKiBJbmRldGVybWluYXRlIHN0YXRlLiAqL1xuICBAZm9yY2VUeXBlKClcbiAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSwgdHlwZTogQm9vbGVhbiB9KVxuICBwdWJsaWMgYWNjZXNzb3IgaW5kZXRlcm1pbmF0ZTogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBTaXplIG9mIHRoZSBjaGVja2JveCwgZWl0aGVyIHhzLCBzIG9yIG0uXG4gICAqIEBkZWZhdWx0ICdtJyAvICd4cycgKGxlYW4pXG4gICAqL1xuICBAcHJvcGVydHkoeyByZWZsZWN0OiB0cnVlIH0pIHB1YmxpYyBhY2Nlc3NvciBzaXplOiBTYmJDaGVja2JveFNpemUgPSBpc0xlYW4oKSA/ICd4cycgOiAnbSc7XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICAke3RoaXMuY2hlY2tlZCB8fCB0aGlzLmluZGV0ZXJtaW5hdGVcbiAgICAgICAgPyBodG1sYDxzdmdcbiAgICAgICAgICAgIHZpZXdCb3g9XCIwIDAgMjQgMjRcIlxuICAgICAgICAgICAgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiXG4gICAgICAgICAgICB3aWR0aD1cIjEwMCVcIlxuICAgICAgICAgICAgaGVpZ2h0PVwiMTAwJVwiXG4gICAgICAgICAgPlxuICAgICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgICAgZmlsbD1cIm5vbmVcIlxuICAgICAgICAgICAgICBkPSR7dGhpcy5pbmRldGVybWluYXRlID8gJ005IDEySDE1JyA6ICdNOCAxMi4zMzA0TDEwLjQ2MTUgMTVMMTYgOSd9XG4gICAgICAgICAgICAgIHN0cm9rZS13aWR0aD1cIjJcIlxuICAgICAgICAgICAgICBzdHJva2UtbGluZWNhcD1cInJvdW5kXCJcbiAgICAgICAgICAgICAgc3Ryb2tlLWxpbmVqb2luPVwicm91bmRcIlxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L3N2Zz5gXG4gICAgICAgIDogbm90aGluZ31cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItdmlzdWFsLWNoZWNrYm94JzogU2JiVmlzdWFsQ2hlY2tib3hFbGVtZW50O1xuICB9XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztJQWlCTSw0QkFBd0IsTUFBQTs7MEJBRDdCLGNBQWMscUJBQXFCLENBQUM7Ozs7QUFDRSxNQUFBLGNBQUEsaUJBQWlCLGlCQUFpQixVQUFVLENBQUM7Ozs7Ozs7Ozs7QUFBckQsRUFBQSxtQkFBUSxZQUE4QztBQUFBOztBQU1uRixvREFBQSxrQkFBQSxNQUFBLHVCQUFtQyxLQUFLO0FBS3hDLDJEQUFBLGtCQUFBLE1BQUEsMEJBQUEsR0FBQSxrQkFBQSxNQUFBLDZCQUF5QyxLQUFLO0FBTWpCLGtEQUFBLGtCQUFBLE1BQUEsZ0NBQUEsR0FBQSxrQkFBQSxNQUFBLG9CQUF3QyxXQUFXLE9BQU8sR0FBRzs7OztJQVgxRixJQUFnQixVQUFPO0FBQUEsYUFBQSxtQkFBQTtBQUFBLElBQUE7QUFBQSxJQUF2QixJQUFnQixRQUFPLE9BQUE7QUFBQSx5QkFBQSwyQkFBQTtBQUFBLElBQUE7QUFBQTtBQUFBLElBS3ZCLElBQWdCLGdCQUFhO0FBQUEsYUFBQSxtQkFBQTtBQUFBLElBQUE7QUFBQSxJQUE3QixJQUFnQixjQUFhLE9BQUE7QUFBQSx5QkFBQSxpQ0FBQTtBQUFBLElBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLElBTUEsSUFBZ0IsT0FBSTtBQUFBLGFBQUEsbUJBQUE7QUFBQSxJQUFBO0FBQUEsSUFBcEIsSUFBZ0IsS0FBSSxPQUFBO0FBQUEseUJBQUEsd0JBQUE7QUFBQSxJQUFBO0FBQUEsSUFFOUIsU0FBTTtBQUN2QixhQUFPO0FBQUEsUUFDSCxLQUFLLFdBQVcsS0FBSyxnQkFDbkI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQVFRLEtBQUssZ0JBQWdCLGFBQWEsNEJBQTRCO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxvQkFNdEUsT0FBTztBQUFBO0FBQUEsSUFFZjtBQUFBLEtBaENBLDJDQUtBLGlEQU02Qjs7QUFiNUIsMEJBQUEsQ0FBQSxVQUFBLEdBQ0EsU0FBUyxFQUFFLFNBQVMsTUFBTSxNQUFNLFFBQUEsQ0FBUyxDQUFDO0FBSTFDLGdDQUFBLENBQUEsVUFBQSxHQUNBLFNBQVMsRUFBRSxTQUFTLE1BQU0sTUFBTSxRQUFBLENBQVMsQ0FBQztBQU8xQyx1QkFBQSxDQUFBLFNBQVMsRUFBRSxTQUFTLEtBQUEsQ0FBTSxDQUFDO0FBWDVCLGlCQUFBLElBQUEsTUFBQSxxQkFBQSxFQUFBLE1BQUEsWUFBQSxNQUFBLFdBQUEsUUFBQSxPQUFBLFNBQUEsT0FBQSxRQUFBLEVBQUEsS0FBQSxDQUFBLFFBQUEsYUFBQSxLQUFBLEtBQUEsQ0FBQSxRQUFBLElBQWdCLFNBQU8sS0FBQSxDQUFBLEtBQUEsVUFBQTtBQUFBLFVBQVAsVUFBTztBQUFBLElBQUEsS0FBQSxVQUFBLFVBQUEsR0FBQSx1QkFBQSwwQkFBQTtBQUt2QixpQkFBQSxJQUFBLE1BQUEsMkJBQUEsRUFBQSxNQUFBLFlBQUEsTUFBQSxpQkFBQSxRQUFBLE9BQUEsU0FBQSxPQUFBLFFBQUEsRUFBQSxLQUFBLENBQUEsUUFBQSxtQkFBQSxLQUFBLEtBQUEsQ0FBQSxRQUFBLElBQWdCLGVBQWEsS0FBQSxDQUFBLEtBQUEsVUFBQTtBQUFBLFVBQWIsZ0JBQWE7QUFBQSxJQUFBLEtBQUEsVUFBQSxVQUFBLEdBQUEsNkJBQUEsZ0NBQUE7QUFNQSxpQkFBQSxJQUFBLE1BQUEsa0JBQUEsRUFBQSxNQUFBLFlBQUEsTUFBQSxRQUFBLFFBQUEsT0FBQSxTQUFBLE9BQUEsUUFBQSxFQUFBLEtBQUEsQ0FBQSxRQUFBLFVBQUEsS0FBQSxLQUFBLENBQUEsUUFBQSxJQUFnQixNQUFJLEtBQUEsQ0FBQSxLQUFBLFVBQUE7QUFBQSxVQUFKLE9BQUk7QUFBQSxJQUFBLEtBQUEsVUFBQSxVQUFBLEdBQUEsb0JBQUEsdUJBQUE7QUFqQm5ELGlCQUFBLE1BQUEsbUJBQUEsRUFBQSxPQUFBLFdBQUEsR0FBQSxrQkFBQSxFQUFBLE1BQUEsU0FBQSxNQUFBLFdBQUEsTUFBQSxVQUFBLFVBQUEsR0FBQSxNQUFBLHVCQUFBOzs7UUFDeUIsR0FBQSxTQUF5QixDQUFDLGlCQUFpQixLQUFLLEdBRG5FLGtCQUFBLFlBQUEsdUJBQUEsR0FBeUI7OzsifQ==

package/development/visual-checkbox.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './visual-checkbox/visual-checkbox.component.js';
+export * from './visual-checkbox/visual-checkbox.component.ts';
 //# sourceMappingURL=visual-checkbox.d.ts.map

package/dialog/dialog/dialog.component.d.ts

@@ -1,5 +1,5 @@
 import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-import { SbbOverlayBaseElement } from '../../overlay.js';
+import { SbbOverlayBaseElement } from '../../overlay.ts';
 /**
  * It displays an interactive overlay element.
  *

package/dialog/dialog-actions/dialog-actions.component.d.ts

@@ -1,5 +1,5 @@
 import { CSSResultGroup } from 'lit';
-import { SbbActionGroupElement } from '../../action-group.js';
+import { SbbActionGroupElement } from '../../action-group.ts';
 /**
  * Use this component to display a footer into an `sbb-dialog` with an action group.
  *

package/dialog/dialog-actions.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './dialog-actions/dialog-actions.component.js';
+export * from './dialog-actions/dialog-actions.component.ts';
 //# sourceMappingURL=dialog-actions.d.ts.map

package/dialog/dialog-close-button/dialog-close-button.component.d.ts

@@ -1,5 +1,5 @@
 import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-import { SbbSecondaryButtonElement } from '../../button/secondary-button.js';
+import { SbbSecondaryButtonElement } from '../../button/secondary-button.ts';
 /**
  * Dialog close button, intended to be placed inside sbb-dialog.
  *

package/dialog/dialog-close-button/dialog-close-button.component.js

@@ -4,10 +4,10 @@ import { SbbSecondaryButtonElement as i } from "../../button/secondary-button.js
 import { SbbLanguageController as m } from "../../core/controllers.js";
 import { i18nCloseDialog as u } from "../../core/i18n.js";
 import { css as d } from "lit";
-const p = d`:host{display:block;height:fit-content;grid-area:close-button;margin-inline:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);inset-inline-end:var(--sbb-spacing-fixed-4x);margin-block-start:calc(var(--sbb-dialog-padding-block) + .5 * (var(--sbb-typo-line-height-titles) * var(--_sbb-dialog-title-size, var(--sbb-font-size-title-4)) - var(--sbb-size-element-xs)))}`;
+const p = d`:host{display:block;height:fit-content;grid-area:close-button;margin-inline:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);inset-inline-end:var(--sbb-spacing-fixed-4x);margin-block-start:calc(var(--sbb-dialog-padding-block) + .5 * (var(--sbb-typo-line-height-heading) * var(--_sbb-dialog-title-size, var(--sbb-heading-font-size-4)) - var(--sbb-size-element-xs)))}`;
 let x = (() => {
   var t;
-  let n = [b("sbb-dialog-close-button")], s, r = [], e, l = i;
+  let n = [b("sbb-dialog-close-button")], r, s = [], e, l = i;
   return t = class extends l {
     constructor() {
       super(), this._languageController = new m(this), this.size = "s";
@@ -23,8 +23,8 @@ let x = (() => {
     }
   }, e = t, (() => {
     const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
-    o(null, s = { value: e }, n, { kind: "class", name: e.name, metadata: a }, null, r), e = s.value, a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
-  })(), t.styles = [i.styles, p], c(e, r), e;
+    o(null, r = { value: e }, n, { kind: "class", name: e.name, metadata: a }, null, s), e = r.value, a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), t.styles = [i.styles, p], c(e, s), e;
 })();
 export {
   x as SbbDialogCloseButtonElement

package/dialog/dialog-close-button.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './dialog-close-button/dialog-close-button.component.js';
+export * from './dialog-close-button/dialog-close-button.component.ts';
 //# sourceMappingURL=dialog-close-button.d.ts.map

package/dialog/dialog-content.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './dialog-content/dialog-content.component.js';
+export * from './dialog-content/dialog-content.component.ts';
 //# sourceMappingURL=dialog-content.d.ts.map

package/dialog/dialog-title/dialog-title.component.d.ts

@@ -1,6 +1,6 @@
 import { CSSResultGroup } from 'lit';
-import { SbbTitleBase } from '../../title.js';
-declare const SbbDialogTitleElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNegativeMixinType> & typeof SbbTitleBase;
+import { SbbTitleBase } from '../../title.ts';
+declare const SbbDialogTitleElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbNegativeMixinType> & typeof SbbTitleBase;
 /**
  * It displays a title inside a dialog header.
  *

package/dialog/dialog-title.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './dialog-title/dialog-title.component.js';
+export * from './dialog-title/dialog-title.component.ts';
 //# sourceMappingURL=dialog-title.d.ts.map

package/dialog/dialog.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './dialog/dialog.component.js';
+export * from './dialog/dialog.component.ts';
 //# sourceMappingURL=dialog.d.ts.map

package/dialog.d.ts

@@ -1,9 +1,9 @@
 /**
  * @entrypoint
  */
-export * from './dialog/dialog-actions.js';
-export * from './dialog/dialog-content.js';
-export * from './dialog/dialog-close-button.js';
-export * from './dialog/dialog-title.js';
-export * from './dialog/dialog.js';
+export * from './dialog/dialog-actions.ts';
+export * from './dialog/dialog-content.ts';
+export * from './dialog/dialog-close-button.ts';
+export * from './dialog/dialog-title.ts';
+export * from './dialog/dialog.ts';
 //# sourceMappingURL=dialog.d.ts.map

package/divider/divider.component.d.ts

@@ -1,6 +1,6 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
-import { SbbOrientation } from '../core/interfaces.js';
-declare const SbbDividerElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbElementInternalsMixinType> & typeof LitElement & import('../core/mixins.js').SbbElementInternalsConstructor;
+import { SbbOrientation } from '../core/interfaces.ts';
+declare const SbbDividerElement_base: import('../core/mixins.ts').AbstractConstructor<import('../core/mixins.ts').SbbNegativeMixinType> & import('../core/mixins.ts').AbstractConstructor<import('../core/mixins.ts').SbbElementInternalsMixinType> & typeof LitElement & import('../core/mixins.ts').SbbElementInternalsConstructor;
 /**
  * It displays a divider between sections.
  */

package/divider.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './divider/divider.component.js';
+export * from './divider/divider.component.ts';
 //# sourceMappingURL=divider.d.ts.map

package/expansion-panel/expansion-panel/expansion-panel.component.d.ts

@@ -1,6 +1,6 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
-import { SbbTitleLevel } from '../../title.js';
-declare const SbbExpansionPanelElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
+import { SbbTitleLevel } from '../../title.ts';
+declare const SbbExpansionPanelElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbHydrationMixinType> & typeof LitElement;
 /**
  * It displays an expandable summary-details widget.
  *

package/expansion-panel/expansion-panel-content/expansion-panel-content.component.d.ts

@@ -1,5 +1,5 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
-declare const SbbExpansionPanelContentElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbElementInternalsMixinType> & typeof LitElement & import('../../core/mixins.js').SbbElementInternalsConstructor;
+declare const SbbExpansionPanelContentElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbElementInternalsMixinType> & typeof LitElement & import('../../core/mixins.ts').SbbElementInternalsConstructor;
 /**
  * It can be used as a container for the content of the `sbb-expansion-panel` component.
  *

package/expansion-panel/expansion-panel-content.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './expansion-panel-content/expansion-panel-content.component.js';
+export * from './expansion-panel-content/expansion-panel-content.component.ts';
 //# sourceMappingURL=expansion-panel-content.d.ts.map

package/expansion-panel/expansion-panel-header/expansion-panel-header.component.d.ts

@@ -1,6 +1,6 @@
 import { CSSResultGroup, TemplateResult } from 'lit';
-import { SbbButtonBaseElement } from '../../core/base-elements.js';
-declare const SbbExpansionPanelHeaderElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType & import('../../core/mixins.js').SbbDisabledInteractiveMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof SbbButtonBaseElement;
+import { SbbButtonBaseElement } from '../../core/base-elements.ts';
+declare const SbbExpansionPanelHeaderElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbDisabledMixinType & import('../../core/mixins.ts').SbbDisabledInteractiveMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../icon.ts').SbbIconNameMixinType> & typeof SbbButtonBaseElement;
 /**
  * It acts as a native `summary` tag for the `sbb-expansion-panel` component.
  *

package/expansion-panel/expansion-panel-header/expansion-panel-header.component.js

@@ -6,7 +6,7 @@ import { SbbMediaMatcherController as m, SbbMediaQueryHover as b } from "../../c
 import { SbbDisabledTabIndexActionMixin as g } from "../../core/mixins.js";
 import { boxSizingStyles as u } from "../../core/styles.js";
 import { SbbIconNameMixin as f } from "../../icon.js";
-const _ = c`:host{display:block;--sbb-expansion-panel-header-cursor: var(--sbb-cursor-pointer);--sbb-expansion-panel-header-text-color: var(--sbb-color-2);--sbb-expansion-panel-header-gap: var(--sbb-spacing-fixed-6x);--sbb-expansion-panel-header-justify-content: space-between;--sbb-expansion-panel-header-padding-block: var(--sbb-spacing-responsive-xs);--sbb-expansion-panel-header-padding-inline: var(--sbb-spacing-fixed-6x)}@media(forced-colors:active){:host{--sbb-expansion-panel-header-text-color: ButtonText}}:host([data-size=s]){--sbb-expansion-panel-header-gap: var(--sbb-spacing-fixed-2x);--sbb-expansion-panel-header-padding-block: var(--sbb-spacing-fixed-3x);--sbb-expansion-panel-header-padding-inline: var(--sbb-spacing-fixed-5x)}:host(:is(:disabled,[disabled-interactive])){--sbb-expansion-panel-header-cursor: var(--sbb-cursor-default);--sbb-expansion-panel-header-text-color: var(--sbb-color-granite);--sbb-expansion-panel-header-text-color: light-dark( var(--sbb-color-granite), var(--sbb-color-storm) )}@media(forced-colors:active){:host(:is(:disabled,[disabled-interactive])){--sbb-expansion-panel-header-text-color: GrayText}}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-1x);border-radius:var(--sbb-expansion-panel-border-radius)}.sbb-expansion-panel-header{--sbb-text-font-size: var(--sbb-font-size-text-l);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;justify-content:var(--sbb-expansion-panel-header-justify-content);align-items:center;gap:var(--sbb-expansion-panel-header-gap);width:100%;padding:var(--sbb-expansion-panel-header-padding-block) var(--sbb-expansion-panel-header-padding-inline);text-align:start;cursor:var(--sbb-expansion-panel-header-cursor);color:var(--sbb-expansion-panel-header-text-color);-webkit-tap-highlight-color:transparent}.sbb-expansion-panel-header__title,.sbb-expansion-panel-header__toggle,.sbb-expansion-panel-header__icon{display:flex}.sbb-expansion-panel-header__icon{width:var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-width: var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-height: var(--sbb-expansion-panel-icon-size)}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-expansion-panel-header__icon{display:none}.sbb-expansion-panel-header__title{align-items:center;gap:var(--sbb-expansion-panel-title-gap);overflow:hidden;min-height:var(--sbb-size-icon-ui-medium)}.sbb-expansion-panel-header__toggle-icon{transition:transform var(--sbb-disable-animation-duration, var(--sbb-animation-duration-4x))}:host([aria-expanded]:not([aria-expanded=false])) .sbb-expansion-panel-header__toggle-icon{transform:rotate(-180deg)}`;
+const _ = c`:host{display:block;--sbb-expansion-panel-header-cursor: var(--sbb-cursor-pointer);--sbb-expansion-panel-header-text-color: var(--sbb-color-2);--sbb-expansion-panel-header-gap: var(--sbb-spacing-fixed-6x);--sbb-expansion-panel-header-justify-content: space-between;--sbb-expansion-panel-header-padding-block: var(--sbb-spacing-responsive-xs);--sbb-expansion-panel-header-padding-inline: var(--sbb-spacing-fixed-6x)}@media(forced-colors:active){:host{--sbb-expansion-panel-header-text-color: ButtonText}}:host([data-size=s]){--sbb-expansion-panel-header-gap: var(--sbb-spacing-fixed-2x);--sbb-expansion-panel-header-padding-block: var(--sbb-spacing-fixed-3x);--sbb-expansion-panel-header-padding-inline: var(--sbb-spacing-fixed-5x)}:host(:is(:disabled,[disabled-interactive])){--sbb-expansion-panel-header-cursor: var(--sbb-cursor-default);--sbb-expansion-panel-header-text-color: var(--sbb-color-granite);--sbb-expansion-panel-header-text-color: light-dark( var(--sbb-color-granite), var(--sbb-color-storm) )}@media(forced-colors:active){:host(:is(:disabled,[disabled-interactive])){--sbb-expansion-panel-header-text-color: GrayText}}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-1x);border-radius:var(--sbb-expansion-panel-border-radius)}.sbb-expansion-panel-header{--sbb-text-font-size: var(--sbb-text-font-size-l);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);display:flex;justify-content:var(--sbb-expansion-panel-header-justify-content);align-items:center;gap:var(--sbb-expansion-panel-header-gap);width:100%;padding:var(--sbb-expansion-panel-header-padding-block) var(--sbb-expansion-panel-header-padding-inline);text-align:start;cursor:var(--sbb-expansion-panel-header-cursor);color:var(--sbb-expansion-panel-header-text-color);-webkit-tap-highlight-color:transparent}.sbb-expansion-panel-header__title,.sbb-expansion-panel-header__toggle,.sbb-expansion-panel-header__icon{display:flex}.sbb-expansion-panel-header__icon{width:var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-width: var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-height: var(--sbb-expansion-panel-icon-size)}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-expansion-panel-header__icon{display:none}.sbb-expansion-panel-header__title{align-items:center;gap:var(--sbb-expansion-panel-title-gap);overflow:hidden;min-height:var(--sbb-size-icon-ui-medium)}.sbb-expansion-panel-header__toggle-icon{transition:transform var(--sbb-disable-animation-duration, var(--sbb-animation-duration-4x))}:host([aria-expanded]:not([aria-expanded=false])) .sbb-expansion-panel-header__toggle-icon{transform:rotate(-180deg)}`;
 let j = (() => {
   var e;
   let l = [x("sbb-expansion-panel-header")], n, t = [], s, i = g(f(v));

package/expansion-panel/expansion-panel-header.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './expansion-panel-header/expansion-panel-header.component.js';
+export * from './expansion-panel-header/expansion-panel-header.component.ts';
 //# sourceMappingURL=expansion-panel-header.d.ts.map

package/expansion-panel/expansion-panel.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './expansion-panel/expansion-panel.component.js';
+export * from './expansion-panel/expansion-panel.component.ts';
 //# sourceMappingURL=expansion-panel.d.ts.map

package/expansion-panel.d.ts

@@ -1,7 +1,7 @@
 /**
  * @entrypoint
  */
-export * from './expansion-panel/expansion-panel.js';
-export * from './expansion-panel/expansion-panel-content.js';
-export * from './expansion-panel/expansion-panel-header.js';
+export * from './expansion-panel/expansion-panel.ts';
+export * from './expansion-panel/expansion-panel-content.ts';
+export * from './expansion-panel/expansion-panel-header.ts';
 //# sourceMappingURL=expansion-panel.d.ts.map

package/file-selector/common/file-selector-common.d.ts

@@ -1,8 +1,8 @@
 import { LitElement, TemplateResult } from 'lit';
-import { SbbSecondaryButtonStaticElement } from '../../button.js';
-import { SbbLanguageController } from '../../core/controllers.js';
-import { Constructor, FormRestoreReason, FormRestoreState } from '../../core/mixins.js';
-declare const SbbFileSelectorCommonElementMixinType_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbFormAssociatedMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbElementInternalsMixinType> & typeof LitElement & import('../../core/mixins.js').SbbElementInternalsConstructor;
+import { SbbSecondaryButtonStaticElement } from '../../button.ts';
+import { SbbLanguageController } from '../../core/controllers.ts';
+import { Constructor, FormRestoreReason, FormRestoreState } from '../../core/mixins.ts';
+declare const SbbFileSelectorCommonElementMixinType_base: import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbDisabledMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbFormAssociatedMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbElementInternalsMixinType> & typeof LitElement & import('../../core/mixins.ts').SbbElementInternalsConstructor;
 export declare abstract class SbbFileSelectorCommonElementMixinType extends SbbFileSelectorCommonElementMixinType_base {
     accessor size: 's' | 'm';
     accessor multiple: boolean;

package/file-selector/common.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './common/file-selector-common.js';
+export * from './common/file-selector-common.ts';
 //# sourceMappingURL=common.d.ts.map

package/file-selector/common.js

@@ -1,5 +1,5 @@
 import { SbbFileSelectorCommonElementMixin as m } from "./common/file-selector-common.js";
-import { f as r } from "../file-selector-common-CUp299VH.js";
+import { f as r } from "../file-selector-common-DbYkpr-x.js";
 export {
   m as SbbFileSelectorCommonElementMixin,
   r as fileSelectorCommonStyle

package/file-selector/file-selector/file-selector.component.d.ts

@@ -1,9 +1,9 @@
 import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
-declare const SbbFileSelectorElement_base: import('../../core/mixins.js').Constructor<import('../common.js').SbbFileSelectorCommonElementMixinType> & typeof LitElement;
+declare const SbbFileSelectorElement_base: import('../../core/mixins.ts').Constructor<import('../common.ts').SbbFileSelectorCommonElementMixinType> & typeof LitElement;
 /**
  * It allows to select one or more file from storage devices and display them.
  *
- * @slot error - Use this to provide a `sbb-form-error` to show an error message.
+ * @slot error - Use this to provide a `sbb-error` to show an error message.
  */
 export declare class SbbFileSelectorElement extends SbbFileSelectorElement_base {
     static styles: CSSResultGroup;

package/file-selector/file-selector-dropzone/file-selector-dropzone.component.d.ts

@@ -1,9 +1,9 @@
 import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
-declare const SbbFileSelectorDropzoneElement_base: import('../../core/mixins.js').Constructor<import('../common.js').SbbFileSelectorCommonElementMixinType> & typeof LitElement;
+declare const SbbFileSelectorDropzoneElement_base: import('../../core/mixins.ts').Constructor<import('../common.ts').SbbFileSelectorCommonElementMixinType> & typeof LitElement;
 /**
  * It allows to select one or more file from storage devices via button click or drag and drop, and display them.
  *
- * @slot error - Use this to provide a `sbb-form-error` to show an error message.
+ * @slot error - Use this to provide a `sbb-error` to show an error message.
  */
 export declare class SbbFileSelectorDropzoneElement extends SbbFileSelectorDropzoneElement_base {
     static styles: CSSResultGroup;

package/file-selector/file-selector-dropzone/file-selector-dropzone.component.js

@@ -1,10 +1,10 @@
-var f = (e) => {
+var m = (e) => {
   throw TypeError(e);
 };
-var d = (e, t, i) => t.has(e) || f("Cannot " + i);
-var u = (e, t, i) => (d(e, t, "read from private field"), i ? i.call(e) : t.get(e)), g = (e, t, i) => t.has(e) ? f("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), h = (e, t, i, s) => (d(e, t, "write to private field"), s ? s.call(e, i) : t.set(e, i), i);
+var d = (e, t, i) => t.has(e) || m("Cannot " + i);
+var u = (e, t, i) => (d(e, t, "read from private field"), i ? i.call(e) : t.get(e)), h = (e, t, i) => t.has(e) ? m("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), g = (e, t, i, s) => (d(e, t, "write to private field"), s ? s.call(e, i) : t.set(e, i), i);
 import { __esDecorate as _, __runInitializers as n } from "tslib";
-import { css as y, LitElement as z } from "lit";
+import { css as z, LitElement as y } from "lit";
 import { customElement as x, property as S } from "lit/decorators.js";
 import { ref as C } from "lit/directives/ref.js";
 import { html as k } from "lit/static-html.js";
@@ -14,14 +14,14 @@ import { boxSizingStyles as w } from "../../core/styles.js";
 import { SbbFileSelectorCommonElementMixin as F, fileSelectorCommonStyle as L } from "../common.js";
 import "../../button/secondary-button-static.js";
 import "../../icon.js";
-const I = y`.sbb-file-selector__dropzone-area{display:flex;flex-direction:column;align-items:center;padding:var(--sbb-spacing-responsive-s);background-color:var(--sbb-file-selector-background-color);border:var(--sbb-border-width-1x) dashed var(--sbb-file-selector-border-color);border-radius:var(--sbb-border-radius-4x);transition-duration:var(--sbb-file-selector-transition-duration);transition-timing-function:var(--sbb-file-selector-transition-easing-function);transition-property:background-color,border-color}.sbb-file-selector__dropzone-area--icon{color:var(--sbb-file-selector-color);line-height:0}.sbb-file-selector__dropzone-area--title{--sbb-title-font-size: var(--sbb-title-font-size-level-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);margin-block:var(--sbb-title-margin-block-start, 0) var(--sbb-title-margin-block-end, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-titles));letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);text-align:center;color:var(--sbb-file-selector-color)}.sbb-file-selector__dropzone-area--subtitle{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);text-align:center;color:var(--sbb-file-selector-subtitle-color);margin-block-end:var(--sbb-spacing-fixed-4x)}`;
+const I = z`.sbb-file-selector__dropzone-area{display:flex;flex-direction:column;align-items:center;padding:var(--sbb-spacing-responsive-s);background-color:var(--sbb-file-selector-background-color);border:var(--sbb-border-width-1x) dashed var(--sbb-file-selector-border-color);border-radius:var(--sbb-border-radius-4x);transition-duration:var(--sbb-file-selector-transition-duration);transition-timing-function:var(--sbb-file-selector-transition-easing-function);transition-property:background-color,border-color}.sbb-file-selector__dropzone-area--icon{color:var(--sbb-file-selector-color);line-height:0}.sbb-file-selector__dropzone-area--title{--sbb-title-font-size: var(--sbb-title-font-size-level-6-lean, var(--sbb-heading-font-size-6));--sbb-title-line-height: var(--sbb-typo-line-height-text);margin-block:var(--sbb-title-margin-block, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));letter-spacing:var(--sbb-typo-letter-spacing-heading);font-size:var(--sbb-title-font-size);text-align:center;color:var(--sbb-file-selector-color)}.sbb-file-selector__dropzone-area--subtitle{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);text-align:center;color:var(--sbb-file-selector-subtitle-color);margin-block-end:var(--sbb-spacing-fixed-4x)}`;
 let Q = (() => {
   var a, o;
-  let e = [x("sbb-file-selector-dropzone")], t, i = [], s, b = F(z), c, m = [], p = [];
+  let e = [x("sbb-file-selector-dropzone")], t, i = [], s, b = F(y), c, f = [], p = [];
   return o = class extends b {
     constructor() {
       super(...arguments);
-      g(this, a, n(this, m, ""));
+      h(this, a, n(this, f, ""));
       n(this, p);
     }
     /** The title displayed in `dropzone` variant. */
@@ -29,7 +29,7 @@ let Q = (() => {
       return u(this, a);
     }
     set titleContent(r) {
-      h(this, a, r);
+      g(this, a, r);
     }
     renderTemplate(r) {
       return k`
@@ -64,7 +64,7 @@ let Q = (() => {
     const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
     c = [$(), S({ attribute: "title-content" })], _(o, null, c, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (l) => "titleContent" in l, get: (l) => l.titleContent, set: (l, v) => {
       l.titleContent = v;
-    } }, metadata: r }, m, p), _(null, t = { value: s }, e, { kind: "class", name: s.name, metadata: r }, null, i), s = t.value, r && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+    } }, metadata: r }, f, p), _(null, t = { value: s }, e, { kind: "class", name: s.name, metadata: r }, null, i), s = t.value, r && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
   })(), o.styles = [w, L, I], o.events = {
     filechanged: "filechanged"
   }, n(s, i), s;

package/file-selector/file-selector-dropzone.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './file-selector-dropzone/file-selector-dropzone.component.js';
+export * from './file-selector-dropzone/file-selector-dropzone.component.ts';
 //# sourceMappingURL=file-selector-dropzone.d.ts.map

package/file-selector/file-selector.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './file-selector/file-selector.component.js';
+export * from './file-selector/file-selector.component.ts';
 //# sourceMappingURL=file-selector.d.ts.map

package/{file-selector-common-CUp299VH.js → file-selector-common-DbYkpr-x.js}

@@ -1,5 +1,5 @@
 import { css as e } from "lit";
-const r = e`:host{--sbb-file-selector-color: var(--sbb-color-2);--sbb-file-selector-subtitle-color: var(--sbb-color-granite);--sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-file-selector-background-color: var(--sbb-background-color-1);--sbb-file-selector-border-color: var(--sbb-border-color-4-inverted);--sbb-file-selector-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);display:block;width:20rem}@media(forced-colors:active){:host(:disabled){--sbb-file-selector-color: GrayText;--sbb-file-selector-subtitle-color: GrayText;--sbb-file-selector-border-color: GrayText}}:host(:is(:state(active),[state--active])){--sbb-file-selector-background-color: var(--sbb-background-color-3);--sbb-file-selector-border-color: var(--sbb-color-storm);--sbb-file-selector-border-color: light-dark(var(--sbb-color-storm), var(--sbb-color-anthracite))}@media(forced-colors:active){:host(:is(:state(active),[state--active])){--sbb-file-selector-border-color: Highlight}}.sbb-file-selector__input-container{-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column}.sbb-file-selector__visually-hidden{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-file-selector__file-list{display:flex;flex-direction:column;row-gap:var(--sbb-spacing-fixed-3x);margin-block:0;padding-inline:0;padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x)}.sbb-file-selector__file{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;gap:var(--sbb-spacing-fixed-4x);align-items:center;justify-content:space-between}.sbb-file-selector__file-details{display:flex;flex:1;justify-content:space-between;gap:var(--sbb-spacing-fixed-4x);overflow:auto}.sbb-file-selector__file-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-file-selector__file-size{white-space:nowrap;color:var(--sbb-color-metal);color:light-dark(var(--sbb-color-metal),var(--sbb-color-smoke))}:host(:not(:is(:state(slotted-error),[state--slotted-error]))) .sbb-file-selector__error{display:none}`;
+const r = e`:host{--sbb-file-selector-color: var(--sbb-color-2);--sbb-file-selector-subtitle-color: var(--sbb-color-granite);--sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-file-selector-background-color: var(--sbb-background-color-1);--sbb-file-selector-border-color: var(--sbb-border-color-4-inverted);--sbb-file-selector-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);display:block;width:20rem}@media(forced-colors:active){:host(:disabled){--sbb-file-selector-color: GrayText;--sbb-file-selector-subtitle-color: GrayText;--sbb-file-selector-border-color: GrayText}}:host(:is(:state(active),[state--active])){--sbb-file-selector-background-color: var(--sbb-background-color-3);--sbb-file-selector-border-color: var(--sbb-color-storm);--sbb-file-selector-border-color: light-dark(var(--sbb-color-storm), var(--sbb-color-anthracite))}@media(forced-colors:active){:host(:is(:state(active),[state--active])){--sbb-file-selector-border-color: Highlight}}.sbb-file-selector__input-container{-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column}.sbb-file-selector__visually-hidden{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-file-selector__file-list{display:flex;flex-direction:column;row-gap:var(--sbb-spacing-fixed-3x);margin-block:0;padding-inline:0;padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x)}.sbb-file-selector__file{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);display:flex;gap:var(--sbb-spacing-fixed-4x);align-items:center;justify-content:space-between}.sbb-file-selector__file-details{display:flex;flex:1;justify-content:space-between;gap:var(--sbb-spacing-fixed-4x);overflow:auto}.sbb-file-selector__file-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-file-selector__file-size{white-space:nowrap;color:var(--sbb-color-metal);color:light-dark(var(--sbb-color-metal),var(--sbb-color-smoke))}:host(:not(:is(:state(slotted-error),[state--slotted-error]))) .sbb-file-selector__error{display:none}`;
 export {
   r as f
 };

package/file-selector.d.ts

@@ -1,7 +1,7 @@
 /**
  * @entrypoint
  */
-export * from './file-selector/common.js';
-export * from './file-selector/file-selector-dropzone.js';
-export * from './file-selector/file-selector.js';
+export * from './file-selector/common.ts';
+export * from './file-selector/file-selector-dropzone.ts';
+export * from './file-selector/file-selector.ts';
 //# sourceMappingURL=file-selector.d.ts.map