@scania/tegel 1.38.0 → 1.40.0-stencil-core-4.38.1-beta.0

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

@@ -1,3 +1,10 @@
+@supports selector(input::-webkit-datetime-edit) {
+  .tds-datetime-input:not(:focus)::-webkit-datetime-edit,
+  .tds-datetime-input-md:not(:focus)::-webkit-datetime-edit,
+  .tds-datetime-input-sm:not(:focus)::-webkit-datetime-edit {
+    color: var(--tds-datetime-placeholder-color);
+  }
+}
 .tds-datetime-input[type=datetime-local] ~ .icon-time,
 .tds-datetime-input-md[type=datetime-local] ~ .icon-time,
 .tds-datetime-input-sm[type=datetime-local] ~ .icon-time {
@@ -42,21 +49,11 @@
 .tds-datetime-input * {
   box-sizing: border-box;
 }
-.tds-datetime-input::placeholder {
-  opacity: 1;
-  color: var(--tds-datetime-placeholder);
-}
-.tds-datetime-input:focus::placeholder {
-  color: var(--tds-datetime-placeholder-color-focus);
-}
 .tds-datetime-input:disabled {
   background-color: var(--tds-datetime-background-disabled);
   color: var(--tds-datetime-color-disabled);
   cursor: not-allowed;
 }
-.tds-datetime-input:disabled::placeholder {
-  color: var(--tds-datetime-placeholder-disabled);
-}
 .tds-datetime-input:disabled ~ .tds-datetime-label-inside {
   color: var(--tds-datetime-label-disabled);
 }
@@ -79,21 +76,11 @@
 .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);
 }
@@ -116,21 +103,11 @@
 .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);
 }
@@ -206,16 +183,6 @@
 .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;
@@ -223,16 +190,6 @@
 .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-sm {
   padding-top: var(--tds-spacing-element-20);
   padding-bottom: 11px;
@@ -240,16 +197,6 @@
 .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-sm ~ .tds-datetime-label-inside {
   font: var(--tds-detail-07);
   letter-spacing: var(--tds-detail-07-ls);
@@ -269,33 +216,17 @@
   top: 12px;
 }
 
-.tds-datetime-bar {
-  position: absolute;
-  width: 100%;
-}
-.tds-datetime-bar::before, .tds-datetime-bar::after {
-  content: "";
-  height: 2px;
-  top: 54px;
-  width: 0;
-  position: absolute;
-  background: var(--tds-datetime-bar);
-  transition: 0.35s ease all;
-}
-.tds-form-datetime-md .tds-datetime-bar::before, .tds-form-datetime-md .tds-datetime-bar::after {
-  top: 46px;
-}
-.tds-form-datetime-sm .tds-datetime-bar::before, .tds-form-datetime-sm .tds-datetime-bar::after {
-  top: 40px;
-}
-.tds-datetime-bar::before {
-  left: 50%;
-}
-.tds-datetime-bar::after {
-  right: 50%;
-}
-.tds-datetime-focus .tds-datetime-bar::before, .tds-datetime-focus .tds-datetime-bar::after {
-  width: 50%;
+.tds-datetime-focus .tds-datetime-input,
+.tds-datetime-focus .tds-datetime-input-md,
+.tds-datetime-focus .tds-datetime-input-sm {
+  border-radius: 0;
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline-offset: -2px;
+  z-index: 1;
+}
+.tds-datetime-focus .tds-datetime-container {
+  border-bottom: none;
 }
 
 .tds-datetime-helper {
@@ -321,14 +252,14 @@
   color: var(--tds-datetime-label-disabled);
   cursor: not-allowed;
 }
+.tds-form-datetime-disabled .tds-datetime-helper {
+  color: var(--tds-datetime-helper-disabled);
+}
 
 .tds-form-datetime-success .tds-datetime-container {
   border-bottom-color: var(--tds-datetime-border-bottom-success);
   color: var(--tds-datetime-color-success);
 }
-.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);
@@ -336,12 +267,6 @@
 .tds-form-datetime-error .tds-datetime-container {
   border-bottom-color: var(--tds-datetime-border-bottom-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 .datetime-icon tds-icon {
-  color: var(--tds-datetime-icon-error);
-}
 
 .tds-datetime-textcounter {
   font: var(--tds-detail-05);

package/dist/collection/components/datetime/datetime.js

@@ -2,6 +2,30 @@ import { h } from "@stencil/core";
 import generateUniqueId from "../../utils/generateUniqueId";
 export class TdsDatetime {
     constructor() {
+        /** Sets an input type */
+        this.type = 'datetime-local';
+        /** Value of the input text */
+        this.value = '';
+        /** Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for month: YY-MM. Format for week: YY-Www  Format for date-time: YY-MM-DDTHH-MM */
+        this.defaultValue = 'none';
+        /** Set input in disabled state */
+        this.disabled = false;
+        /** Size of the input */
+        this.size = 'lg';
+        /** Resets min width rule */
+        this.noMinWidth = false;
+        /** Set the variant of the Datetime component. */
+        this.modeVariant = null;
+        /** Name property. Uses a unique ID as fallback if not specified. */
+        this.name = `datetime-${generateUniqueId()}`;
+        /** Autofocus for input */
+        this.autofocus = false;
+        /** Label text for the component */
+        this.label = '';
+        /** Position of the label */
+        this.labelPosition = 'no-label';
+        /** Helper text for the component */
+        this.helper = '';
         this.getDefaultValue = () => {
             const dateTimeObj = {
                 year: this.defaultValue.slice(0, 4),
@@ -26,23 +50,6 @@ export class TdsDatetime {
                     throw new Error('Invalid type.');
             }
         };
-        this.type = 'datetime-local';
-        this.value = '';
-        this.min = undefined;
-        this.max = undefined;
-        this.defaultValue = 'none';
-        this.disabled = false;
-        this.size = 'lg';
-        this.noMinWidth = false;
-        this.modeVariant = null;
-        this.name = `datetime-${generateUniqueId()}`;
-        this.state = undefined;
-        this.autofocus = false;
-        this.label = '';
-        this.labelPosition = 'no-label';
-        this.helper = '';
-        this.tdsAriaLabel = undefined;
-        this.focusInput = undefined;
     }
     /** Method that resets the value of the Datetime, using defaultValue if is not 'none' */
     async reset() {
@@ -133,7 +140,7 @@ export class TdsDatetime {
                 }
             } }, this.labelPosition === 'outside' && this.label && (h("label", { key: 'e5dd50563ed2d464983016bc608d81b77c379add', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: 'b2c01f96bb7d8fa7279ac27048328204cc249547', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: 'e7002fc416e62d2c93c337aee1869aa817997df9', class: `tds-datetime-input-container type-${this.type}` }, h("input", { key: '3fdf8d55b15f5a00d4fb0755d5774fee93f100b9', ref: (inputEl) => {
                 this.textInput = inputEl;
-            }, class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, id: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label }), this.labelPosition === 'inside' && this.size !== 'sm' && this.label && (h("label", { key: '48d096356ad9f547bacbf407af12c4411d5dd45f', class: `tds-datetime-label-inside ${iphone && 'iphone'}`, htmlFor: this.name }, this.label)), h("div", { key: '0ea83c4003923ffed9b11ef22131000bb696a80f', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '6ab6fde60c3d8ce0ad212c0d248c597a23cc6ce7', size: "20px", name: "calendar", svgTitle: "Calendar" })), h("div", { key: '4c304db3c9e6159a7827b6a83c6f81d04cbf0d19', class: "datetime-icon icon-time" }, h("tds-icon", { key: '2a91a579dc5307d35ffbd47aa67616e2e692dd1c', size: "20px", name: "clock", svgTitle: "Clock" }))), h("div", { key: '80dec676d32fd856e7a7dcee7b7e6acbb8b66827', class: "tds-datetime-bar" })), this.helper && (h("div", { key: 'ff276d3c174c88c14081d7a5da689c278844422a', class: "tds-datetime-helper" }, h("div", { key: '9401ca569dd8c23e1bcbdccb39d9f8134fc027db', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: 'dada47e75f30dac9b132477ffd73720d0e1a7530', name: "error", size: "16px", svgTitle: "error" }), this.helper)))));
+            }, class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, id: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label }), this.labelPosition === 'inside' && this.size !== 'sm' && this.label && (h("label", { key: '48d096356ad9f547bacbf407af12c4411d5dd45f', class: `tds-datetime-label-inside ${iphone && 'iphone'}`, htmlFor: this.name }, this.label)), h("div", { key: '0ea83c4003923ffed9b11ef22131000bb696a80f', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '6ab6fde60c3d8ce0ad212c0d248c597a23cc6ce7', size: "20px", name: "calendar", svgTitle: "Calendar" })), h("div", { key: '4c304db3c9e6159a7827b6a83c6f81d04cbf0d19', class: "datetime-icon icon-time" }, h("tds-icon", { key: '2a91a579dc5307d35ffbd47aa67616e2e692dd1c', size: "20px", name: "clock", svgTitle: "Clock" })))), this.helper && (h("div", { key: '4883298ade40b2177450f1af3cda0b02a9c24786', class: "tds-datetime-helper" }, h("div", { key: '5baaf00b0372f50341f1995c713e3cbece2c8a4d', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: 'a8d4aedbbba2e083578825efadbeaede47d83055', name: "error", size: "16px", svgTitle: "error" }), this.helper)))));
     }
     static get is() { return "tds-datetime"; }
     static get encapsulation() { return "scoped"; }
@@ -163,8 +170,10 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Sets an input type"
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "type",
                 "defaultValue": "'datetime-local'"
             },
             "value": {
@@ -181,8 +190,10 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Value of the input text"
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "value",
                 "defaultValue": "''"
             },
             "min": {
@@ -199,8 +210,10 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Sets min value. Example for different types: datetime=\"2023-01-31T00:00\" date=\"2023-01-01\" time=\"15:00\""
                 },
-                "attribute": "min",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
             },
             "max": {
                 "type": "string",
@@ -216,8 +229,10 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Sets max value. Example for different types: datetime=\"2023-01-31T00:00\" date=\"2023-01-01\" time=\"15:00\""
                 },
-                "attribute": "max",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
             },
             "defaultValue": {
                 "type": "string",
@@ -233,8 +248,10 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for month: YY-MM. Format for week: YY-Www  Format for date-time: YY-MM-DDTHH-MM"
                 },
-                "attribute": "default-value",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "default-value",
                 "defaultValue": "'none'"
             },
             "disabled": {
@@ -251,8 +268,10 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Set input in disabled state"
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "size": {
@@ -269,8 +288,10 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Size of the input"
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'lg'"
             },
             "noMinWidth": {
@@ -287,8 +308,10 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Resets min width rule"
                 },
-                "attribute": "no-min-width",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "no-min-width",
                 "defaultValue": "false"
             },
             "modeVariant": {
@@ -305,8 +328,10 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Set the variant of the Datetime component."
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode-variant",
                 "defaultValue": "null"
             },
             "name": {
@@ -323,8 +348,10 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Name property. Uses a unique ID as fallback if not specified."
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "name",
                 "defaultValue": "`datetime-${generateUniqueId()}`"
             },
             "state": {
@@ -341,8 +368,10 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Error state of input"
                 },
-                "attribute": "state",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state"
             },
             "autofocus": {
                 "type": "boolean",
@@ -358,8 +387,10 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Autofocus for input"
                 },
-                "attribute": "autofocus",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "autofocus",
                 "defaultValue": "false"
             },
             "label": {
@@ -376,8 +407,10 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Label text for the component"
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "label",
                 "defaultValue": "''"
             },
             "labelPosition": {
@@ -394,8 +427,10 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Position of the label"
                 },
-                "attribute": "label-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "label-position",
                 "defaultValue": "'no-label'"
             },
             "helper": {
@@ -412,8 +447,10 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Helper text for the component"
                 },
-                "attribute": "helper",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "helper",
                 "defaultValue": "''"
             },
             "tdsAriaLabel": {
@@ -430,8 +467,10 @@ export class TdsDatetime {
                     "tags": [],
                     "text": "Value for the aria-label attribute"
                 },
-                "attribute": "tds-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-label"
             }
         };
     }

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

@@ -1,11 +1,13 @@
 import { Host, h } from "@stencil/core";
 export class Divider {
     constructor() {
+        /** Orientation of the Divider, horizontal if not specified. */
         this.orientation = 'horizontal';
+        /** Variant of the Divider, subtle if not specified. */
         this.variant = 'subtle';
     }
     render() {
-        return (h(Host, { key: 'fb332ff6d8b15e2451266bb9051113819ac770ab', role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { key: 'a0a6e9037f259f3d4ecff62744a8b31875241901', class: {
+        return (h(Host, { key: '286c212f733e5cac724b50b8cd1e99f12f6b6de3', role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { key: 'f6a3b9c516f7f072cad30d06b597d58728502b12', class: {
                 'divider': true,
                 'vertical': this.orientation === 'vertical',
                 'horizontal': this.orientation === 'horizontal',
@@ -44,8 +46,10 @@ export class Divider {
                     "tags": [],
                     "text": "Orientation of the Divider, horizontal if not specified."
                 },
-                "attribute": "orientation",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "orientation",
                 "defaultValue": "'horizontal'"
             },
             "variant": {
@@ -62,8 +66,10 @@ export class Divider {
                     "tags": [],
                     "text": "Variant of the Divider, subtle if not specified."
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "'subtle'"
             }
         };

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

@@ -21,7 +21,7 @@
   color: var(--tds-dropdown-option-color-disabled);
 }
 :host .dropdown-option button:focus {
-  outline: 2px solid var(--tds-dropdown-option-focus);
+  outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: inset 0 0 0 3px var(--tds-white);
   outline-offset: -2px;
 }

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

@@ -1,28 +1,42 @@
 import { Host, h, } from "@stencil/core";
 import { convertToString } from "../../../utils/convertToString";
+import { closestByTag, isTag } from "../../../utils/dom";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the option label text.
  */
 export class TdsDropdownOption {
     constructor() {
+        /** Sets the option as disabled. */
+        this.disabled = false;
+        this.selected = false;
+        this.multiselect = false;
+        this.size = 'lg';
         this.parentElement = null;
         // @ts-expect-error - label property is used internally for text content tracking
         // eslint-disable-next-line no-unused-vars,
         this.label = '';
         this.componentWillRender = () => {
-            var _a, _b, _c;
-            if (!this.host.parentElement) {
+            var _a, _b;
+            if (!this.host.parentElement)
                 return;
+            const directParent = this.host.parentElement;
+            if (isTag(directParent, 'tds-dropdown')) {
+                this.parentElement = directParent;
+            }
+            else {
+                const root = this.host.getRootNode();
+                if (root instanceof ShadowRoot) {
+                    this.parentElement = closestByTag(root.host, 'tds-dropdown');
+                }
+                else {
+                    this.parentElement = null;
+                }
             }
-            this.parentElement =
-                ((_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) === 'TDS-DROPDOWN'
-                    ? this.host.parentElement
-                    : this.host.getRootNode().host;
             if (this.parentElement) {
-                this.multiselect = (_b = this.parentElement.multiselect) !== null && _b !== void 0 ? _b : false;
+                this.multiselect = (_a = this.parentElement.multiselect) !== null && _a !== void 0 ? _a : false;
                 this.size = this.parentElement.size || 'lg';
             }
-            this.label = ((_c = this.host.textContent) === null || _c === void 0 ? void 0 : _c.trim()) || '';
+            this.label = ((_b = this.host.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || '';
         };
         this.handleSingleSelect = () => {
             if (!this.disabled) {
@@ -57,18 +71,19 @@ export class TdsDropdownOption {
             }
         };
         this.handleFocus = (event) => {
-            this.tdsFocus.emit(event);
+            // Focus events are now handled by the parent dropdown component
+            // Only emit if this is a standalone option (not within a dropdown)
+            if (!this.parentElement) {
+                this.tdsFocus.emit(event);
+            }
         };
         this.handleBlur = (event) => {
-            this.tdsBlur.emit(event);
+            // Blur events are now handled by the parent dropdown component
+            // Only emit if this is a standalone option (not within a dropdown)
+            if (!this.parentElement) {
+                this.tdsBlur.emit(event);
+            }
         };
-        this.value = undefined;
-        this.internalValue = undefined;
-        this.disabled = false;
-        this.tdsAriaLabel = undefined;
-        this.selected = false;
-        this.multiselect = false;
-        this.size = 'lg';
     }
     /** Method to select/deselect an option. */
     async setSelected(selected) {
@@ -81,7 +96,7 @@ export class TdsDropdownOption {
         this.internalValue = convertToString(this.value);
     }
     render() {
-        return (h(Host, { key: 'd35a3153be292b1656d0efca93f06bfc1357041b' }, h("div", { key: '384353f9868a3fb559ca4140d5cd4f5553e024ad', class: `dropdown-option
+        return (h(Host, { key: '9fa5bfe8a6dc4596c0181c3319cba2e4101b7502' }, h("div", { key: 'b160e2007f01dfa6b13b633408125cd32159bb95', class: `dropdown-option
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
@@ -91,6 +106,8 @@ export class TdsDropdownOption {
                 }
             } }, h("tds-checkbox", { onTdsChange: (event) => {
                 this.handleMultiselect(event);
+            }, onTdsBlur: (event) => {
+                event.stopPropagation();
             }, disabled: this.disabled, checked: this.selected, tdsAriaLabel: this.tdsAriaLabel, class: {
                 [this.size]: true,
             } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected, "aria-label": this.tdsAriaLabel, onClick: () => {
@@ -126,8 +143,10 @@ export class TdsDropdownOption {
                     "tags": [],
                     "text": "Value of the dropdown option"
                 },
-                "attribute": "value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             },
             "disabled": {
                 "type": "boolean",
@@ -143,8 +162,10 @@ export class TdsDropdownOption {
                     "tags": [],
                     "text": "Sets the option as disabled."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "tdsAriaLabel": {
@@ -161,8 +182,10 @@ export class TdsDropdownOption {
                     "tags": [],
                     "text": "Defines aria-label attribute for the option"
                 },
-                "attribute": "tds-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-label"
             }
         };
     }