@uh-design-system/component-library 0.7.1 → 0.7.2-rc.0

package/dist/collection/components/01-base-components/ds-combobox/stories/ds-combobox.features.stories.js

@@ -0,0 +1,166 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+const meta = {
+    title: 'Base Components/Combobox/Features',
+    component: 'ds-combobox',
+};
+export default meta;
+const renderDsOption = (dsValue, dsLabel, dsDescription) => html `
+  <ds-option ds-value=${dsValue} ds-description=${ifDefined(dsDescription)}>${dsLabel}</ds-option>
+`;
+const renderDsOptions = (length = 3, from = 1) => html `
+  ${Array.from({ length }, (_, i) => renderDsOption(`option${i + from}`, `Option ${i + from}`))}
+`;
+export const AriaLabel = {
+    render: () => html `
+    <ds-combobox
+      ds-aria-label="Select an option"
+      ds-icon="search"
+    >
+      ${renderDsOptions()}
+    </ds-combobox>
+  `,
+};
+export const GroupedOptions = {
+    render: () => html `
+    <ds-combobox
+      ds-label="Select an option"
+    >
+      <ds-option-group ds-label="Group 1">
+        ${renderDsOptions(2, 1)}
+      </ds-option-group>
+      <ds-option-group ds-label="Group 2">
+        ${renderDsOptions(2, 3)}
+      </ds-option-group>
+    </ds-combobox>
+  `,
+};
+export const Disabled = {
+    render: () => html `
+    <ds-combobox
+      ds-disabled="true"
+      ds-label="Disabled Combobox"
+    >
+      ${renderDsOptions()}
+    </ds-combobox>
+  `,
+};
+export const Invalid = {
+    render: () => html `
+    <ds-combobox
+      ds-error-text="Error text"
+      ds-label="Invalid Combobox"
+    >
+      ${renderDsOptions()}
+    </ds-combobox>
+  `,
+};
+export const LongList = {
+    render: () => html `
+    <ds-combobox
+      ds-label="Select an option"
+    >
+      ${renderDsOptions(30)}
+    </ds-combobox>
+  `,
+};
+export const LongGroupedList = {
+    render: () => html `
+    <ds-combobox
+      ds-label="Select an option"
+    >
+      <ds-option-group ds-label="Group 1">
+        ${renderDsOptions(10, 1)}
+      </ds-option-group>
+      <ds-option-group ds-label="Group 2">
+        ${renderDsOptions(10, 11)}
+      </ds-option-group>
+      <ds-option-group ds-label="Group 3">
+        ${renderDsOptions(10, 21)}
+      </ds-option-group>
+    </ds-combobox>
+  `,
+};
+export const WithIcon = {
+    render: () => html `
+    <ds-combobox
+      ds-label="Select an option"
+      ds-icon="language"
+    >
+      ${renderDsOptions()}
+    </ds-combobox>
+  `,
+};
+export const WithDescriptions = {
+    render: () => html `
+    <ds-combobox
+      ds-label="Select an option"
+    >
+      ${renderDsOption('option1', 'Option 1', 'This is the first option')}
+      ${renderDsOption('option2', 'Option 2', 'This is the second option')}
+      ${renderDsOption('option3', 'Option 3', 'This is the third option')}
+    </ds-combobox>
+  `,
+};
+export const LongOptionText = {
+    render: () => html `
+    <ds-combobox
+      ds-label="Select an option"
+    >
+      ${renderDsOption('option1', 'This is a very long option text that should be truncated if it exceeds the width of the combobox')}
+      ${renderDsOption('option2', 'Another long option text that might not fit in the combobox')}
+      ${renderDsOption('option3', 'Short option')}
+    </ds-combobox>
+  `,
+};
+const createDsOption = (value, label) => {
+    const option = document.createElement('ds-option');
+    option.setAttribute('ds-value', value);
+    option.textContent = label;
+    return option;
+};
+const createDsOptions = (length, start = 1) => {
+    return Array.from({ length }, (_, i) => createDsOption(`option${i + start}`, `Option ${i + start}`));
+};
+const renderDynamicOptions = (prop, ms = 3000) => {
+    let appendChildren = true;
+    const div = document.createElement('div');
+    const p = document.createElement('p');
+    p.textContent = `The state is toggled every ${ms / 1000} seconds.`;
+    const combobox = document.createElement('ds-combobox');
+    combobox.dsLabel = 'Select an option';
+    combobox[prop] = true;
+    setInterval(() => {
+        if (appendChildren) {
+            combobox[prop] = false;
+            const options = createDsOptions(3);
+            options.forEach(option => combobox.appendChild(option));
+        }
+        else {
+            combobox[prop] = true;
+            const options = combobox.querySelectorAll('ds-option');
+            options.forEach(option => option.remove());
+        }
+        appendChildren = !appendChildren;
+    }, ms);
+    div.appendChild(p);
+    div.appendChild(combobox);
+    return div;
+};
+export const DynamicOptionsLoading = {
+    render: () => renderDynamicOptions('dsLoading', 3000),
+};
+export const DynamicOptionsError = {
+    render: () => renderDynamicOptions('dsOptionsError', 3000),
+};
+export const CustomTagName = {
+    render: () => html `
+    <custom-ds-combobox
+      ds-label="custom-ds-combobox"
+    >
+      <custom-ds-option ds-value="option1">Option 1</custom-ds-option>
+      <custom-ds-option ds-value="option2">Option 2</custom-ds-option>
+      <custom-ds-option ds-value="option3">Option 3</custom-ds-option>
+    </custom-ds-combobox>
+  `,
+};

package/dist/collection/components/01-base-components/ds-combobox/stories/ds-combobox.stories.js

@@ -0,0 +1,72 @@
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/Combobox',
+    component: 'ds-combobox',
+};
+export default meta;
+const options = [
+    { value: 'cat', label: 'Cat' },
+    { value: 'wildcat', label: 'Wildcat' },
+    { value: 'bobcat', label: 'Bobcat' },
+    { value: 'catfish', label: 'Catfish' },
+    { value: 'housecat', label: 'Housecat' },
+];
+export const Default = {
+    args: {
+        dsFilteringStrategy: 'dynamic',
+        dsLabel: 'Select an option',
+    },
+    render: (args) => html `
+    <ds-combobox
+      ds-filtering-strategy=${args.dsFilteringStrategy}
+      ds-label=${args.dsLabel}
+      ?ds-placeholder=${args.dsPlaceholder}
+      @dsChange=${(event) => {
+        const output = document.getElementById('combobox-output__selected-value');
+        if (output) {
+            output.textContent = event.detail || 'None';
+        }
+    }}
+    >
+      ${options.map((option) => html `<ds-option ds-value=${option.value}>${option.label}</ds-option>`)}
+    </ds-combobox>
+  `,
+};
+export const Playground = {
+    args: {
+        dsId: 'playground-combobox',
+        dsLabel: 'Playground Combobox',
+        dsAssistiveText: '',
+        dsIcon: '',
+        dsPlaceholder: 'Select an option',
+        dsPlaceholderHidden: false,
+        dsDisabled: false,
+        dsAriaLabel: '',
+        dsClearable: true,
+        dsErrorText: '',
+        dsFilteringStrategy: 'dynamic',
+        dsLoading: false,
+        dsOptionsError: false,
+        dsNoResults: false,
+    },
+    render: (args) => html `
+    <ds-combobox
+      ds-id=${args.dsId}
+      ds-label=${args.dsLabel}
+      ds-assistive-text=${args.dsAssistiveText}
+      ds-icon=${args.dsIcon}
+      ds-placeholder=${args.dsPlaceholder}
+      ds-placeholder-hidden=${args.dsPlaceholderHidden}
+      ds-disabled=${args.dsDisabled}
+      ds-aria-label=${args.dsAriaLabel}
+      ds-clearable=${args.dsClearable}
+      ds-error-text=${args.dsErrorText}
+      ds-filtering-strategy=${args.dsFilteringStrategy}
+      ds-loading=${args.dsLoading}
+      ds-options-error=${args.dsOptionsError}
+      ds-no-results=${args.dsNoResults}
+    >
+      ${options.map((option) => html `<ds-option ds-value=${option.value}>${option.label}</ds-option>`)}
+    </ds-combobox>
+  `,
+};

package/dist/collection/components/01-base-components/ds-grid/ds-grid.js

@@ -27,14 +27,14 @@ export class DsGrid {
         const classes = classNames('ds-grid', {
             'ds-grid--container': this.dsContainer,
         });
-        return (h(Host, { key: '52eed8bf11cbc3facc984438bcee9df2b15b5567', class: classes, style: {
+        return (h(Host, { key: 'a94d11ee7a97bc2ef58afd18b8955ade079b7deb', class: classes, style: {
                 '--ds-parent-size-mobile': `${this.dsParentSizeMobile}`,
                 '--ds-parent-size-tablet': `${this.dsParentSizeTablet}`,
                 '--ds-parent-size-desktop': `${this.dsParentSizeDesktop}`,
                 '--ds-size-mobile': `${this.dsSizeMobile ? this.dsSizeMobile * 3 : this.dsSize}`,
                 '--ds-size-tablet': `${this.dsSizeTablet ? this.dsSizeTablet * 2 : this.dsSize}`,
                 '--ds-size-desktop': `${this.dsSizeDesktop || this.dsSize}`,
-            } }, h("slot", { key: '4a6f4d9e32064cdcfd86995d460cdbe5ce8eccdc' })));
+            } }, h("slot", { key: '56f3755b02a21b44bdabe9dc5f5aa6e8ada186ed' })));
     }
     static get is() { return "ds-grid"; }
     static get originalStyleUrls() {

package/dist/collection/components/01-base-components/ds-icon/ds-icon.js

@@ -15,7 +15,7 @@ export class DsIcon {
     render() {
         const iconComponentName = `ds-icon-${this.dsName.replace(/_/g, "-")}`;
         const IconTag = transformTagName(iconComponentName, 'ds-icon', this.el);
-        return (h(Fragment, { key: '7eaf2c94d82646aced5d1809adf1dc3878f462ab' }, h("span", { key: '534afbeb6d1aefaac7dd700a5925deef5f800dcb', class: "ds-icon--container", "aria-hidden": this.dsHidden ? 'true' : 'false' }, h(IconTag, { key: '528a25680f0198ba67054c23adab754aeff179f1', dsSize: remToPx(this.dsSize), dsColour: this.getIconColour(), dsRole: this.dsRole, dsTitle: this.dsTitle }))));
+        return (h(Fragment, { key: '07581e5bc92ec162bee2975b6baa64c1803b5c38' }, h("span", { key: '1537fe69ea7815c3611551269b8ead4c68511342', class: "ds-icon--container", "aria-hidden": this.dsHidden ? 'true' : 'false' }, h(IconTag, { key: 'c8b81d1b90b6434698e793db95916e2d7493d5db', dsSize: remToPx(this.dsSize), dsColour: this.getIconColour(), dsRole: this.dsRole, dsTitle: this.dsTitle }))));
     }
     static get is() { return "ds-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/01-base-components/ds-input-validity/ds-input-validity.js

@@ -20,7 +20,7 @@ export class DsInputValidity {
         });
         const icon = this.dsType === 'success' ? 'check_circle_fill' : 'warning_fill';
         const DsIcon = transformTagName('ds-icon', 'ds-input-validity', this.el);
-        return (h("div", { key: 'd39ec88fafa158e6ae3e0fde34ab9012454507a8', role: this.dsValidityRole, "aria-live": this.dsAriaLive, "aria-atomic": this.dsAriaAtomic }, this.dsText && (h("div", { key: '8c3863ba4dde84c806fd994af040cc91265f9679', class: classes }, h(DsIcon, { key: '221dd7009c9a3fc02fbf29d85abe4640ff26d3ce', class: "ds-input-validity__icon", dsName: icon }), h("small", { key: '7709de0ba98a75ab413a24309ca20d224f34ea25', id: this.identifier }, this.dsText)))));
+        return (h("div", { key: 'd3f2ee11099c03634e4aa883047b0b3e703a4396', role: this.dsValidityRole, "aria-live": this.dsAriaLive, "aria-atomic": this.dsAriaAtomic }, this.dsText && (h("div", { key: '50cea574413bea4202c41515d2099c4804a433e1', class: classes }, h(DsIcon, { key: '4c8e325756ed286ad16af21774f35b34835cfb51', class: "ds-input-validity__icon", dsName: icon }), h("small", { key: 'f8eb469911f41094c9f071645dbc29f364cad8c3', id: this.identifier }, this.dsText)))));
     }
     static get is() { return "ds-input-validity"; }
     static get originalStyleUrls() {

package/dist/collection/components/01-base-components/ds-link/ds-link.js

@@ -285,7 +285,7 @@ export class DsLink {
                     "references": {
                         "LinkTarget": {
                             "location": "local",
-                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-link/ds-link.tsx",
+                            "path": "/home/joel/dev/component-library/packages/component-library/src/components/01-base-components/ds-link/ds-link.tsx",
                             "id": "src/components/01-base-components/ds-link/ds-link.tsx::LinkTarget"
                         }
                     }

package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.js

@@ -51,7 +51,7 @@ export class DsLinkWithArrow {
         });
         const DsIcon = transformTagName('ds-icon', 'ds-link-with-arrow', this.el);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-link-with-arrow', this.el);
-        return (h(this.dsTag, { key: '0ac18a498b618b19d34678322ffd06a54e8c625a', class: classes, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes, ...this.linkAttributes }, h("slot", { key: '1fff2cf38044e37faa80a943bb2f42ca713652bf', name: "prefix" }, this.dsIconPosition === 'start' && h(DsIcon, { key: 'b8e3df94d512a117bee451c89e78f6345baa54fd', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, h("slot", { key: '416046d940aa1e926deffae714554584b3271f91', name: "suffix" }, this.dsIconPosition === 'end' && h(DsIcon, { key: '3fd4abdcdedd11a9da56d11f203aa6d146323b45', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), opensInNewTab(this.dsTarget) && h(DsVisuallyHidden, { key: 'de624fe88d1760f941e3db7d0bdc7f7fac15397c', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, visuallyHiddenAssistiveText())));
+        return (h(this.dsTag, { key: 'a1e030299a975afd2818e82976dd6166d488b426', class: classes, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes, ...this.linkAttributes }, h("slot", { key: '345fb6f2fdb81c70646076ed5fb93f13f6413e56', name: "prefix" }, this.dsIconPosition === 'start' && h(DsIcon, { key: '99b9e3070e11301659ebe39ff6c37925f058c16d', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, h("slot", { key: '9493cfeaf5fcf7136078956653a93320ee050f7a', name: "suffix" }, this.dsIconPosition === 'end' && h(DsIcon, { key: '435a437918a676418caca28e3d88afcbcbdd46fc', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), opensInNewTab(this.dsTarget) && h(DsVisuallyHidden, { key: '102c343c69d543027008bc51d9f17275fb0d263a', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, visuallyHiddenAssistiveText())));
     }
     static get is() { return "ds-link-with-arrow"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/01-base-components/ds-option/ds-option.css

@@ -7,7 +7,7 @@
   --ds-breakpoint-xLarge: 90rem;
 }
 
-.option {
+.ds-option {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -18,32 +18,35 @@
   background-color: var(--ds-palette-white);
   color: var(--ds-palette-black-95);
 }
-.option:hover {
+.ds-option--hidden {
+  display: none;
+}
+.ds-option:hover {
   background-color: var(--ds-palette-black-10);
 }
-.option:active {
+.ds-option:active {
   background-color: var(--ds-palette-black-20);
 }
-.option.active {
+.ds-option--active {
   box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-palette-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
   outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
 }
-.option.selected {
+.ds-option--selected {
   background-color: var(--ds-palette-mainBlue-70);
   color: var(--ds-palette-white);
 }
-.option.selected .check-icon {
+.ds-option--selected .check-icon {
   visibility: visible;
   color: var(--ds-palette-white);
 }
-.option.selected:hover {
+.ds-option--selected:hover {
   background-color: var(--ds-palette-mainBlue-80);
 }
-.option.selected:active {
+.ds-option--selected:active {
   background-color: var(--ds-palette-mainBlue-90);
 }
-.option .option-label {
+.ds-option .option-label {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
@@ -51,7 +54,7 @@
   grid-column: 1;
   grid-row: 1;
 }
-.option .check-icon {
+.ds-option .check-icon {
   grid-column: 2;
   grid-row: 1/span 2;
   align-self: center;
@@ -59,7 +62,7 @@
   margin-left: auto;
   visibility: hidden;
 }
-.option .option-description {
+.ds-option .option-description {
   color: var(--ds-palette-black-70);
   font-size: var(--ds-fontSize-14);
   margin-top: var(--ds-spacing-3xSmall);
@@ -67,13 +70,13 @@
   grid-column: 1;
   grid-row: 2;
 }
-.option .option-description:not(:empty) {
+.ds-option .option-description:not(:empty) {
   display: block;
 }
-.option.selected .option-description {
+.ds-option--selected .option-description {
   color: var(--ds-palette-white);
 }
-.option .option-check {
+.ds-option .option-check {
   margin-left: var(--ds-spacing-small);
   flex-shrink: 0;
   display: flex;

package/dist/collection/components/01-base-components/ds-option/ds-option.js

@@ -1,20 +1,42 @@
 import { h } from "@stencil/core";
-import { declareComponentDependencies, transformTagName } from "../../../utils/utils";
+import classNames from "classnames";
+import { idGenerator, declareComponentDependencies, transformTagName } from "../../../utils/utils";
+const optionIdGenerator = idGenerator('ds-option');
 export class DsOption {
     el;
+    optionLabelTextRef;
+    dsOptionClick;
+    dsId = optionIdGenerator.next().value;
     dsValue;
     dsDisabled = false;
     dsDescription;
     dsActive = false;
     dsSelected = false;
+    dsHidden = false;
+    dsMouseDownPreventDefault = false;
+    dsFocusOnActiveChange = true;
     internalTabIndex = -1;
     optionRef;
+    onMouseDown(event) {
+        if (this.dsMouseDownPreventDefault) {
+            event.preventDefault();
+        }
+    }
+    onClick() {
+        this.dsOptionClick.emit(this.el);
+    }
     dsActiveObserver(newValue) {
         this.internalTabIndex = newValue && !this.dsDisabled ? 0 : -1;
-        if (newValue && !this.dsDisabled) {
+        if (newValue && !this.dsDisabled && this.dsFocusOnActiveChange) {
             this.dsFocus();
         }
     }
+    async dsGetLabel() {
+        return this.optionLabelTextRef?.textContent || '';
+    }
+    async dsGetGroup() {
+        return this.el.closest(transformTagName('ds-option-group', 'ds-option', this.el));
+    }
     async dsFocus() {
         this.optionRef?.focus();
     }
@@ -23,12 +45,12 @@ export class DsOption {
     }
     render() {
         const DsIcon = transformTagName('ds-icon', 'ds-option', this.el);
-        return (h("div", { key: 'b051e2ccd61a02f1c33e5c74f7f66dec856e1d04', ref: el => this.optionRef = el, class: {
-                option: true,
-                active: this.dsActive,
-                selected: this.dsSelected,
-                disabled: this.dsDisabled,
-            }, role: "option", "aria-selected": String(this.dsSelected), "aria-disabled": String(this.dsDisabled), tabIndex: this.internalTabIndex }, h("span", { key: '8114317ed212116893f288753be27bc57487218c', class: "option-label" }, h("slot", { key: 'edc1ae43b1d32fd4d145e6f5c5bb296202e4f6bf' }), this.dsDescription && h("span", { key: '7a250b046d95c7bd74d742029100d7aed9a0b032', class: "option-description" }, this.dsDescription)), this.dsSelected && (h(DsIcon, { key: '23432b9e3f29189c6030003e61c02be9469a8a2e', dsName: "check", class: "option-check", "aria-hidden": "true" }))));
+        return (h("div", { key: '975d51fb896caf57c2ffca545f71c9dda33cfcfe', ref: el => (this.optionRef = el), id: this.dsId, class: classNames('ds-option', {
+                'ds-option--active': this.dsActive,
+                'ds-option--selected': this.dsSelected,
+                'disabled': this.dsDisabled,
+                'ds-option--hidden': this.dsHidden,
+            }), role: "option", "aria-selected": String(this.dsSelected), "aria-disabled": String(this.dsDisabled), "aria-hidden": String(this.dsHidden), tabIndex: this.internalTabIndex }, h("span", { key: 'ec79b16d03f6bdda6f533edc1cc9a96cf6364413', class: "option-label" }, h("span", { key: 'd3502cc899d73961ea2dea968519f97900e9459e', ref: el => (this.optionLabelTextRef = el) }, h("slot", { key: '449f853782f92f2adbf77b595646668a02bca4e0' })), this.dsDescription && h("span", { key: '3efb602ea3a9cd8f7dc4ca558d1101192f9fd1cd', class: "option-description" }, this.dsDescription)), this.dsSelected && h(DsIcon, { key: '790aaa6c644ef1ba0cf6b65e426c5c761a45e689', dsName: "check", class: "option-check", "aria-hidden": "true" })));
     }
     static get is() { return "ds-option"; }
     static get encapsulation() { return "scoped"; }
@@ -44,6 +66,26 @@ export class DsOption {
     }
     static get properties() {
         return {
+            "dsId": {
+                "type": "string",
+                "attribute": "ds-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique `id` attribute of the option element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "optionIdGenerator.next().value as string"
+            },
             "dsValue": {
                 "type": "string",
                 "attribute": "ds-value",
@@ -76,7 +118,7 @@ export class DsOption {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the option is disabled."
+                    "text": "If true, the option is disabled."
                 },
                 "getter": false,
                 "setter": false,
@@ -115,7 +157,7 @@ export class DsOption {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the option is currently active (focused)."
+                    "text": "If true, the option is currently active (focused)."
                 },
                 "getter": false,
                 "setter": false,
@@ -135,12 +177,72 @@ export class DsOption {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the option is currently selected."
+                    "text": "If true, the option is currently selected."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "dsHidden": {
+                "type": "boolean",
+                "attribute": "ds-hidden",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the option will be hidden."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsMouseDownPreventDefault": {
+                "type": "boolean",
+                "attribute": "ds-mouse-down-prevent-default",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Used internally in combobox to prevent default behavior on mousedown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsFocusOnActiveChange": {
+                "type": "boolean",
+                "attribute": "ds-focus-on-active-change",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Used internally in select and combobox to control focus when the option becomes active."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }
@@ -149,8 +251,69 @@ export class DsOption {
             "internalTabIndex": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "dsOptionClick",
+                "name": "dsOptionClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLDsOptionElement",
+                    "resolved": "HTMLDsOptionElement",
+                    "references": {
+                        "HTMLDsOptionElement": {
+                            "location": "global",
+                            "id": "global::HTMLDsOptionElement"
+                        }
+                    }
+                }
+            }];
+    }
     static get methods() {
         return {
+            "dsGetLabel": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Get label text of the option.",
+                    "tags": []
+                }
+            },
+            "dsGetGroup": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLDsOptionGroupElement>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLDsOptionGroupElement": {
+                            "location": "global",
+                            "id": "global::HTMLDsOptionGroupElement"
+                        }
+                    },
+                    "return": "Promise<HTMLDsOptionGroupElement>"
+                },
+                "docs": {
+                    "text": "Get the group of the option.",
+                    "tags": []
+                }
+            },
             "dsFocus": {
                 "complexType": {
                     "signature": "() => Promise<void>",
@@ -177,5 +340,20 @@ export class DsOption {
                 "methodName": "dsActiveObserver"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "mousedown",
+                "method": "onMouseDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 declareComponentDependencies([h("ds-icon", null)]);