@nectary/components 4.12.0 → 4.12.1

package/button/index.js

@@ -1,14 +1,11 @@
-import { Context, subscribeContext } from "../utils/context.js";
-import { updateAttribute, isAttrEqual, updateBooleanAttribute, isAttrTrue, updateLiteralAttribute, getLiteralAttribute, getAttribute, getBooleanAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-import { requestSubmitForm } from "../utils/form.js";
-import { sizeExValues, DEFAULT_SIZE } from "../utils/size.js";
-import { typeValues, formTypeValues } from "./utils.js";
-const templateHTML = '<style>\n  /* stylelint-disable no-descending-specificity */\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n    cursor: pointer;\n    user-select: none;\n\n    --sinch-button-shape-radius-base:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-secondary-initial);\n    --sinch-button-border: 1px solid;\n    --sinch-button-border-top: var(--sinch-button-border);\n    --sinch-button-border-bottom: var(--sinch-button-border);\n    --sinch-button-border-left: var(--sinch-button-border);\n    --sinch-button-border-right: var(--sinch-button-border);\n    --sinch-button-shape-radius-top-right: unset;\n    --sinch-button-shape-radius-top-left: unset;\n    --sinch-button-shape-radius-bottom-right: unset;\n    --sinch-button-shape-radius-bottom-left: unset;\n  }\n\n  :host([disabled]) {\n    cursor: initial;\n  }\n\n  #button {\n    all: initial;\n    display: block;\n    position: relative;\n    width: 100%;\n    height: var(--sinch-local-size);\n    user-select: none;\n\n    --sinch-local-size: var(--sinch-comp-button-size-container-m);\n    --sinch-local-padding: 16px;\n    --sinch-local-font: var(--sinch-comp-button-font-size-m-text);\n    --sinch-global-size-icon: var(--sinch-comp-button-size-icon-m);\n    --sinch-global-color-icon: var(--sinch-local-color-icon);\n  }\n\n  :host([data-size="l"]) > #button {\n    --sinch-local-size: var(--sinch-comp-button-size-container-l);\n    --sinch-button-set-size-shape-radius:\n      var(\n        --sinch-comp-button-shape-radius-size-l\n      );\n    --sinch-local-font: var(--sinch-comp-button-font-size-l-text);\n    --sinch-global-size-icon: var(--sinch-comp-button-size-icon-l);\n  }\n\n  :host([data-size="m"]) > #button {\n    --sinch-local-size: var(--sinch-comp-button-size-container-m);\n    --sinch-button-set-size-shape-radius:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n    --sinch-local-font: var(--sinch-comp-button-font-size-m-text);\n    --sinch-global-size-icon: var(--sinch-comp-button-size-icon-m);\n  }\n\n  :host([data-size="s"]) > #button {\n    --sinch-local-size: var(--sinch-comp-button-size-container-s);\n    --sinch-button-set-size-shape-radius:\n      var(\n        --sinch-comp-button-shape-radius-size-s\n      );\n    --sinch-local-font: var(--sinch-comp-button-font-size-s-text);\n    --sinch-global-size-icon: var(--sinch-comp-button-size-icon-s);\n  }\n\n  :host([data-size="xs"]) > #button {\n    --sinch-local-size: var(--sinch-comp-button-size-container-xs);\n    --sinch-local-padding: 8px;\n    --sinch-button-set-size-shape-radius:\n      var(\n        --sinch-comp-button-shape-radius-size-xs\n      );\n    --sinch-local-font: var(--sinch-comp-button-font-size-s-text);\n    --sinch-global-size-icon: var(--sinch-comp-button-size-icon-xs);\n  }\n\n  /* icon-button */\n  :host(:is([text=""], :not([text]))) > #button {\n    --sinch-local-padding: 8px;\n  }\n\n  /* icon-button */\n  :host([data-size="s"]:is([text=""], :not([text]))) > #button {\n    --sinch-local-padding: 4px;\n  }\n\n  /* icon-button */\n  :host([data-size="xs"]:is([text=""], :not([text]))) > #button {\n    --sinch-local-padding: 4px;\n  }\n\n  /* Types */\n  :host([type="primary"]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-primary-default-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-primary-default-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-primary-default-text-initial\n      );\n    --sinch-local-color-icon:\n      var(\n        --sinch-comp-button-color-primary-default-icon-initial\n      );\n    --sinch-local-color-outline-focus:\n      var(\n        --sinch-comp-button-color-primary-default-outline-focus\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-primary-initial);\n  }\n\n  /* default type */\n  :host(:not([type])) > #button,\n  :host([type="secondary"]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-secondary-default-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-secondary-default-border-initial\n      );\n    --sinch-local-color-outline-focus:\n      var(\n        --sinch-comp-button-color-secondary-default-outline-focus\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-secondary-default-text-initial\n      );\n    --sinch-local-color-icon:\n      var(\n        --sinch-comp-button-color-secondary-default-icon-initial\n      );\n  }\n\n  :host([type="subtle-primary"]) > #button,\n  /* deprecated */\n  :host([type="tertiary"]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-border-initial\n      );\n    --sinch-local-color-outline-focus:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-outline-focus\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-text-initial\n      );\n    --sinch-local-color-icon:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-icon-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-initial);\n  }\n\n  :host([type="subtle-secondary"]) > #button,\n  /* default type for icon-button */\n  :host(:not([type]):is([text=""], :not([text]))) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-border-initial\n      );\n    --sinch-local-color-outline-focus:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-outline-focus\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-text-initial\n      );\n    --sinch-local-color-icon:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-icon-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-initial);\n  }\n\n  :host([type="cta-primary"]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-primary-default-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-cta-primary-default-border-initial\n      );\n    --sinch-local-color-outline-focus:\n      var(\n        --sinch-comp-button-color-cta-primary-default-outline-focus\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-cta-primary-default-text-initial\n      );\n    --sinch-local-color-icon:\n      var(\n        --sinch-comp-button-color-cta-primary-default-icon-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-primary-initial);\n  }\n\n  :host([type="cta-secondary"]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-border-initial\n      );\n    --sinch-local-color-outline-focus:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-outline-focus\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-text-initial\n      );\n    --sinch-local-color-icon:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-icon-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-secondary-initial);\n  }\n\n  :host([type="destructive"]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-danger-default-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-danger-default-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-danger-default-text-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-danger-initial);\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-danger-default-icon-initial\n      );\n  }\n\n  :host([type="primary"]:focus-visible) > #button {\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-primary-focus);\n  }\n\n  /* default type */\n  :host(:not([type]):focus-visible) > #button,\n  :host([type="secondary"]:focus-visible) > #button {\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-secondary-focus);\n  }\n\n  :host([type="subtle-primary"]:focus-visible) > #button,\n  /* deprecated */\n  :host([type="tertiary"]:focus-visible) > #button {\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-focus);\n  }\n\n  :host([type="subtle-secondary"]:focus-visible) > #button,\n  /* default type for icon-button */\n  :host(:not([type]):is([text=""], :not([text])):focus-visible) > #button {\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-focus);\n  }\n\n  :host([type="cta-primary"]:focus-visible) > #button {\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-primary-focus);\n  }\n\n  :host([type="cta-secondary"]:focus-visible) > #button {\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-secondary-focus);\n  }\n\n  :host([type="destructive"]:focus-visible) > #button {\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-danger-focus);\n  }\n\n  /* Toggled state */\n  :host([toggled]:not([disabled])[type="subtle-primary"]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-primary-toggled-background-initial\n      );\n  }\n\n  :host([toggled]:not([disabled])[type="subtle-secondary"]) > #button,\n  /* default type for icon-button */\n  :host([toggled]:not([disabled]):not([type]):is([text=""], :not([text]))) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-secondary-toggled-background-initial\n      );\n  }\n\n  /* Hover / Active */\n  :host([type="primary"]:hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-primary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-primary-hover);\n  }\n\n  :host([type="primary"]:active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-primary-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-primary-active);\n  }\n\n  /* default type */\n  :host(:not([type]):hover) > #button,\n  :host([type="secondary"]:hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-secondary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-secondary-hover);\n  }\n\n  /* default type */\n  :host(:not([type]):active) > #button,\n  :host([type="secondary"]:active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-secondary-default-background-active\n      );\n  }\n\n  /* deprecated */\n  :host([type="tertiary"]:hover) > #button,\n  :host([type="subtle-primary"]:hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-hover);\n  }\n\n  /* deprecated */\n  :host([type="tertiary"]:active) > #button,\n  :host([type="subtle-primary"]:active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-active);\n  }\n\n  :host([type="subtle-secondary"]:hover) > #button,\n  /* default type for icon-button */\n  :host(:not([type]):is([text=""], :not([text])):hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-hover);\n  }\n\n  :host([type="subtle-secondary"]:active) > #button,\n  /* default type for icon-button */\n  :host(:not([type]):is([text=""], :not([text])):active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-active);\n  }\n\n  :host([type="cta-primary"]:hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-primary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-primary-hover);\n  }\n\n  :host([type="cta-primary"]:active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-primary-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-primary-active);\n  }\n\n  :host([type="cta-secondary"]:hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-secondary-hover);\n  }\n\n  :host([type="cta-secondary"]:active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-secondary-active);\n  }\n\n  :host([type="destructive"]:hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-danger-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-danger-hover);\n  }\n\n  :host([type="destructive"]:active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-danger-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-danger-active);\n  }\n\n  /* Toggled + Hover / Active */\n  :host([toggled]:not([disabled])[type="subtle-primary"]:hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-hover);\n  }\n\n  :host([toggled]:not([disabled])[type="subtle-primary"]:active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-active);\n  }\n\n  :host([toggled]:not([disabled])[type="subtle-secondary"]:hover) > #button,\n  /* default type for icon-button */\n  :host([toggled]:not([disabled]):not([type]):is([text=""], :not([text])):hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-hover);\n  }\n\n  :host([toggled]:not([disabled])[type="subtle-secondary"]:active) > #button,\n  /* default type for icon-button */\n  :host([toggled]:not([disabled]):not([type]):is([text=""], :not([text])):active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-active);\n  }\n\n  /* Disabled state */\n  :host([type="primary"][disabled]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-primary-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-primary-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-primary-disabled-text-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-primary-disabled);\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-primary-disabled-icon-initial\n      );\n  }\n\n  /* default type */\n  :host(:not([type])[disabled]) > #button,\n  :host([type="secondary"][disabled]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-secondary-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-secondary-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-secondary-disabled-text-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-secondary-disabled);\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-secondary-disabled-icon-initial\n      );\n  }\n\n  :host([type="subtle-primary"][disabled]) > #button,\n  /* deprecated */\n  :host([type="tertiary"][disabled]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-primary-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-subtle-primary-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-subtle-primary-disabled-text-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-disabled);\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-subtle-primary-disabled-icon-initial\n      );\n  }\n\n  :host([type="subtle-secondary"][disabled]) > #button,\n  /* default type for icon-button */\n  :host(:not([type]):is([text=""], :not([text]))[disabled]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-secondary-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-subtle-secondary-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-subtle-secondary-disabled-text-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-disabled);\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-subtle-secondary-disabled-icon-initial\n      );\n  }\n\n  :host([type="cta-primary"][disabled]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-primary-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-cta-primary-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-cta-primary-disabled-text-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-primary-disabled);\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-cta-primary-disabled-icon-initial\n      );\n  }\n\n  :host([type="cta-secondary"][disabled]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-secondary-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-cta-secondary-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-cta-secondary-disabled-text-initial\n      );\n    --sinch-local-shadow:\n      var(\n        --sinch-comp-button-shadow-cta-secondary-disabled\n      );\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-cta-secondary-disabled-icon-initial\n      );\n  }\n\n  :host([type="destructive"][disabled]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-danger-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-danger-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-danger-disabled-text-initial\n      );\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-danger-disabled-icon-initial\n      );\n  }\n\n  /* Border / Background */\n  #button::before {\n    content: "";\n    position: absolute;\n    inset: 0;\n    background-color: var(--sinch-local-color-background);\n    border-top: var(--sinch-button-border-top);\n    border-bottom: var(--sinch-button-border-bottom);\n    border-right: var(--sinch-button-border-right);\n    border-left: var(--sinch-button-border-left);\n    border-color: var(--sinch-local-color-border);\n    border-top-right-radius:\n      var(\n        --sinch-button-shape-radius-top-right,\n        var(\n          --sinch-button-set-size-shape-radius,\n          var(--sinch-button-shape-radius-base)\n        )\n      );\n    border-top-left-radius:\n      var(\n        --sinch-button-shape-radius-top-left,\n        var(\n          --sinch-button-set-size-shape-radius,\n          var(--sinch-button-shape-radius-base)\n        )\n      );\n    border-bottom-right-radius:\n      var(\n        --sinch-button-shape-radius-bottom-right,\n        var(\n          --sinch-button-set-size-shape-radius,\n          var(--sinch-button-shape-radius-base)\n        )\n      );\n    border-bottom-left-radius:\n      var(\n        --sinch-button-shape-radius-bottom-left,\n        var(\n          --sinch-button-set-size-shape-radius,\n          var(--sinch-button-shape-radius-base)\n        )\n      );\n    box-shadow: var(--sinch-local-shadow);\n    pointer-events: none;\n  }\n\n  :host(:not([disabled]):active) #button::before {\n    border-width: 2px;\n  }\n\n  /* Focus Outline */\n  :host(:focus-visible) #button::after {\n    position: absolute;\n    content: "";\n    inset: -3px;\n    border: 2px solid var(--sinch-local-color-outline-focus);\n    border-top-right-radius:\n      calc(\n        var(\n          --sinch-button-shape-radius-top-right,\n          var(\n            --sinch-button-set-size-shape-radius,\n            var(--sinch-button-shape-radius-base)\n          )\n        ) + 3px\n      );\n    border-top-left-radius:\n      calc(\n        var(\n          --sinch-button-shape-radius-top-left,\n          var(\n            --sinch-button-set-size-shape-radius,\n            var(--sinch-button-shape-radius-base)\n          )\n        ) + 3px\n      );\n    border-bottom-right-radius:\n      calc(\n        var(\n          --sinch-button-shape-radius-bottom-right,\n          var(\n            --sinch-button-set-size-shape-radius,\n            var(--sinch-button-shape-radius-base)\n          )\n        ) + 3px\n      );\n    border-bottom-left-radius:\n      calc(\n        var(\n          --sinch-button-shape-radius-bottom-left,\n          var(\n            --sinch-button-set-size-shape-radius,\n            var(--sinch-button-shape-radius-base)\n          )\n        ) + 3px\n      );\n    pointer-events: none;\n  }\n\n  #content {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    width: 100%;\n    height: 100%;\n    padding: 0 var(--sinch-local-padding);\n    box-sizing: border-box;\n    pointer-events: none;\n    overflow: hidden;\n  }\n\n  #text {\n    font: var(--sinch-local-font);\n    color: var(--sinch-local-color-text);\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    flex-shrink: 1;\n    min-width: 0;\n  }\n\n  /* icon-button */\n  :host(:is([text=""], :not([text]))) :is(#left-icon, #right-icon, #text) {\n    display: none;\n  }\n\n  ::slotted(*) {\n    display: block;\n  }\n</style>\n\n<div id="button" inert>\n  <div id="content">\n    <slot id="left-icon" name="left-icon"></slot>\n    <slot id="icon" name="icon"></slot>\n    <span id="text"></span>\n    <slot id="right-icon" name="right-icon"></slot>\n  </div>\n</div>\n';
-const template = document.createElement("template");
+import { defineCustomElement, getBooleanAttribute, getAttribute, isAttrTrue, updateBooleanAttribute, updateAttribute, NectaryElement, getReactEventHandler, getLiteralAttribute, updateLiteralAttribute, Context, subscribeContext, isAttrEqual } from '../utils';
+import { requestSubmitForm } from '../utils/form';
+import { DEFAULT_SIZE, sizeExValues } from '../utils/size';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer;user-select:none;--sinch-button-shape-radius-base:var(--sinch-comp-button-shape-radius-size-m);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-initial);--sinch-button-border:1px solid;--sinch-button-border-top:var(--sinch-button-border);--sinch-button-border-bottom:var(--sinch-button-border);--sinch-button-border-left:var(--sinch-button-border);--sinch-button-border-right:var(--sinch-button-border);--sinch-button-shape-radius-top-right:unset;--sinch-button-shape-radius-top-left:unset;--sinch-button-shape-radius-bottom-right:unset;--sinch-button-shape-radius-bottom-left:unset}:host([disabled]){cursor:initial}#button{all:initial;display:block;position:relative;width:100%;height:var(--sinch-local-size);user-select:none;--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-padding:16px;--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m);--sinch-global-color-icon:var(--sinch-local-color-icon)}:host([data-size="l"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-l);--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-l);--sinch-local-font:var(--sinch-comp-button-font-size-l-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-l)}:host([data-size="m"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-m);--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m)}:host([data-size="s"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-s);--sinch-local-font:var(--sinch-comp-button-font-size-s-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-s)}:host([data-size=xs])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-xs);--sinch-local-padding:8px;--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-xs);--sinch-local-font:var(--sinch-comp-button-font-size-s-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-xs)}:host(:is([text=""],:not([text])))>#button{--sinch-local-padding:8px}:host([data-size="s"]:is([text=""],:not([text])))>#button{--sinch-local-padding:4px}:host([data-size=xs]:is([text=""],:not([text])))>#button{--sinch-local-padding:4px}:host([type=primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-primary-default-icon-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-primary-default-outline-focus);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-initial)}:host(:not([type]))>#button,:host([type=secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-secondary-default-icon-initial)}:host([type=subtle-primary])>#button,:host([type=tertiary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-primary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-subtle-primary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-initial)}:host(:not([type]):is([text=""],:not([text])))>#button,:host([type=subtle-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-subtle-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-initial)}:host([type=cta-primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-primary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-initial)}:host([type=cta-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-initial)}:host([type=destructive])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-default-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-default-icon-initial)}:host([type=primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host(:not([type]):focus-visible)>#button,:host([type=secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=subtle-primary]:focus-visible)>#button,:host([type=tertiary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host(:not([type]):is([text=""],:not([text])):focus-visible)>#button,:host([type=subtle-secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=cta-primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-focus)}:host([type=cta-secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-focus)}:host([type=destructive]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-focus)}:host([toggled]:not([disabled])[type=subtle-primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-toggled-background-initial)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])))>#button,:host([toggled]:not([disabled])[type=subtle-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-toggled-background-initial)}:host([type=primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-hover)}:host([type=primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-active)}:host(:not([type]):hover)>#button,:host([type=secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-hover)}:host(:not([type]):active)>#button,:host([type=secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active)}:host([type=subtle-primary]:hover)>#button,:host([type=tertiary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([type=subtle-primary]:active)>#button,:host([type=tertiary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host(:not([type]):is([text=""],:not([text])):hover)>#button,:host([type=subtle-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host(:not([type]):is([text=""],:not([text])):active)>#button,:host([type=subtle-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([type=cta-primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-hover)}:host([type=cta-primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-active)}:host([type=cta-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-hover)}:host([type=cta-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-active)}:host([type=destructive]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-hover)}:host([type=destructive]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-active)}:host([toggled]:not([disabled])[type=subtle-primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([toggled]:not([disabled])[type=subtle-primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])):hover)>#button,:host([toggled]:not([disabled])[type=subtle-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])):active)>#button,:host([toggled]:not([disabled])[type=subtle-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([type=primary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-primary-disabled-icon-initial)}:host(:not([type])[disabled])>#button,:host([type=secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-secondary-disabled-icon-initial)}:host([type=subtle-primary][disabled])>#button,:host([type=tertiary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-subtle-primary-disabled-icon-initial)}:host(:not([type]):is([text=""],:not([text]))[disabled])>#button,:host([type=subtle-secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-subtle-secondary-disabled-icon-initial)}:host([type=cta-primary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-primary-disabled-icon-initial)}:host([type=cta-secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-secondary-disabled-icon-initial)}:host([type=destructive][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-disabled-icon-initial)}#button::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-color-background);border-top:var(--sinch-button-border-top);border-bottom:var(--sinch-button-border-bottom);border-right:var(--sinch-button-border-right);border-left:var(--sinch-button-border-left);border-color:var(--sinch-local-color-border);border-top-right-radius:var(--sinch-button-shape-radius-top-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));border-top-left-radius:var(--sinch-button-shape-radius-top-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));border-bottom-right-radius:var(--sinch-button-shape-radius-bottom-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));border-bottom-left-radius:var(--sinch-button-shape-radius-bottom-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));box-shadow:var(--sinch-local-shadow);pointer-events:none}:host(:not([disabled]):active) #button::before{border-width:2px}:host(:focus-visible) #button::after{position:absolute;content:"";inset:-3px;border:2px solid var(--sinch-local-color-outline-focus);border-top-right-radius:calc(var(--sinch-button-shape-radius-top-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);border-top-left-radius:calc(var(--sinch-button-shape-radius-top-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);border-bottom-right-radius:calc(var(--sinch-button-shape-radius-bottom-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);border-bottom-left-radius:calc(var(--sinch-button-shape-radius-bottom-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;padding:0 var(--sinch-local-padding);box-sizing:border-box;pointer-events:none;overflow:hidden}#text{font:var(--sinch-local-font);color:var(--sinch-local-color-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0}:host(:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#text){display:none}::slotted(*){display:block}</style><div id="button" inert><div id="content"><slot id="left-icon" name="left-icon"></slot><slot id="icon" name="icon"></slot><span id="text"></span><slot id="right-icon" name="right-icon"></slot></div></div>';
+import { typeValues, formTypeValues } from './utils';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class Button extends NectaryElement {
+export class Button extends NectaryElement {
   #$button;
   #$text;
   #controller = null;
@@ -20,25 +17,41 @@ class Button extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#internals = this.attachInternals();
-    this.#$button = shadowRoot.querySelector("#button");
-    this.#$text = shadowRoot.querySelector("#text");
-    this.#sizeContext = new Context(this.#$button, "size");
+    this.#$button = shadowRoot.querySelector('#button');
+    this.#$text = shadowRoot.querySelector('#text');
+    this.#sizeContext = new Context(this.#$button, 'size');
   }
   connectedCallback() {
     super.connectedCallback();
     this.#controller = new AbortController();
-    const { signal } = this.#controller;
-    this.setAttribute("role", "button");
-    this.#internals.role = "button";
+    const {
+      signal
+    } = this.#controller;
+    this.setAttribute('role', 'button');
+    this.#internals.role = 'button';
     this.tabIndex = 0;
-    this.addEventListener("click", this.#onButtonClick, { signal });
-    this.addEventListener("focus", this.#onButtonFocus, { signal });
-    this.addEventListener("blur", this.#onButtonBlur, { signal });
-    this.addEventListener("keydown", this.#onButtonKeydown, { signal });
-    this.addEventListener("-click", this.#onClickReactHandler, { signal });
-    this.addEventListener("-focus", this.#onFocusReactHandler, { signal });
-    this.addEventListener("-blur", this.#onBlurReactHandler, { signal });
-    subscribeContext(this, "size", this.#onContextSize, signal);
+    this.addEventListener('click', this.#onButtonClick, {
+      signal
+    });
+    this.addEventListener('focus', this.#onButtonFocus, {
+      signal
+    });
+    this.addEventListener('blur', this.#onButtonBlur, {
+      signal
+    });
+    this.addEventListener('keydown', this.#onButtonKeydown, {
+      signal
+    });
+    this.addEventListener('-click', this.#onClickReactHandler, {
+      signal
+    });
+    this.addEventListener('-focus', this.#onFocusReactHandler, {
+      signal
+    });
+    this.addEventListener('-blur', this.#onBlurReactHandler, {
+      signal
+    });
+    subscribeContext(this, 'size', this.#onContextSize, signal);
     this.#sizeContext.listen(signal);
     this.#onSizeUpdate();
   }
@@ -48,151 +61,148 @@ class Button extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return [
-      "text",
-      "disabled",
-      "toggled",
-      "size",
-      "data-size"
-    ];
+    return ['text', 'disabled', 'toggled', 'size', 'data-size'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case "text": {
-        this.#$text.textContent = newVal;
-        break;
-      }
-      case "disabled": {
-        if (!isAttrEqual(oldVal, newVal)) {
-          updateBooleanAttribute(this, "disabled", isAttrTrue(newVal));
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
         }
-        this.ariaDisabled = isAttrTrue(newVal).toString();
-        this.#internals.ariaDisabled = isAttrTrue(newVal).toString();
-        break;
-      }
-      case "toggled": {
-        if (!isAttrEqual(oldVal, newVal)) {
-          updateBooleanAttribute(this, "toggled", isAttrTrue(newVal));
+      case 'disabled':
+        {
+          if (!isAttrEqual(oldVal, newVal)) {
+            updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
+          }
+          this.ariaDisabled = isAttrTrue(newVal).toString();
+          this.#internals.ariaDisabled = isAttrTrue(newVal).toString();
+          break;
+        }
+      case 'toggled':
+        {
+          if (!isAttrEqual(oldVal, newVal)) {
+            updateBooleanAttribute(this, 'toggled', isAttrTrue(newVal));
+          }
+          this.ariaPressed = isAttrTrue(newVal).toString();
+          this.#internals.ariaPressed = isAttrTrue(newVal).toString();
+          break;
+        }
+      case 'size':
+        {
+          updateAttribute(this, 'data-size', newVal);
+          break;
+        }
+      case 'data-size':
+        {
+          this.#onSizeUpdate();
+          break;
         }
-        this.ariaPressed = isAttrTrue(newVal).toString();
-        this.#internals.ariaPressed = isAttrTrue(newVal).toString();
-        break;
-      }
-      case "size": {
-        updateAttribute(this, "data-size", newVal);
-        break;
-      }
-      case "data-size": {
-        this.#onSizeUpdate();
-        break;
-      }
     }
   }
   set type(value) {
-    updateLiteralAttribute(this, typeValues, "type", value);
+    updateLiteralAttribute(this, typeValues, 'type', value);
   }
   get type() {
-    return getLiteralAttribute(this, typeValues, "type", "primary");
+    return getLiteralAttribute(this, typeValues, 'type', 'primary');
   }
   set text(value) {
-    updateAttribute(this, "text", value);
+    updateAttribute(this, 'text', value);
   }
   get text() {
-    return getAttribute(this, "text", "");
+    return getAttribute(this, 'text', '');
   }
   set disabled(isDisabled) {
-    updateBooleanAttribute(this, "disabled", isDisabled);
+    updateBooleanAttribute(this, 'disabled', isDisabled);
   }
   get disabled() {
-    return getBooleanAttribute(this, "disabled");
+    return getBooleanAttribute(this, 'disabled');
   }
   set toggled(isToggled) {
-    updateBooleanAttribute(this, "toggled", isToggled);
+    updateBooleanAttribute(this, 'toggled', isToggled);
   }
   get toggled() {
-    return getBooleanAttribute(this, "toggled");
+    return getBooleanAttribute(this, 'toggled');
   }
   set size(size) {
-    updateLiteralAttribute(this, sizeExValues, "size", size);
+    updateLiteralAttribute(this, sizeExValues, 'size', size);
   }
   get size() {
-    return getLiteralAttribute(this, sizeExValues, "size", DEFAULT_SIZE);
+    return getLiteralAttribute(this, sizeExValues, 'size', DEFAULT_SIZE);
   }
   get focusable() {
     return true;
   }
   set formType(value) {
-    updateLiteralAttribute(this, formTypeValues, "form-type", value);
+    updateLiteralAttribute(this, formTypeValues, 'form-type', value);
   }
   get formType() {
-    return getLiteralAttribute(this, formTypeValues, "form-type", "button");
+    return getLiteralAttribute(this, formTypeValues, 'form-type', 'button');
   }
   #onSizeUpdate() {
     if (!this.isDomConnected) {
       return;
     }
-    const size = getAttribute(this, "data-size", DEFAULT_SIZE);
+    const size = getAttribute(this, 'data-size', DEFAULT_SIZE);
     this.#sizeContext.dispatch(size);
   }
-  #onContextSize = (e) => {
-    if (this.hasAttribute("size") === true) {
+  #onContextSize = e => {
+    if (this.hasAttribute('size')) {
       return;
     }
     switch (e.detail) {
-      case "l": {
-        this.setAttribute("data-size", "m");
-        break;
-      }
-      default: {
-        this.setAttribute("data-size", "s");
-      }
+      case 'l':
+        {
+          this.setAttribute('data-size', 'm');
+          break;
+        }
+      default:
+        {
+          this.setAttribute('data-size', 's');
+        }
     }
   };
-  #onButtonKeydown = (e) => {
+  #onButtonKeydown = e => {
     switch (e.code) {
-      case "Space":
-      case "Enter": {
-        e.preventDefault();
-        this.click();
-      }
+      case 'Space':
+      case 'Enter':
+        {
+          e.preventDefault();
+          this.click();
+        }
     }
   };
-  #onButtonClick = (e) => {
+  #onButtonClick = e => {
     if (this.disabled) {
       e.stopPropagation();
       e.preventDefault();
     } else {
       const form = this.#internals.form;
       if (form !== null) {
-        if (this.formType === "submit") {
+        if (this.formType === 'submit') {
           requestSubmitForm(form, this);
         }
-        if (this.formType === "reset") {
+        if (this.formType === 'reset') {
           form.reset();
         }
       }
-      this.dispatchEvent(
-        new CustomEvent("-click")
-      );
+      this.dispatchEvent(new CustomEvent('-click'));
     }
   };
   #onButtonFocus = () => {
-    this.dispatchEvent(new CustomEvent("-focus"));
+    this.dispatchEvent(new CustomEvent('-focus'));
   };
   #onButtonBlur = () => {
-    this.dispatchEvent(new CustomEvent("-blur"));
+    this.dispatchEvent(new CustomEvent('-blur'));
   };
   #onFocusReactHandler = () => {
-    getReactEventHandler(this, "on-focus")?.();
+    getReactEventHandler(this, 'on-focus')?.();
   };
   #onBlurReactHandler = () => {
-    getReactEventHandler(this, "on-blur")?.();
+    getReactEventHandler(this, 'on-blur')?.();
   };
-  #onClickReactHandler = (e) => {
-    getReactEventHandler(this, "on-click")?.(e);
+  #onClickReactHandler = e => {
+    getReactEventHandler(this, 'on-click')?.(e);
   };
 }
-defineCustomElement("sinch-button", Button);
-export {
-  Button
-};
+defineCustomElement('sinch-button', Button);

package/button/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 import type { TSinchSizeEx } from '../utils/size';
 export type TSinchButtonFormType = 'submit' | 'reset' | 'button';
 export type TSinchButtonType = 'primary' | 'secondary'
@@ -161,23 +161,3 @@ export type TSinchButton = {
 };
 export type TSinchButtonElement = NectaryComponentVanillaByType<TSinchButton>;
 export type TSinchButtonReact = NectaryComponentReactByType<TSinchButton>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-button': TSinchButton;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-button': NectaryComponentVanilla<'sinch-button'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-button': NectaryComponentReact<'sinch-button'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-button': NectaryComponentReact<'sinch-button'>;
-        }
-    }
-}

package/button/types.js

@@ -1 +1 @@
-
+export {};

package/button/utils.js

@@ -1,18 +1,2 @@
-const typeValues = [
-  "primary",
-  "secondary",
-  "subtle-primary",
-  "subtle-secondary",
-  "cta-primary",
-  "cta-secondary",
-  "destructive"
-];
-const formTypeValues = [
-  "submit",
-  "reset",
-  "button"
-];
-export {
-  formTypeValues,
-  typeValues
-};
+export const typeValues = ['primary', 'secondary', 'subtle-primary', 'subtle-secondary', 'cta-primary', 'cta-secondary', 'destructive'];
+export const formTypeValues = ['submit', 'reset', 'button'];

package/button-group/index.d.ts

@@ -1,7 +1,8 @@
 import { NectaryElement } from '../utils';
+import type { TSinchButtonGroup } from './types';
 import type { TSinchButtonType } from '../button/types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 import type { TSinchSizeEx } from '../utils/size';
-export * from './types';
 export declare class ButtonGroup extends NectaryElement {
     #private;
     constructor();
@@ -13,3 +14,23 @@ export declare class ButtonGroup extends NectaryElement {
     get size(): TSinchSizeEx;
     connectedCallback(): void;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-button-group': TSinchButtonGroup;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-button-group': NectaryComponentVanilla<'sinch-button-group'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-button-group': NectaryComponentReact<'sinch-button-group'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-button-group': NectaryComponentReact<'sinch-button-group'>;
+        }
+    }
+}

package/button-group/index.js

@@ -1,52 +1,50 @@
-import { typeValues } from "../button/utils.js";
-import { updateLiteralAttribute, getLiteralAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { sizeExValues, DEFAULT_SIZE } from "../utils/size.js";
-const templateHTML = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    display: flex;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n  }\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
-const template = document.createElement("template");
+import { typeValues } from '../button/utils';
+import { NectaryElement, defineCustomElement, getLiteralAttribute, updateLiteralAttribute } from '../utils';
+import { DEFAULT_SIZE, sizeExValues } from '../utils/size';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;box-sizing:border-box;width:100%;height:100%}</style><div id="wrapper"><slot></slot></div>';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class ButtonGroup extends NectaryElement {
+export class ButtonGroup extends NectaryElement {
   #$slot;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$slot = shadowRoot.querySelector("slot");
+    this.#$slot = shadowRoot.querySelector('slot');
   }
   static get observedAttributes() {
-    return ["size", "type"];
+    return ['size', 'type'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case "size":
+      case 'size':
         for (const $option of this.#$slot.assignedElements()) {
           updateLiteralAttribute($option, sizeExValues, name, newVal);
         }
         break;
-      case "type":
+      case 'type':
         for (const $option of this.#$slot.assignedElements()) {
           updateLiteralAttribute($option, typeValues, name, newVal);
         }
         break;
+      default:
+        break;
     }
   }
   set type(value) {
-    updateLiteralAttribute(this, typeValues, "type", value);
+    updateLiteralAttribute(this, typeValues, 'type', value);
   }
   get type() {
-    return getLiteralAttribute(this, typeValues, "type", "primary");
+    return getLiteralAttribute(this, typeValues, 'type', 'primary');
   }
   set size(size) {
-    updateLiteralAttribute(this, sizeExValues, "size", size);
+    updateLiteralAttribute(this, sizeExValues, 'size', size);
   }
   get size() {
-    return getLiteralAttribute(this, sizeExValues, "size", DEFAULT_SIZE);
+    return getLiteralAttribute(this, sizeExValues, 'size', DEFAULT_SIZE);
   }
   connectedCallback() {
-    this.setAttribute("role", "group");
+    this.setAttribute('role', 'group');
   }
 }
-defineCustomElement("sinch-button-group", ButtonGroup);
-export {
-  ButtonGroup
-};
+defineCustomElement('sinch-button-group', ButtonGroup);

package/button-group/types.d.ts

@@ -1,5 +1,6 @@
-import type { TSinchButtonProps } from '../button/types';
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { TSinchButtonProps, TSinchButtonReact } from '../button/types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export { TSinchButtonReact };
 export type TSinchButtonGroupProps = {
     size?: TSinchButtonProps['size'];
     type?: TSinchButtonProps['type'];
@@ -10,23 +11,3 @@ export type TSinchButtonGroup = {
 };
 export type TSinchButtonGroupElement = NectaryComponentVanillaByType<TSinchButtonGroup>;
 export type TSinchButtonGroupReact = NectaryComponentReactByType<TSinchButtonGroup>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-button-group': TSinchButtonGroup;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-button-group': NectaryComponentVanilla<'sinch-button-group'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-button-group': NectaryComponentReact<'sinch-button-group'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-button-group': NectaryComponentReact<'sinch-button-group'>;
-        }
-    }
-}

package/button-group/types.js

@@ -1 +1 @@
-
+export {};

package/button-group-item/index.d.ts

@@ -1,6 +1,6 @@
 import { NectaryElement } from '../utils';
-import type { NectaryComponentVanilla } from '../types';
-export * from './types';
+import type { TSinchButtonGroupItem } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class ButtonGroupItem extends NectaryElement {
     #private;
     constructor();
@@ -15,3 +15,23 @@ export declare class ButtonGroupItem extends NectaryElement {
     get toggled(): boolean;
     get focusable(): boolean;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-button-group-item': TSinchButtonGroupItem;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-button-group-item': NectaryComponentVanilla<'sinch-button-group-item'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-button-group-item': NectaryComponentReact<'sinch-button-group-item'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-button-group-item': NectaryComponentReact<'sinch-button-group-item'>;
+        }
+    }
+}