@scania/tegel 1.33.0 → 1.34.0-design.tokens.beta.test.0

package/dist/collection/components/datetime/datetime.css

@@ -1,20 +1,14 @@
-.tds-datetime-input[type=datetime-local] ~ .icon-time,
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
+.tds-datetime-input[type=datetime-local] ~ .icon-time, .tds-datetime-input[type=date] ~ .icon-time, .tds-datetime-input[type=month] ~ .icon-time, .tds-datetime-input[type=week] ~ .icon-time,
 .tds-datetime-input-md[type=datetime-local] ~ .icon-time,
-.tds-datetime-input-sm[type=datetime-local] ~ .icon-time {
-  display: none;
-}
-.tds-datetime-input[type=date] ~ .icon-time,
 .tds-datetime-input-md[type=date] ~ .icon-time,
-.tds-datetime-input-sm[type=date] ~ .icon-time {
-  display: none;
-}
-.tds-datetime-input[type=month] ~ .icon-time,
 .tds-datetime-input-md[type=month] ~ .icon-time,
-.tds-datetime-input-sm[type=month] ~ .icon-time {
-  display: none;
-}
-.tds-datetime-input[type=week] ~ .icon-time,
 .tds-datetime-input-md[type=week] ~ .icon-time,
+.tds-datetime-input-sm[type=datetime-local] ~ .icon-time,
+.tds-datetime-input-sm[type=date] ~ .icon-time,
+.tds-datetime-input-sm[type=month] ~ .icon-time,
 .tds-datetime-input-sm[type=week] ~ .icon-time {
   display: none;
 }
@@ -26,17 +20,21 @@
 
 .tds-datetime-input {
   box-sizing: border-box;
-  border-radius: 4px 4px 0 0;
+  border-radius: var(--datetime-border-radius);
   width: 100%;
   box-sizing: border-box;
   margin: 0;
   border: none;
   outline: none;
   height: 100%;
-  color: var(--tds-datetime-color);
-  background-color: var(--tds-datetime-background);
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--datetime-text);
+  background-color: var(--datetime-background);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
   padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
 }
 .tds-datetime-input * {
@@ -44,109 +42,46 @@
 }
 .tds-datetime-input::placeholder {
   opacity: 1;
-  color: var(--tds-datetime-placeholder);
+  color: var(--datetime-placeholder);
 }
 .tds-datetime-input:focus::placeholder {
-  color: var(--tds-datetime-placeholder-color-focus);
+  color: var(--datetime-placeholder-focus);
 }
 .tds-datetime-input:disabled {
-  background-color: var(--tds-datetime-background-disabled);
-  color: var(--tds-datetime-color-disabled);
+  background-color: var(--datetime-background-disabled);
+  color: var(--datetime-text-disabled);
   cursor: not-allowed;
 }
 .tds-datetime-input:disabled::placeholder {
-  color: var(--tds-datetime-placeholder-disabled);
+  color: var(--datetime-placeholder-disabled);
 }
 .tds-datetime-input:disabled ~ .tds-datetime-label-inside {
-  color: var(--tds-datetime-label-disabled);
-}
-
-.tds-datetime-input-md {
-  box-sizing: border-box;
-  border-radius: 4px 4px 0 0;
-  width: 100%;
-  box-sizing: border-box;
-  margin: 0;
-  border: none;
-  outline: none;
-  height: 100%;
-  color: var(--tds-datetime-color);
-  background-color: var(--tds-datetime-background);
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  padding: var(--tds-spacing-element-16);
-}
-.tds-datetime-input-md * {
-  box-sizing: border-box;
-}
-.tds-datetime-input-md::placeholder {
-  opacity: 1;
-  color: var(--tds-datetime-placeholder);
-}
-.tds-datetime-input-md:focus::placeholder {
-  color: var(--tds-datetime-placeholder-color-focus);
-}
-.tds-datetime-input-md:disabled {
-  background-color: var(--tds-datetime-background-disabled);
-  color: var(--tds-datetime-color-disabled);
-  cursor: not-allowed;
-}
-.tds-datetime-input-md:disabled::placeholder {
-  color: var(--tds-datetime-placeholder-disabled);
-}
-.tds-datetime-input-md:disabled ~ .tds-datetime-label-inside {
-  color: var(--tds-datetime-label-disabled);
+  color: var(--datetime-label-disabled);
 }
 
+.tds-datetime-input-md,
 .tds-datetime-input-sm {
-  box-sizing: border-box;
-  border-radius: 4px 4px 0 0;
-  width: 100%;
-  box-sizing: border-box;
-  margin: 0;
-  border: none;
-  outline: none;
-  height: 100%;
-  color: var(--tds-datetime-color);
-  background-color: var(--tds-datetime-background);
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
   padding: var(--tds-spacing-element-16);
 }
-.tds-datetime-input-sm * {
-  box-sizing: border-box;
-}
-.tds-datetime-input-sm::placeholder {
-  opacity: 1;
-  color: var(--tds-datetime-placeholder);
-}
-.tds-datetime-input-sm:focus::placeholder {
-  color: var(--tds-datetime-placeholder-color-focus);
-}
-.tds-datetime-input-sm:disabled {
-  background-color: var(--tds-datetime-background-disabled);
-  color: var(--tds-datetime-color-disabled);
-  cursor: not-allowed;
-}
-.tds-datetime-input-sm:disabled::placeholder {
-  color: var(--tds-datetime-placeholder-disabled);
-}
-.tds-datetime-input-sm:disabled ~ .tds-datetime-label-inside {
-  color: var(--tds-datetime-label-disabled);
-}
 
 .tds-datetime-container {
-  border-radius: 4px 4px 0 0;
+  border-radius: var(--datetime-border-radius);
   display: flex;
   position: relative;
   height: 56px;
   box-sizing: border-box;
-  background-color: var(--tds-datetime-background);
-  border-bottom: 1px solid var(--tds-datetime-border-bottom);
+  background-color: var(--datetime-background);
   transition: border-bottom-color 200ms ease;
+  border-left: 1px solid var(--datetime-border-color-left);
+  border-right: 1px solid var(--datetime-border-color-right);
+  border-bottom: 1px solid var(--datetime-border-color-bottom);
+  border-top: 1px solid var(--datetime-border-color-top);
 }
 .tds-datetime-container:hover {
-  border-bottom-color: var(--tds-datetime-border-bottom-hover);
+  border-left: 1px solid var(--datetime-border-color-left-hover);
+  border-right: 1px solid var(--datetime-border-color-right-hover);
+  border-bottom: 1px solid var(--datetime-border-color-bottom-hover);
+  border-top: 1px solid var(--datetime-border-color-top-hover);
 }
 .tds-form-datetime-md .tds-datetime-container {
   height: 48px;
@@ -167,23 +102,31 @@
   transform: translateY(-50%);
   right: 18px;
   pointer-events: none;
-  color: var(--tds-datetime-icon);
+  color: var(--datetime-icon);
 }
 
 .tds-datetime-label {
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
   display: block;
   margin-bottom: var(--tds-spacing-element-8);
-  color: var(--tds-datetime-label-color);
+  color: var(--datetime-label);
 }
 
 .tds-datetime-label-inside {
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
   position: absolute;
   pointer-events: none;
-  color: var(--tds-datetime-label-inside-color);
+  color: var(--datetime-label-inside);
   left: 16px;
 }
 .tds-datetime-label-inside.iphone {
@@ -199,6 +142,17 @@
   min-width: auto;
 }
 
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input ~ .tds-datetime-label-inside,
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ~ .tds-datetime-label-inside,
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm ~ .tds-datetime-label-inside {
+  font-family: var(--detail-07-font-family);
+  font-size: var(--detail-07-font-size);
+  line-height: var(--detail-07-line-height);
+  font-weight: var(--detail-07-font-weight);
+  letter-spacing: var(--detail-07-letter-spacing);
+  text-transform: var(--detail-07-text-transform);
+  transition: 0.1s ease all;
+}
 .tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input {
   padding-top: var(--tds-spacing-element-24);
   padding-bottom: 15px;
@@ -206,68 +160,22 @@
 .tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input ~ .tds-datetime-label-inside {
   top: 20px;
 }
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input::placeholder {
-  color: transparent;
-}
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input ::placeholder {
-  color: transparent;
-}
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input:focus::placeholder {
-  transition: color 0.35s ease;
-  color: var(--tds-datetime-placeholder-color-focus);
-}
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md {
-  padding-top: var(--tds-spacing-element-20);
-  padding-bottom: 11px;
-}
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ~ .tds-datetime-label-inside {
-  top: 16px;
-}
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md::placeholder {
-  color: transparent;
-}
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ::placeholder {
-  color: transparent;
-}
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md:focus::placeholder {
-  transition: color 0.35s ease;
-  color: var(--tds-datetime-placeholder-color-focus);
-}
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md,
 .tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm {
   padding-top: var(--tds-spacing-element-20);
   padding-bottom: 11px;
 }
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ~ .tds-datetime-label-inside,
 .tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm ~ .tds-datetime-label-inside {
   top: 16px;
 }
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm::placeholder {
-  color: transparent;
-}
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm ::placeholder {
-  color: transparent;
-}
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm:focus::placeholder {
-  transition: color 0.35s ease;
-  color: var(--tds-datetime-placeholder-color-focus);
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input ~ .tds-datetime-label-inside {
+  top: 12px;
 }
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ~ .tds-datetime-label-inside,
 .tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm ~ .tds-datetime-label-inside {
-  font: var(--tds-detail-07);
-  letter-spacing: var(--tds-detail-07-ls);
-  transition: 0.1s ease all;
   top: 8px;
 }
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ~ .tds-datetime-label-inside {
-  font: var(--tds-detail-07);
-  letter-spacing: var(--tds-detail-07-ls);
-  transition: 0.1s ease all;
-  top: 8px;
-}
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input ~ .tds-datetime-label-inside {
-  font: var(--tds-detail-07);
-  letter-spacing: var(--tds-detail-07-ls);
-  transition: 0.1s ease all;
-  top: 12px;
-}
 
 .tds-datetime-bar {
   position: absolute;
@@ -276,11 +184,11 @@
 .tds-datetime-bar::before, .tds-datetime-bar::after {
   content: "";
   height: 2px;
-  top: 54px;
   width: 0;
   position: absolute;
-  background: var(--tds-datetime-bar);
+  background: var(--datetime-highlight);
   transition: 0.35s ease all;
+  top: 54px;
 }
 .tds-form-datetime-md .tds-datetime-bar::before, .tds-form-datetime-md .tds-datetime-bar::after {
   top: 46px;
@@ -299,12 +207,16 @@
 }
 
 .tds-datetime-helper {
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
   display: block;
   flex-basis: 100%;
   padding-top: var(--tds-spacing-element-4);
-  color: var(--tds-datetime-helper);
+  color: var(--datetime-helper);
 }
 .tds-datetime-helper .tds-helper {
   display: inline-flex;
@@ -312,69 +224,54 @@
 }
 
 .tds-form-datetime-disabled .tds-datetime-container {
-  border-bottom-color: transparent;
+  cursor: not-allowed;
+  border-color: transparent;
 }
 .tds-form-datetime-disabled .datetime-icon tds-icon {
-  color: var(--tds-datetime-icon-disabled);
+  color: var(--datetime-icon-disabled);
 }
 .tds-form-datetime-disabled .tds-datetime-label {
-  color: var(--tds-datetime-label-disabled);
+  color: var(--datetime-label-disabled);
   cursor: not-allowed;
 }
 
 .tds-form-datetime-success .tds-datetime-container {
-  border-bottom-color: var(--tds-datetime-border-bottom-success);
+  border-left: 1px solid var(--datetime-border-color-left-success);
+  border-right: 1px solid var(--datetime-border-color-right-success);
+  border-bottom: 1px solid var(--datetime-border-color-bottom-success);
+  border-top: 1px solid var(--datetime-border-color-top-success);
   color: var(--tds-datetime-color-success);
 }
-.tds-form-datetime-success .tds-datetime-bar::before, .tds-form-datetime-success .tds-datetime-bar::after {
+.tds-form-datetime-success .tds-datetime-bar::before,
+.tds-form-datetime-success .tds-datetime-bar::after {
   background: var(--tds-datetime-bar-sucess);
 }
 
 .tds-form-datetime-error .tds-datetime-helper {
-  color: var(--tds-datetime-helper-error);
+  color: var(--datetime-helper-error);
 }
 .tds-form-datetime-error .tds-datetime-container {
-  border-bottom-color: var(--tds-datetime-border-bottom-error);
+  border-left: 1px solid var(--datetime-border-color-left-error);
+  border-right: 1px solid var(--datetime-border-color-right-error);
+  border-bottom: 1px solid var(--datetime-border-color-bottom-error);
+  border-top: 1px solid var(--datetime-border-color-top-error);
 }
-.tds-form-datetime-error .tds-datetime-bar::before, .tds-form-datetime-error .tds-datetime-bar::after {
-  background: var(--tds-datetime-bar-error);
+.tds-form-datetime-error .tds-datetime-bar::before,
+.tds-form-datetime-error .tds-datetime-bar::after {
+  background: var(--datetime-highlight-error);
 }
 .tds-form-datetime-error .datetime-icon tds-icon {
-  color: var(--tds-datetime-icon-error);
-}
-
-.tds-datetime-textcounter {
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
-  color: var(--tds-datetime-textcounter);
-  float: right;
-}
-.tds-datetime-textcounter .tds-datetime-textcounter-divider {
-  letter-spacing: var(--tds-detail-05-ls);
-  color: var(--tds-datetime-textcounter-divider);
+  color: var(--datetime-icon-error);
 }
 
 /* Datetime picker icon remove testing */
-input[type=datetime-local]::-webkit-inner-spin-button,
-input[type=datetime-local]::-webkit-calendar-picker-indicator {
-  opacity: 0;
-}
-
+input[type=datetime-local]::-webkit-inner-spin-button, input[type=datetime-local]::-webkit-calendar-picker-indicator,
 input[type=date]::-webkit-inner-spin-button,
-input[type=date]::-webkit-calendar-picker-indicator {
-  opacity: 0;
-}
-
+input[type=date]::-webkit-calendar-picker-indicator,
 input[type=month]::-webkit-inner-spin-button,
-input[type=month]::-webkit-calendar-picker-indicator {
-  opacity: 0;
-}
-
+input[type=month]::-webkit-calendar-picker-indicator,
 input[type=week]::-webkit-inner-spin-button,
-input[type=week]::-webkit-calendar-picker-indicator {
-  opacity: 0;
-}
-
+input[type=week]::-webkit-calendar-picker-indicator,
 input[type=time]::-webkit-inner-spin-button,
 input[type=time]::-webkit-calendar-picker-indicator {
   opacity: 0;
@@ -385,4 +282,12 @@ input[type=time]::-webkit-calendar-picker-indicator {
   .type-date .icon-datetime-local {
     display: none;
   }
+}
+.tds-form-datetime.tds-datetime-focus .tds-datetime-container {
+  border-left: 1px solid var(--datetime-border-color-left-focus);
+  border-right: 1px solid var(--datetime-border-color-right-focus);
+  border-bottom: 1px solid var(--datetime-border-color-bottom-focus);
+  border-top: 1px solid var(--datetime-border-color-top-focus);
+  outline: 2px solid var(--datetime-outline-color-focus);
+  outline-offset: -1px;
 }

package/dist/collection/components/divider/divider.css

@@ -1,16 +1,15 @@
 .divider {
   box-sizing: border-box;
+  background-color: var(--divider-color);
 }
 .divider * {
   box-sizing: border-box;
 }
 .divider.horizontal {
-  background-color: var(--tds-divider-background);
   width: 100%;
   height: 1px;
 }
 .divider.vertical {
-  background-color: var(--tds-divider-background);
   height: 100%;
   width: 1px;
 }

package/dist/collection/components/divider/divider.js

@@ -2,9 +2,19 @@ import { Host, h } from "@stencil/core";
 export class Divider {
     constructor() {
         this.orientation = 'horizontal';
+        this.variant = 'subtle';
     }
     render() {
-        return (h(Host, { key: '9676096f5ae3067235127e360e7f2ab1ba71563d', role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { key: 'cbf3199000a5b1d31ca6e9a4c0a7a21ae3ada1cf', class: `divider ${this.orientation}` })));
+        return (h(Host, { key: 'fb332ff6d8b15e2451266bb9051113819ac770ab', role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { key: 'a0a6e9037f259f3d4ecff62744a8b31875241901', class: {
+                'divider': true,
+                'vertical': this.orientation === 'vertical',
+                'horizontal': this.orientation === 'horizontal',
+                'discrete': this.variant === 'discrete',
+                'subtle': this.variant === 'subtle',
+                'soft': this.variant === 'soft',
+                'defined': this.variant === 'defined',
+                'dark-blue': this.variant === 'dark-blue',
+            } })));
     }
     static get is() { return "tds-divider"; }
     static get encapsulation() { return "shadow"; }
@@ -37,6 +47,24 @@ export class Divider {
                 "attribute": "orientation",
                 "reflect": false,
                 "defaultValue": "'horizontal'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'discrete' | 'subtle' | 'soft' | 'defined' | 'dark-blue'",
+                    "resolved": "\"dark-blue\" | \"defined\" | \"discrete\" | \"soft\" | \"subtle\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant of the Divider, subtle if not specified."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'subtle'"
             }
         };
     }

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.css

@@ -1,28 +1,33 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   box-sizing: border-box;
   display: block;
-  background-color: var(--tds-dropdown-option-background);
+  background-color: var(--dropdown-option-background);
 }
 :host * {
   box-sizing: border-box;
 }
 :host .dropdown-option {
-  color: var(--tds-dropdown-option-color);
-  border-bottom: 1px solid var(--tds-dropdown-option-border);
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  color: var(--dropdown-text);
+  border-bottom: 1px solid var(--dropdown-option-border);
   overflow-wrap: anywhere;
   transition: background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
 }
 :host .dropdown-option.selected {
-  background-color: var(--tds-dropdown-option-background-selected);
-}
-:host .dropdown-option.disabled {
-  color: var(--tds-dropdown-option-color-disabled);
+  background-color: var(--dropdown-option-background-selected);
 }
 :host .dropdown-option button:focus {
-  outline: 2px solid var(--tds-dropdown-option-focus);
-  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
+  outline-offset: 1px;
   outline-offset: -2px;
 }
 :host .dropdown-option button {
@@ -69,11 +74,11 @@
   padding: 7px 16px 8px;
 }
 :host .dropdown-option:hover {
-  border-bottom-color: var(--tds-dropdown-option-border-hover);
+  background-color: var(--dropdown-option-background-hover);
   cursor: pointer;
 }
 :host .dropdown-option:hover.disabled {
-  border-bottom-color: var(--tds-dropdown-option-border-hover);
+  background-color: var(--dropdown-option-background);
   cursor: not-allowed;
 }
 

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js

@@ -82,11 +82,11 @@ export class TdsDropdownOption {
     }
     connectedCallback() {
         if (!this.tdsAriaLabel && !this.multiselect) {
-            console.warn('Tegel Dropdown component: tdsAriaLabel prop is missing');
+            console.warn('Tegel Dropdown option component: tdsAriaLabel prop is missing');
         }
     }
     render() {
-        return (h(Host, { key: 'dd7f679d0a2c4970af173966e43109192eddbf66' }, h("div", { key: '97c7da4773c735874a9c338adc88cc2500a0c800', class: `dropdown-option 
+        return (h(Host, { key: '52827112a3060a8858978c3e65c284358f923539' }, h("div", { key: 'edf5262e5dbbfadf34ff6faa164e58b7fec1e561', class: `dropdown-option
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}