@scania/tegel 0.0.7 → 0.0.9

package/dist/collection/components/toggle/toggle.js

@@ -0,0 +1,209 @@
+import { h } from '@stencil/core';
+export class TdsToggle {
+  constructor() {
+    this.handleToggle = () => {
+      this.checked = !this.checked;
+      this.tdsToggle.emit({
+        toggleId: this.toggleId,
+        checked: this.checked,
+      });
+    };
+    this.checked = false;
+    this.required = false;
+    this.size = 'lg';
+    this.name = undefined;
+    this.headline = undefined;
+    this.disabled = false;
+    this.toggleId = crypto.randomUUID();
+  }
+  /** Toggles the Toggle. */
+  async toggle() {
+    this.checked = !this.checked;
+    return {
+      toggleId: this.toggleId,
+      checked: this.checked,
+    };
+  }
+  render() {
+    return (h("div", { class: "tds-toggle" }, this.headline && (h("div", { class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), h("input", { "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), h("label", { class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, h("slot", { name: "label" }))));
+  }
+  static get is() { return "tds-toggle"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["toggle.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["toggle.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "checked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the Toggle as checked"
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Make the Toggle required"
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'lg'",
+          "resolved": "\"lg\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of the Toggle"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the toggle's input element"
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "headline": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Headline for the Toggle"
+        },
+        "attribute": "headline",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the Toggle in a disabled state"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "toggleId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID of the Toggle's input element, if not specified, it's randomly generated"
+        },
+        "attribute": "toggle-id",
+        "reflect": false,
+        "defaultValue": "crypto.randomUUID()"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tdsToggle",
+        "name": "tdsToggle",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique Toggle identifier and status when it is toggled."
+        },
+        "complexType": {
+          "original": "{\n    toggleId: string;\n    checked: boolean;\n  }",
+          "resolved": "{ toggleId: string; checked: boolean; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "toggle": {
+        "complexType": {
+          "signature": "() => Promise<{ toggleId: string; checked: boolean; }>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<{ toggleId: string; checked: boolean; }>"
+        },
+        "docs": {
+          "text": "Toggles the Toggle.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/tooltip/tooltip.css

@@ -1,20 +1,20 @@
 :root,
-.sdds-mode-light {
-  --sdds-tooltip-background: var(--sdds-grey-800);
-  --sdds-tooltip-color: var(--sdds-white);
+.tds-mode-light {
+  --tds-tooltip-background: var(--tds-grey-800);
+  --tds-tooltip-color: var(--tds-white);
 }
 
-.sdds-mode-dark {
-  --sdds-tooltip-background: var(--sdds-grey-200);
-  --sdds-tooltip-color: var(--sdds-grey-958);
+.tds-mode-dark {
+  --tds-tooltip-background: var(--tds-grey-200);
+  --tds-tooltip-color: var(--tds-grey-958);
 }
 
-.sdds-tooltip {
+.tds-tooltip {
   box-sizing: border-box;
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
-  color: var(--sdds-tooltip-color);
-  background-color: var(--sdds-tooltip-background);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
+  color: var(--tds-tooltip-color);
+  background-color: var(--tds-tooltip-background);
   border-radius: 4px;
   padding: 8px;
   word-wrap: break-word;
@@ -24,23 +24,23 @@
   visibility: hidden;
   transition: opacity 200ms ease-in, visibility 200ms ease-in;
 }
-.sdds-tooltip * {
+.tds-tooltip * {
   box-sizing: border-box;
 }
-.sdds-tooltip.sdds-tooltip-top-left {
+.tds-tooltip.tds-tooltip-top-left {
   border-radius: 0 4px 4px;
 }
-.sdds-tooltip.sdds-tooltip-top-right {
+.tds-tooltip.tds-tooltip-top-right {
   border-radius: 4px 0 4px 4px;
 }
-.sdds-tooltip.sdds-tooltip-bottom-right {
+.tds-tooltip.tds-tooltip-bottom-right {
   border-radius: 4px 4px 0;
 }
-.sdds-tooltip.sdds-tooltip-bottom-left {
+.tds-tooltip.tds-tooltip-bottom-left {
   border-radius: 4px 4px 4px 0;
 }
 
-.sdds-tooltip-show {
+.tds-tooltip-show {
   opacity: 1;
   visibility: visible;
 }

package/dist/collection/components/tooltip/tooltip.js

@@ -1,6 +1,6 @@
 import { h } from '@stencil/core';
 import { createPopper } from '@popperjs/core';
-export class Tooltip {
+export class TdsTooltip {
   constructor() {
     this.offsetSkidding = 0;
     this.offsetDistance = 8;
@@ -70,7 +70,7 @@ export class Tooltip {
     this.target.addEventListener('mouseleave', () => {
       hideTooltip();
     });
-    // For hovering over tooltip itself:
+    // For hovering over Tooltip itself:
     if (this.mouseOverTooltip === true) {
       this.tooltip.addEventListener('mouseenter', () => {
         showTooltip();
@@ -88,9 +88,9 @@ export class Tooltip {
   render() {
     return (h("span", { ref: (el) => {
         this.tooltip = el;
-      }, class: `sdds-tooltip sdds-tooltip-${this.border} ${this.show ? 'sdds-tooltip-show' : ''}` }, this.text, h("slot", null)));
+      }, class: `tds-tooltip tds-tooltip-${this.border} ${this.show ? 'tds-tooltip-show' : ''}` }, this.text, h("slot", null)));
   }
-  static get is() { return "sdds-tooltip"; }
+  static get is() { return "tds-tooltip"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -116,7 +116,7 @@ export class Tooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "In case tooltip contains only text, no HTML, text can be passed by this prop"
+          "text": "In case Tooltip contains only text, no HTML, a text can be passed by this prop"
         },
         "attribute": "text",
         "reflect": false,
@@ -134,7 +134,7 @@ export class Tooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The CSS-selector for an element that will trigger the tooltip"
+          "text": "The CSS-selector for an element that will trigger the Tooltip"
         },
         "attribute": "selector",
         "reflect": false,
@@ -156,7 +156,7 @@ export class Tooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Element that will trigger the tooltip (takes priority over selector)"
+          "text": "Element that will trigger the Tooltip (takes priority over selector)"
         }
       },
       "mouseOverTooltip": {
@@ -171,7 +171,7 @@ export class Tooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Allow mouse over tooltip. Useful when tooltip contains clickable elements like link or button."
+          "text": "Allow mouse over Tooltip. Useful when Tooltip contains clickable elements like link or button."
         },
         "attribute": "mouse-over-tooltip",
         "reflect": false,
@@ -212,7 +212,7 @@ export class Tooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Placement of tooltip."
+          "text": "Placement of Tooltip."
         },
         "attribute": "placement",
         "reflect": false,

package/dist/collection/utils/constants.js

@@ -0,0 +1 @@
+export const ComponentsFolder = 'Components';

package/dist/collection/utils/utils.js

@@ -21,14 +21,67 @@ export function demoFormat(first, middle, last) {
  * @param additionalAttributes Additional attributes that should be passed to the input.
  */
 export const appendHiddenInput = (element, name, value, disabled, additionalAttributes) => {
-  const input = element.ownerDocument.createElement('input');
-  input.type = 'hidden';
-  element.appendChild(input);
+  let input = element.querySelector('input');
+  if (!element.querySelector('input')) {
+    input = element.ownerDocument.createElement('input');
+    input.type = 'hidden';
+    if (additionalAttributes) {
+      additionalAttributes.forEach((attr) => input.setAttribute(attr.key, attr.value));
+    }
+    element.appendChild(input);
+  }
   input.disabled = disabled;
   input.name = name;
   input.value = value || '';
-  if (additionalAttributes) {
-    additionalAttributes.forEach((attr) => input.setAttribute(attr.key, attr.value));
+};
+/**
+ * Appends a child element to the supplied parentElement.
+ * @param parentElement The element on which the child element with be appended.
+ * @param tag Tag for the child element.
+ * @param attributes List of attributes to be added on the child element.
+ * @param slot Slot for the child element.
+ * @param id Id for the child element.
+ */
+export const appendChildElement = (parentElement, tag, attributes, slot, id) => {
+  if (!parentElement.querySelector(`#${id}`)) {
+    const childElement = parentElement.ownerDocument.createElement(tag);
+    attributes.forEach((attr) => {
+      childElement.setAttribute(attr.key, attr.value);
+    });
+    childElement.innerHTML = slot;
+    childElement.id = id;
+    parentElement.appendChild(childElement);
+  }
+};
+/**
+ * Find the next focusable element index in a list of focusable elements.
+ * @param items List of focusable elements, element with a attribute of disabled that is true will be skipped over.
+ * @param nextItemIndex The index in the list to start the search on.
+ */
+export const findNextFocusableItem = (items, nextItemIndex) => {
+  if (items[nextItemIndex] === undefined) {
+    return 0;
+  }
+  for (let index = nextItemIndex; index < items.length; index++) {
+    if (!items[index].disabled) {
+      return index;
+    }
+  }
+};
+/**
+ * Find the previous focusable element index in a list of focusable elements.
+ *
+ * @param items List of focusable elements, element with a attribute of disabled that is true will be skipped over.
+ * @param nextItemIndex The index in the list to start the search on.
+ */
+export const findPreviousFocusableItem = (items, previousItemIndex) => {
+  if (items[previousItemIndex] === undefined) {
+    return items.length - 1;
+  }
+  for (let index = previousItemIndex; index >= 0; index--) {
+    if (!items[index].disabled) {
+      return index;
+    }
   }
 };
 /**
@@ -283,3 +336,15 @@ export function isFocusable(element) {
   }
   return false;
 }
+/**
+ * Disables click on a element by adding an event listener
+ * and then preventing default and stopping propogation.
+ * @param {Element} element The element where the click should be
+ * disabled.
+ * */
+export const disableClickOnElement = (element) => {
+  element.addEventListener('click', (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  });
+};

package/dist/collection/utils/utils.spec.js

@@ -0,0 +1,15 @@
+import { demoFormat } from './utils';
+describe('format', () => {
+  it('returns empty string for no names defined', () => {
+    expect(demoFormat(undefined, undefined, undefined)).toEqual('');
+  });
+  it('formats just first names', () => {
+    expect(demoFormat('Joseph', undefined, undefined)).toEqual('Joseph');
+  });
+  it('formats first and last names', () => {
+    expect(demoFormat('Joseph', undefined, 'Publique')).toEqual('Joseph Publique');
+  });
+  it('formats first, middle and last names', () => {
+    expect(demoFormat('Joseph', 'Quincy', 'Publique')).toEqual('Joseph Quincy Publique');
+  });
+});

package/dist/components/checkbox.js

@@ -0,0 +1,73 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const checkboxCss = ".tds-checkbox.sc-tds-checkbox{box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.tds-checkbox.sc-tds-checkbox *.sc-tds-checkbox{box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer;flex-shrink:0;align-self:flex-start}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-checkbox-color);padding-left:var(--tds-spacing-element-4);padding-top:var(--tds-spacing-element-4);padding-bottom:var(--tds-spacing-element-4);cursor:pointer;display:flex;align-items:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{content:\"\";position:absolute;box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before{width:24px;height:24px;left:0;top:0;border-radius:4px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{border:1px solid var(--tds-checkbox-interaction-01);background-color:var(--tds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px;border-radius:2px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:focus::before{background-color:var(--tds-checkbox-background-focus);opacity:var(--tds-checkbox-background-opacity-focus);transition:opacity 0.2s ease-in-out}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox{cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox::after{border-color:var(--tds-checkbox-border-color-disabled-after)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled+label.sc-tds-checkbox,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-grey-600);cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox:hover::before{display:none}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked::after{background-image:var(--tds-checkbox-background-img);background-color:var(--tds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::after{background-image:var(--tds-checkbox-background-img-disabled);background-color:var(--tds-checkbox-interaction-02);color:var(--tds-checkbox-color-disabled-after)}";
+
+const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.tdsChange = createEvent(this, "tdsChange", 6);
+    this.tdsFocus = createEvent(this, "tdsFocus", 6);
+    this.tdsBlur = createEvent(this, "tdsBlur", 6);
+    this.handleChange = () => {
+      this.checked = !this.checked;
+      this.tdsChange.emit({
+        checkboxId: this.checkboxId,
+        checked: this.checked,
+        value: this.value,
+      });
+    };
+    this.name = undefined;
+    this.checkboxId = crypto.randomUUID();
+    this.disabled = false;
+    this.required = false;
+    this.checked = false;
+    this.value = undefined;
+  }
+  /** Toggles the checked value of the component. */
+  async toggleCheckbox() {
+    this.checked = !this.checked;
+    return {
+      checkboxId: this.checkboxId,
+      checked: this.checked,
+    };
+  }
+  /** Set the input as focus when clicking the component */
+  handleFocus(event) {
+    this.tdsFocus.emit(event);
+  }
+  /** Set the input as blur when clicking outside the component */
+  handleBlur(event) {
+    this.tdsBlur.emit(event);
+  }
+  render() {
+    return (h("div", { class: "tds-checkbox" }, h("input", { "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
+        this.handleChange();
+      } }), h("label", { htmlFor: this.checkboxId }, h("slot", { name: "label" }))));
+  }
+  get host() { return this; }
+  static get style() { return checkboxCss; }
+}, [6, "tds-checkbox", {
+    "name": [1],
+    "checkboxId": [1, "checkbox-id"],
+    "disabled": [4],
+    "required": [4],
+    "checked": [516],
+    "value": [1],
+    "toggleCheckbox": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsCheckbox);
+      }
+      break;
+  } });
+}
+
+export { TdsCheckbox as T, defineCustomElement as d };

package/dist/components/core-header-item.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const coreHeaderItemCss = ":host{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-header-nav-item-color)}:host .item{all:unset;box-sizing:border-box;display:flex;justify-content:center;align-items:center;min-width:var(--sdds-header-height);height:var(--sdds-header-height);margin:0}:host .item *{box-sizing:border-box}:host slot{white-space:nowrap}:host ::slotted(svg){font-size:20px}";
+const coreHeaderItemCss = ":host{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-header-nav-item-color)}:host .item{all:unset;box-sizing:border-box;display:flex;justify-content:center;align-items:center;min-width:var(--tds-header-height);height:var(--tds-header-height);margin:0}:host .item *{box-sizing:border-box}:host slot{white-space:nowrap}:host ::slotted(svg){font-size:20px}";
 
-const CoreHeaderItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const TdsCoreHeaderItem = /*@__PURE__*/ proxyCustomElement(class TdsCoreHeaderItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -12,19 +12,19 @@ const CoreHeaderItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     return (h(Host, null, h("div", { class: "item" }, h("slot", null))));
   }
   static get style() { return coreHeaderItemCss; }
-}, [1, "sdds-core-header-item"]);
+}, [1, "tds-core-header-item"]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["sdds-core-header-item"];
+  const components = ["tds-core-header-item"];
   components.forEach(tagName => { switch (tagName) {
-    case "sdds-core-header-item":
+    case "tds-core-header-item":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, CoreHeaderItem);
+        customElements.define(tagName, TdsCoreHeaderItem);
       }
       break;
   } });
 }
 
-export { CoreHeaderItem as C, defineCustomElement as d };
+export { TdsCoreHeaderItem as T, defineCustomElement as d };

package/dist/components/divider.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const dividerCss = ".divider{box-sizing:border-box}.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}";
+
+const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.orientation = 'horizontal';
+  }
+  render() {
+    return (h(Host, { role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { class: `divider ${this.orientation}` })));
+  }
+  static get style() { return dividerCss; }
+}, [1, "tds-divider", {
+    "orientation": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-divider"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-divider":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Divider);
+      }
+      break;
+  } });
+}
+
+export { Divider as D, defineCustomElement as d };