@nectary/components 5.43.0 → 5.44.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/bundle.js +76 -18
  2. package/color-swatch/index.js +14 -0
  3. package/link/index.d.ts +3 -0
  4. package/link/index.js +47 -2
  5. package/link/types.d.ts +19 -1
  6. package/package.json +1 -1
package/bundle.js CHANGED
@@ -1181,6 +1181,9 @@ class CodeTag extends NectaryElement {
1181
1181
  }
1182
1182
  }
1183
1183
  defineCustomElement("sinch-code-tag", CodeTag);
1184
+ const DEFAULT_SIZE = "m";
1185
+ const sizeValues$1 = ["l", "m", "s"];
1186
+ const sizeExValues = [...sizeValues$1, "xs"];
1184
1187
  const linkTypeValues = [
1185
1188
  "primary",
1186
1189
  "secondary",
@@ -1190,7 +1193,7 @@ const linkTypeValues = [
1190
1193
  "cta-secondary",
1191
1194
  "destructive"
1192
1195
  ];
1193
- const templateHTML$1c = '<style>:host{display:inline}:host(:not([type])) a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}:host(:not([type])) a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}:host(:not([type])) a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host(:not([type])[standalone]){display:block}:host(:not([type])[standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host(:not([type])[external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host(:not([type])[standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host(:not([type])[standalone]) #icon-prefix{display:inline}:host(:not([type])[standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host(:not([type])[disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}:host(:not([type])) button{display:none;border:none;background:0 0;padding:0;margin:0;cursor:pointer;font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap}:host(:not([type])) button:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover)}:host(:not([type])) button:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host(:not([type])[disabled]) button{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled)}#button-content{white-space:var(--sinch-global-text-white-space,normal)}:host([preventdefault]:not([use-history])) a{display:none}:host([preventdefault]:not([use-history])) button{display:inline}:host([type]){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-button-set-size-shape-radius: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;--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-m, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-m, 12px);--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m)}:host([type][disabled]){cursor:initial}:host([type]) a,:host([type]) button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--sinch-local-size);padding:0 var(--sinch-local-padding);border:none;margin:0;background:0 0;text-decoration:none;white-space:nowrap;cursor:pointer;font:inherit;color:inherit}:host([type]) a::before,:host([type]) 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([type]:not([disabled]):active) a::before,:host([type]:not([disabled]):active) button::before{border-width:2px}:host([type]) a:focus-visible,:host([type]) button:focus-visible{outline:0}:host([type]) a:focus-visible::after,:host([type]) button:focus-visible::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}:host([type]) #button-content,:host([type]) #content{position:relative;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([type]) #external-icon,:host([type]) #icon-prefix,:host([type]) #standalone-icon{display:none}:host([type][disabled]) a,:host([type][disabled]) button{pointer-events:none;cursor:initial}:host([type=primary]){--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([type=secondary]){--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]){--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([type=subtle-secondary]){--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]){--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]){--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]){--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-color-outline-focus:var(--sinch-comp-button-color-danger-default-outline-focus);--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){--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host([type=secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=subtle-primary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=subtle-secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=cta-primary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-focus)}:host([type=cta-secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-focus)}:host([type=destructive]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-focus)}:host([type=primary]:hover){--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){--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-active)}:host([type=secondary]:hover){--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-hover)}:host([type=secondary]:active){--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active)}:host([type=subtle-primary]:hover){--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){--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([type=subtle-secondary]:hover){--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([type=subtle-secondary]:active){--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){--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){--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){--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){--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){--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){--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-active)}:host([type=primary][disabled]){--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([type=secondary][disabled]){--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]){--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([type=subtle-secondary][disabled]){--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]){--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]){--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]){--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)}:host([type]) button{display:none}:host([type][preventdefault]:not([use-history])) a{display:none}:host([type][preventdefault]:not([use-history])) button{display:inline-flex}</style><a referrerpolicy="no-referer"><span id="content"></span> <span id="icon-prefix">&nbsp;</span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a><button type="button"><span id="button-content"></span></button>';
1196
+ const templateHTML$1c = '<style>:host{display:inline}:host(:not([type])) a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}:host(:not([type])) a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}:host(:not([type])) a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host(:not([type])[standalone]){display:block}:host(:not([type])[standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host(:not([type])[external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host(:not([type])[standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host(:not([type])[standalone]) #icon-prefix{display:inline}:host(:not([type])[standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host(:not([type])[disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}:host(:not([type])) button{display:none;border:none;background:0 0;padding:0;margin:0;cursor:pointer;font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap}:host(:not([type])) button:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover)}:host(:not([type])) button:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host(:not([type])[disabled]) button{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled)}#button-content{white-space:var(--sinch-global-text-white-space,normal)}:host(:not([type])) :is(#left-icon,#icon,#right-icon){display:none}:host([preventdefault]:not([use-history])) a{display:none}:host([preventdefault]:not([use-history])) button{display:inline}:host([type]){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-button-set-size-shape-radius: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;--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-m, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-m, 12px);--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([type][size="l"]){--sinch-local-size:var(--sinch-comp-button-size-container-l);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-l, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-l, 12px);--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([type][size="m"]){--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-m, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-m, 12px);--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([type][size="s"]){--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-s, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-s, 12px);--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([type][size=xs]){--sinch-local-size:var(--sinch-comp-button-size-container-xs);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-xs, 8px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-xs, 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([type][disabled]){cursor:initial}:host([type]) a,:host([type]) button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sinch-local-gap);box-sizing:border-box;min-height:var(--sinch-local-size);padding:0 var(--sinch-local-padding);border:none;margin:0;background:0 0;text-decoration:none;white-space:nowrap;cursor:pointer;font:inherit;color:inherit}:host([type]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-m, 8px)}:host([type][size="l"]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-l, 8px)}:host([type][size="s"]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-s, 4px)}:host([type][size=xs]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-xs, 4px)}:host([type]:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#content,#button-content){display:none}:host([type]) ::slotted(*){display:block;position:relative}:host([type]) a::before,:host([type]) 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([type]:not([disabled]):active) a::before,:host([type]:not([disabled]):active) button::before{border-width:2px}:host([type]) a:focus-visible,:host([type]) button:focus-visible{outline:0}:host([type]) a:focus-visible::after,:host([type]) button:focus-visible::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}:host([type]) #button-content,:host([type]) #content{position:relative;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([type]) #external-icon,:host([type]) #icon-prefix,:host([type]) #standalone-icon{display:none}:host([type][disabled]) a,:host([type][disabled]) button{pointer-events:none;cursor:initial}:host([type=primary]){--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([type=secondary]){--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]){--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([type=subtle-secondary]){--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]){--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]){--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]){--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-color-outline-focus:var(--sinch-comp-button-color-danger-default-outline-focus);--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){--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host([type=secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=subtle-primary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=subtle-secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=cta-primary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-focus)}:host([type=cta-secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-focus)}:host([type=destructive]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-focus)}:host([type=primary]:hover){--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){--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-active)}:host([type=secondary]:hover){--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-hover)}:host([type=secondary]:active){--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active)}:host([type=subtle-primary]:hover){--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){--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([type=subtle-secondary]:hover){--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([type=subtle-secondary]:active){--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){--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){--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){--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){--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){--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){--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-active)}:host([type=primary][disabled]){--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([type=secondary][disabled]){--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]){--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([type=subtle-secondary][disabled]){--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]){--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]){--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]){--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)}:host([type]) button{display:none}:host([type][preventdefault]:not([use-history])) a{display:none}:host([type][preventdefault]:not([use-history])) button{display:inline-flex}</style><a referrerpolicy="no-referer"><slot id="left-icon" name="left-icon"></slot><slot id="icon" name="icon"></slot><span id="content"></span><slot id="right-icon" name="right-icon"></slot><span id="icon-prefix">&nbsp;</span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a><button type="button"><span id="button-content"></span></button>';
1194
1197
  const template$1c = document.createElement("template");
1195
1198
  template$1c.innerHTML = templateHTML$1c;
1196
1199
  class Link extends NectaryElement {
@@ -1198,6 +1201,9 @@ class Link extends NectaryElement {
1198
1201
  #$text;
1199
1202
  #$button;
1200
1203
  #$buttonText;
1204
+ #$leftIconSlot;
1205
+ #$iconSlot;
1206
+ #$rightIconSlot;
1201
1207
  constructor() {
1202
1208
  super();
1203
1209
  const shadowRoot = this.attachShadow();
@@ -1206,6 +1212,9 @@ class Link extends NectaryElement {
1206
1212
  this.#$text = shadowRoot.querySelector("#content");
1207
1213
  this.#$button = shadowRoot.querySelector("button");
1208
1214
  this.#$buttonText = shadowRoot.querySelector("#button-content");
1215
+ this.#$leftIconSlot = shadowRoot.querySelector("#left-icon");
1216
+ this.#$iconSlot = shadowRoot.querySelector("#icon");
1217
+ this.#$rightIconSlot = shadowRoot.querySelector("#right-icon");
1209
1218
  }
1210
1219
  connectedCallback() {
1211
1220
  this.#$anchor.addEventListener("click", this.#onAnchorClick);
@@ -1217,6 +1226,11 @@ class Link extends NectaryElement {
1217
1226
  this.addEventListener("-click", this.#onClickReactHandler);
1218
1227
  this.addEventListener("-focus", this.#onFocusReactHandler);
1219
1228
  this.addEventListener("-blur", this.#onBlurReactHandler);
1229
+ this.#$leftIconSlot.addEventListener("slotchange", this.#onSlotChange);
1230
+ this.#$iconSlot.addEventListener("slotchange", this.#onSlotChange);
1231
+ this.#$rightIconSlot.addEventListener("slotchange", this.#onSlotChange);
1232
+ this.#renderSlots();
1233
+ this.#updateSlotVisibility();
1220
1234
  }
1221
1235
  disconnectedCallback() {
1222
1236
  this.#$anchor.removeEventListener("click", this.#onAnchorClick);
@@ -1228,6 +1242,9 @@ class Link extends NectaryElement {
1228
1242
  this.removeEventListener("-click", this.#onClickReactHandler);
1229
1243
  this.removeEventListener("-focus", this.#onFocusReactHandler);
1230
1244
  this.removeEventListener("-blur", this.#onBlurReactHandler);
1245
+ this.#$leftIconSlot.removeEventListener("slotchange", this.#onSlotChange);
1246
+ this.#$iconSlot.removeEventListener("slotchange", this.#onSlotChange);
1247
+ this.#$rightIconSlot.removeEventListener("slotchange", this.#onSlotChange);
1231
1248
  }
1232
1249
  static get observedAttributes() {
1233
1250
  return [
@@ -1238,7 +1255,9 @@ class Link extends NectaryElement {
1238
1255
  "external",
1239
1256
  "standalone",
1240
1257
  "disabled",
1241
- "type"
1258
+ "type",
1259
+ "size",
1260
+ "preventdefault"
1242
1261
  ];
1243
1262
  }
1244
1263
  #renderContent() {
@@ -1278,6 +1297,11 @@ class Link extends NectaryElement {
1278
1297
  updateBooleanAttribute(this, "preventdefault", true);
1279
1298
  }
1280
1299
  updateBooleanAttribute(this, name, shouldUseHistory);
1300
+ this.#renderSlots();
1301
+ break;
1302
+ }
1303
+ case "preventdefault": {
1304
+ this.#renderSlots();
1281
1305
  break;
1282
1306
  }
1283
1307
  case "standalone":
@@ -1299,6 +1323,10 @@ class Link extends NectaryElement {
1299
1323
  updateLiteralAttribute(this, linkTypeValues, "type", newVal);
1300
1324
  break;
1301
1325
  }
1326
+ case "size": {
1327
+ updateLiteralAttribute(this, sizeExValues, "size", newVal);
1328
+ break;
1329
+ }
1302
1330
  }
1303
1331
  }
1304
1332
  get text() {
@@ -1349,6 +1377,12 @@ class Link extends NectaryElement {
1349
1377
  get type() {
1350
1378
  return getLiteralAttribute(this, linkTypeValues, "type", null);
1351
1379
  }
1380
+ set size(value) {
1381
+ updateLiteralAttribute(this, sizeExValues, "size", value);
1382
+ }
1383
+ get size() {
1384
+ return getLiteralAttribute(this, sizeExValues, "size", DEFAULT_SIZE);
1385
+ }
1352
1386
  set preventDefault(isPrevented) {
1353
1387
  updateBooleanAttribute(this, "preventdefault", isPrevented);
1354
1388
  }
@@ -1358,6 +1392,19 @@ class Link extends NectaryElement {
1358
1392
  get #$activeElement() {
1359
1393
  return this.preventDefault && !this.useHistory ? this.#$button : this.#$anchor;
1360
1394
  }
1395
+ #renderSlots() {
1396
+ const $text = this.preventDefault && !this.useHistory ? this.#$buttonText : this.#$text;
1397
+ $text.before(this.#$leftIconSlot, this.#$iconSlot);
1398
+ $text.after(this.#$rightIconSlot);
1399
+ }
1400
+ #updateSlotVisibility() {
1401
+ for (const $slot of [this.#$leftIconSlot, this.#$iconSlot, this.#$rightIconSlot]) {
1402
+ $slot.hidden = $slot.assignedNodes().length === 0;
1403
+ }
1404
+ }
1405
+ #onSlotChange = () => {
1406
+ this.#updateSlotVisibility();
1407
+ };
1361
1408
  get focusable() {
1362
1409
  return true;
1363
1410
  }
@@ -1690,7 +1737,7 @@ const parseMarkdown = (md, visitor) => {
1690
1737
  }
1691
1738
  return visitor.end();
1692
1739
  };
1693
- const sizeValues$1 = ["m", "s", "xs", "xxs"];
1740
+ const sizeValues = ["m", "s", "xs", "xxs"];
1694
1741
  const createParseVisitor$1 = (doc) => {
1695
1742
  let emojiBaseUrl = null;
1696
1743
  let chipColor = null;
@@ -1912,10 +1959,10 @@ class RichText extends NectaryElement {
1912
1959
  }
1913
1960
  }
1914
1961
  get size() {
1915
- return getLiteralAttribute(this, sizeValues$1, "size", "m");
1962
+ return getLiteralAttribute(this, sizeValues, "size", "m");
1916
1963
  }
1917
1964
  set size(value) {
1918
- updateLiteralAttribute(this, sizeValues$1, "size", value);
1965
+ updateLiteralAttribute(this, sizeValues, "size", value);
1919
1966
  }
1920
1967
  get text() {
1921
1968
  return getAttribute(this, "text", "");
@@ -2013,9 +2060,6 @@ class Alert extends NectaryElement {
2013
2060
  }
2014
2061
  }
2015
2062
  defineCustomElement("sinch-alert", Alert);
2016
- const DEFAULT_SIZE = "m";
2017
- const sizeValues = ["l", "m", "s"];
2018
- const sizeExValues = [...sizeValues, "xs"];
2019
2063
  const statusValues = ["online", "busy", "away", "offline"];
2020
2064
  const getAvatarColorBg = (id) => {
2021
2065
  return `var(--sinch-comp-avatar-container-color-${id}-background)`;
@@ -2084,10 +2128,10 @@ class Avatar extends NectaryElement {
2084
2128
  updateAttribute(this, "color", value);
2085
2129
  }
2086
2130
  get size() {
2087
- return getLiteralAttribute(this, sizeValues, "size", DEFAULT_SIZE);
2131
+ return getLiteralAttribute(this, sizeValues$1, "size", DEFAULT_SIZE);
2088
2132
  }
2089
2133
  set size(value) {
2090
- updateLiteralAttribute(this, sizeValues, "size", value);
2134
+ updateLiteralAttribute(this, sizeValues$1, "size", value);
2091
2135
  }
2092
2136
  get status() {
2093
2137
  return getLiteralAttribute(this, statusValues, "status", null);
@@ -2222,10 +2266,10 @@ class Badge extends NectaryElement {
2222
2266
  updateAttribute(this, "text", value);
2223
2267
  }
2224
2268
  get size() {
2225
- return getLiteralAttribute(this, sizeValues, "size", DEFAULT_SIZE);
2269
+ return getLiteralAttribute(this, sizeValues$1, "size", DEFAULT_SIZE);
2226
2270
  }
2227
2271
  set size(value) {
2228
- updateLiteralAttribute(this, sizeValues, "size", value);
2272
+ updateLiteralAttribute(this, sizeValues$1, "size", value);
2229
2273
  }
2230
2274
  get mode() {
2231
2275
  return getLiteralAttribute(this, modeValues, "mode", "square");
@@ -3241,6 +3285,7 @@ class ColorSwatch extends NectaryElement {
3241
3285
  }
3242
3286
  connectedCallback() {
3243
3287
  super.connectedCallback();
3288
+ this.#updateA11yRole();
3244
3289
  this.#updateColor();
3245
3290
  }
3246
3291
  disconnectedCallback() {
@@ -3255,6 +3300,10 @@ class ColorSwatch extends NectaryElement {
3255
3300
  this.#updateColor();
3256
3301
  break;
3257
3302
  }
3303
+ case "aria-label": {
3304
+ this.#updateA11yRole();
3305
+ break;
3306
+ }
3258
3307
  }
3259
3308
  }
3260
3309
  get name() {
@@ -3284,6 +3333,7 @@ class ColorSwatch extends NectaryElement {
3284
3333
  if (exitingAriaLabel == null || isSwatchColor(exitingAriaLabel)) {
3285
3334
  updateAttribute(this, "aria-label", colorName);
3286
3335
  }
3336
+ this.#updateA11yRole();
3287
3337
  const bg = getSwatchColorBg(colorName);
3288
3338
  this.#$wrapper.style.setProperty("background-color", bg);
3289
3339
  setClass(this.#$wrapper, "no-color", false);
@@ -3292,6 +3342,14 @@ class ColorSwatch extends NectaryElement {
3292
3342
  setClass(this.#$wrapper, "no-color", false);
3293
3343
  }
3294
3344
  }
3345
+ #updateA11yRole() {
3346
+ const ariaLabel = getAttribute(this, "aria-label");
3347
+ if (ariaLabel != null) {
3348
+ updateAttribute(this, "role", "img");
3349
+ } else {
3350
+ updateAttribute(this, "role", null);
3351
+ }
3352
+ }
3295
3353
  }
3296
3354
  defineCustomElement("sinch-color-swatch", ColorSwatch);
3297
3355
  const createThrottle = (delayFn, cancelFn) => (cb) => {
@@ -6811,10 +6869,10 @@ class Input extends NectaryElement {
6811
6869
  return getBooleanAttribute(this, "autofocus");
6812
6870
  }
6813
6871
  set size(size) {
6814
- updateLiteralAttribute(this, sizeValues, "size", size);
6872
+ updateLiteralAttribute(this, sizeValues$1, "size", size);
6815
6873
  }
6816
6874
  get size() {
6817
- return getLiteralAttribute(this, sizeValues, "size", DEFAULT_SIZE);
6875
+ return getLiteralAttribute(this, sizeValues$1, "size", DEFAULT_SIZE);
6818
6876
  }
6819
6877
  set autocomplete(value) {
6820
6878
  updateAttribute(this, "autocomplete", value);
@@ -8852,10 +8910,10 @@ class Spinner extends NectaryElement {
8852
8910
  }
8853
8911
  }
8854
8912
  set size(size) {
8855
- updateLiteralAttribute(this, sizeValues, "size", size);
8913
+ updateLiteralAttribute(this, sizeValues$1, "size", size);
8856
8914
  }
8857
8915
  get size() {
8858
- return getLiteralAttribute(this, sizeValues, "size", DEFAULT_SIZE);
8916
+ return getLiteralAttribute(this, sizeValues$1, "size", DEFAULT_SIZE);
8859
8917
  }
8860
8918
  #onContextSize = (e) => {
8861
8919
  if (this.hasAttribute("size") === true) {
@@ -15240,10 +15298,10 @@ class SelectButton extends NectaryElement {
15240
15298
  return getBooleanAttribute(this, "disabled");
15241
15299
  }
15242
15300
  set size(size) {
15243
- updateLiteralAttribute(this, sizeValues, "size", size);
15301
+ updateLiteralAttribute(this, sizeValues$1, "size", size);
15244
15302
  }
15245
15303
  get size() {
15246
- return getLiteralAttribute(this, sizeValues, "size", DEFAULT_SIZE);
15304
+ return getLiteralAttribute(this, sizeValues$1, "size", DEFAULT_SIZE);
15247
15305
  }
15248
15306
  get focusable() {
15249
15307
  return true;
package/color-swatch/index.js CHANGED
@@ -16,6 +16,7 @@ class ColorSwatch extends NectaryElement {
16
16
  }
17
17
  connectedCallback() {
18
18
  super.connectedCallback();
19
+ this.#updateA11yRole();
19
20
  this.#updateColor();
20
21
  }
21
22
  disconnectedCallback() {
@@ -30,6 +31,10 @@ class ColorSwatch extends NectaryElement {
30
31
  this.#updateColor();
31
32
  break;
32
33
  }
34
+ case "aria-label": {
35
+ this.#updateA11yRole();
36
+ break;
37
+ }
33
38
  }
34
39
  }
35
40
  get name() {
@@ -59,6 +64,7 @@ class ColorSwatch extends NectaryElement {
59
64
  if (exitingAriaLabel == null || isSwatchColor(exitingAriaLabel)) {
60
65
  updateAttribute(this, "aria-label", colorName);
61
66
  }
67
+ this.#updateA11yRole();
62
68
  const bg = getSwatchColorBg(colorName);
63
69
  this.#$wrapper.style.setProperty("background-color", bg);
64
70
  setClass(this.#$wrapper, "no-color", false);
@@ -67,6 +73,14 @@ class ColorSwatch extends NectaryElement {
67
73
  setClass(this.#$wrapper, "no-color", false);
68
74
  }
69
75
  }
76
+ #updateA11yRole() {
77
+ const ariaLabel = getAttribute(this, "aria-label");
78
+ if (ariaLabel != null) {
79
+ updateAttribute(this, "role", "img");
80
+ } else {
81
+ updateAttribute(this, "role", null);
82
+ }
83
+ }
70
84
  }
71
85
  defineCustomElement("sinch-color-swatch", ColorSwatch);
72
86
  export {
package/link/index.d.ts CHANGED
@@ -2,6 +2,7 @@ import '../code-tag';
2
2
  import '../icon';
3
3
  import { NectaryElement } from '../utils';
4
4
  import type { TSinchLinkType } from './types';
5
+ import type { TSinchSizeEx } from '../utils/size';
5
6
  export * from './types';
6
7
  export declare class Link extends NectaryElement {
7
8
  #private;
@@ -26,6 +27,8 @@ export declare class Link extends NectaryElement {
26
27
  get standalone(): boolean;
27
28
  set type(value: TSinchLinkType);
28
29
  get type(): TSinchLinkType | null;
30
+ set size(value: TSinchSizeEx);
31
+ get size(): TSinchSizeEx;
29
32
  set preventDefault(isPrevented: boolean);
30
33
  get preventDefault(): boolean;
31
34
  get focusable(): boolean;
package/link/index.js CHANGED
@@ -3,8 +3,9 @@ import "../icon/index.js";
3
3
  import { getAttribute, getBooleanAttribute, isAttrEqual, updateLiteralAttribute, updateAttribute, updateBooleanAttribute, isAttrTrue, getLiteralAttribute } from "../utils/dom.js";
4
4
  import { defineCustomElement, NectaryElement } from "../utils/element.js";
5
5
  import { getReactEventHandler } from "../utils/get-react-event-handler.js";
6
+ import { sizeExValues, DEFAULT_SIZE } from "../utils/size.js";
6
7
  import { linkTypeValues } from "./utils.js";
7
- const templateHTML = '<style>:host{display:inline}:host(:not([type])) a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}:host(:not([type])) a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}:host(:not([type])) a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host(:not([type])[standalone]){display:block}:host(:not([type])[standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host(:not([type])[external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host(:not([type])[standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host(:not([type])[standalone]) #icon-prefix{display:inline}:host(:not([type])[standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host(:not([type])[disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}:host(:not([type])) button{display:none;border:none;background:0 0;padding:0;margin:0;cursor:pointer;font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap}:host(:not([type])) button:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover)}:host(:not([type])) button:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host(:not([type])[disabled]) button{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled)}#button-content{white-space:var(--sinch-global-text-white-space,normal)}:host([preventdefault]:not([use-history])) a{display:none}:host([preventdefault]:not([use-history])) button{display:inline}:host([type]){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-button-set-size-shape-radius: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;--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-m, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-m, 12px);--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m)}:host([type][disabled]){cursor:initial}:host([type]) a,:host([type]) button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--sinch-local-size);padding:0 var(--sinch-local-padding);border:none;margin:0;background:0 0;text-decoration:none;white-space:nowrap;cursor:pointer;font:inherit;color:inherit}:host([type]) a::before,:host([type]) 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([type]:not([disabled]):active) a::before,:host([type]:not([disabled]):active) button::before{border-width:2px}:host([type]) a:focus-visible,:host([type]) button:focus-visible{outline:0}:host([type]) a:focus-visible::after,:host([type]) button:focus-visible::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}:host([type]) #button-content,:host([type]) #content{position:relative;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([type]) #external-icon,:host([type]) #icon-prefix,:host([type]) #standalone-icon{display:none}:host([type][disabled]) a,:host([type][disabled]) button{pointer-events:none;cursor:initial}:host([type=primary]){--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([type=secondary]){--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]){--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([type=subtle-secondary]){--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]){--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]){--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]){--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-color-outline-focus:var(--sinch-comp-button-color-danger-default-outline-focus);--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){--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host([type=secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=subtle-primary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=subtle-secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=cta-primary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-focus)}:host([type=cta-secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-focus)}:host([type=destructive]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-focus)}:host([type=primary]:hover){--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){--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-active)}:host([type=secondary]:hover){--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-hover)}:host([type=secondary]:active){--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active)}:host([type=subtle-primary]:hover){--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){--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([type=subtle-secondary]:hover){--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([type=subtle-secondary]:active){--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){--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){--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){--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){--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){--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){--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-active)}:host([type=primary][disabled]){--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([type=secondary][disabled]){--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]){--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([type=subtle-secondary][disabled]){--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]){--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]){--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]){--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)}:host([type]) button{display:none}:host([type][preventdefault]:not([use-history])) a{display:none}:host([type][preventdefault]:not([use-history])) button{display:inline-flex}</style><a referrerpolicy="no-referer"><span id="content"></span> <span id="icon-prefix">&nbsp;</span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a><button type="button"><span id="button-content"></span></button>';
8
+ const templateHTML = '<style>:host{display:inline}:host(:not([type])) a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}:host(:not([type])) a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}:host(:not([type])) a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host(:not([type])[standalone]){display:block}:host(:not([type])[standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host(:not([type])[external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host(:not([type])[standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host(:not([type])[standalone]) #icon-prefix{display:inline}:host(:not([type])[standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host(:not([type])[disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}:host(:not([type])) button{display:none;border:none;background:0 0;padding:0;margin:0;cursor:pointer;font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap}:host(:not([type])) button:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover)}:host(:not([type])) button:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host(:not([type])[disabled]) button{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled)}#button-content{white-space:var(--sinch-global-text-white-space,normal)}:host(:not([type])) :is(#left-icon,#icon,#right-icon){display:none}:host([preventdefault]:not([use-history])) a{display:none}:host([preventdefault]:not([use-history])) button{display:inline}:host([type]){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-button-set-size-shape-radius: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;--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-m, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-m, 12px);--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([type][size="l"]){--sinch-local-size:var(--sinch-comp-button-size-container-l);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-l, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-l, 12px);--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([type][size="m"]){--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-m, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-m, 12px);--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([type][size="s"]){--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-s, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-s, 12px);--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([type][size=xs]){--sinch-local-size:var(--sinch-comp-button-size-container-xs);--sinch-local-padding:var(--sinch-comp-button-spacing-padding-xs, 8px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-xs, 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([type][disabled]){cursor:initial}:host([type]) a,:host([type]) button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sinch-local-gap);box-sizing:border-box;min-height:var(--sinch-local-size);padding:0 var(--sinch-local-padding);border:none;margin:0;background:0 0;text-decoration:none;white-space:nowrap;cursor:pointer;font:inherit;color:inherit}:host([type]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-m, 8px)}:host([type][size="l"]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-l, 8px)}:host([type][size="s"]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-s, 4px)}:host([type][size=xs]:is([text=""],:not([text]))){--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-xs, 4px)}:host([type]:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#content,#button-content){display:none}:host([type]) ::slotted(*){display:block;position:relative}:host([type]) a::before,:host([type]) 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([type]:not([disabled]):active) a::before,:host([type]:not([disabled]):active) button::before{border-width:2px}:host([type]) a:focus-visible,:host([type]) button:focus-visible{outline:0}:host([type]) a:focus-visible::after,:host([type]) button:focus-visible::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}:host([type]) #button-content,:host([type]) #content{position:relative;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([type]) #external-icon,:host([type]) #icon-prefix,:host([type]) #standalone-icon{display:none}:host([type][disabled]) a,:host([type][disabled]) button{pointer-events:none;cursor:initial}:host([type=primary]){--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([type=secondary]){--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]){--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([type=subtle-secondary]){--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]){--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]){--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]){--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-color-outline-focus:var(--sinch-comp-button-color-danger-default-outline-focus);--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){--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host([type=secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=subtle-primary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=subtle-secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=cta-primary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-focus)}:host([type=cta-secondary]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-focus)}:host([type=destructive]:focus-visible){--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-focus)}:host([type=primary]:hover){--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){--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-active)}:host([type=secondary]:hover){--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-hover)}:host([type=secondary]:active){--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active)}:host([type=subtle-primary]:hover){--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){--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([type=subtle-secondary]:hover){--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([type=subtle-secondary]:active){--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){--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){--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){--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){--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){--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){--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-active)}:host([type=primary][disabled]){--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([type=secondary][disabled]){--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]){--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([type=subtle-secondary][disabled]){--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]){--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]){--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]){--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)}:host([type]) button{display:none}:host([type][preventdefault]:not([use-history])) a{display:none}:host([type][preventdefault]:not([use-history])) button{display:inline-flex}</style><a referrerpolicy="no-referer"><slot id="left-icon" name="left-icon"></slot><slot id="icon" name="icon"></slot><span id="content"></span><slot id="right-icon" name="right-icon"></slot><span id="icon-prefix">&nbsp;</span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a><button type="button"><span id="button-content"></span></button>';
8
9
  const template = document.createElement("template");
9
10
  template.innerHTML = templateHTML;
10
11
  class Link extends NectaryElement {
@@ -12,6 +13,9 @@ class Link extends NectaryElement {
12
13
  #$text;
13
14
  #$button;
14
15
  #$buttonText;
16
+ #$leftIconSlot;
17
+ #$iconSlot;
18
+ #$rightIconSlot;
15
19
  constructor() {
16
20
  super();
17
21
  const shadowRoot = this.attachShadow();
@@ -20,6 +24,9 @@ class Link extends NectaryElement {
20
24
  this.#$text = shadowRoot.querySelector("#content");
21
25
  this.#$button = shadowRoot.querySelector("button");
22
26
  this.#$buttonText = shadowRoot.querySelector("#button-content");
27
+ this.#$leftIconSlot = shadowRoot.querySelector("#left-icon");
28
+ this.#$iconSlot = shadowRoot.querySelector("#icon");
29
+ this.#$rightIconSlot = shadowRoot.querySelector("#right-icon");
23
30
  }
24
31
  connectedCallback() {
25
32
  this.#$anchor.addEventListener("click", this.#onAnchorClick);
@@ -31,6 +38,11 @@ class Link extends NectaryElement {
31
38
  this.addEventListener("-click", this.#onClickReactHandler);
32
39
  this.addEventListener("-focus", this.#onFocusReactHandler);
33
40
  this.addEventListener("-blur", this.#onBlurReactHandler);
41
+ this.#$leftIconSlot.addEventListener("slotchange", this.#onSlotChange);
42
+ this.#$iconSlot.addEventListener("slotchange", this.#onSlotChange);
43
+ this.#$rightIconSlot.addEventListener("slotchange", this.#onSlotChange);
44
+ this.#renderSlots();
45
+ this.#updateSlotVisibility();
34
46
  }
35
47
  disconnectedCallback() {
36
48
  this.#$anchor.removeEventListener("click", this.#onAnchorClick);
@@ -42,6 +54,9 @@ class Link extends NectaryElement {
42
54
  this.removeEventListener("-click", this.#onClickReactHandler);
43
55
  this.removeEventListener("-focus", this.#onFocusReactHandler);
44
56
  this.removeEventListener("-blur", this.#onBlurReactHandler);
57
+ this.#$leftIconSlot.removeEventListener("slotchange", this.#onSlotChange);
58
+ this.#$iconSlot.removeEventListener("slotchange", this.#onSlotChange);
59
+ this.#$rightIconSlot.removeEventListener("slotchange", this.#onSlotChange);
45
60
  }
46
61
  static get observedAttributes() {
47
62
  return [
@@ -52,7 +67,9 @@ class Link extends NectaryElement {
52
67
  "external",
53
68
  "standalone",
54
69
  "disabled",
55
- "type"
70
+ "type",
71
+ "size",
72
+ "preventdefault"
56
73
  ];
57
74
  }
58
75
  #renderContent() {
@@ -92,6 +109,11 @@ class Link extends NectaryElement {
92
109
  updateBooleanAttribute(this, "preventdefault", true);
93
110
  }
94
111
  updateBooleanAttribute(this, name, shouldUseHistory);
112
+ this.#renderSlots();
113
+ break;
114
+ }
115
+ case "preventdefault": {
116
+ this.#renderSlots();
95
117
  break;
96
118
  }
97
119
  case "standalone":
@@ -113,6 +135,10 @@ class Link extends NectaryElement {
113
135
  updateLiteralAttribute(this, linkTypeValues, "type", newVal);
114
136
  break;
115
137
  }
138
+ case "size": {
139
+ updateLiteralAttribute(this, sizeExValues, "size", newVal);
140
+ break;
141
+ }
116
142
  }
117
143
  }
118
144
  get text() {
@@ -163,6 +189,12 @@ class Link extends NectaryElement {
163
189
  get type() {
164
190
  return getLiteralAttribute(this, linkTypeValues, "type", null);
165
191
  }
192
+ set size(value) {
193
+ updateLiteralAttribute(this, sizeExValues, "size", value);
194
+ }
195
+ get size() {
196
+ return getLiteralAttribute(this, sizeExValues, "size", DEFAULT_SIZE);
197
+ }
166
198
  set preventDefault(isPrevented) {
167
199
  updateBooleanAttribute(this, "preventdefault", isPrevented);
168
200
  }
@@ -172,6 +204,19 @@ class Link extends NectaryElement {
172
204
  get #$activeElement() {
173
205
  return this.preventDefault && !this.useHistory ? this.#$button : this.#$anchor;
174
206
  }
207
+ #renderSlots() {
208
+ const $text = this.preventDefault && !this.useHistory ? this.#$buttonText : this.#$text;
209
+ $text.before(this.#$leftIconSlot, this.#$iconSlot);
210
+ $text.after(this.#$rightIconSlot);
211
+ }
212
+ #updateSlotVisibility() {
213
+ for (const $slot of [this.#$leftIconSlot, this.#$iconSlot, this.#$rightIconSlot]) {
214
+ $slot.hidden = $slot.assignedNodes().length === 0;
215
+ }
216
+ }
217
+ #onSlotChange = () => {
218
+ this.#updateSlotVisibility();
219
+ };
175
220
  get focusable() {
176
221
  return true;
177
222
  }
package/link/types.d.ts CHANGED
@@ -1,12 +1,15 @@
1
1
  import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
2
+ import type { TSinchSizeEx } from '../utils/size';
2
3
  export type TSinchLinkType = 'primary' | 'secondary' | 'subtle-primary' | 'subtle-secondary' | 'cta-primary' | 'cta-secondary' | 'destructive';
3
4
  export type TSinchLinkProps = {
4
5
  /** Text content of hyperlink */
5
6
  text: string;
6
7
  /** URL that hyperlink points to */
7
8
  href: string;
8
- /** Renders the link with button visuals matching the given button type. Omit for default inline link styling. */
9
+ /** Renders the link with button visuals matching the given button type and enables the icon slots. Omit for default inline link styling. */
9
10
  type?: TSinchLinkType;
11
+ /** Size for links with button visuals, `m` by default */
12
+ size?: TSinchSizeEx;
10
13
  /** Replaces the anchor tag behaviour to use history instead */
11
14
  'use-history'?: boolean;
12
15
  /** Whether the link is disabled or not */
@@ -31,6 +34,21 @@ export type TSinchLinkEvents = {
31
34
  '-blur'?: (e: CustomEvent<void>) => void;
32
35
  };
33
36
  export type TSinchLinkStyle = {
37
+ '--sinch-comp-button-shape-radius-size-xs'?: string;
38
+ '--sinch-comp-button-shape-radius-size-s'?: string;
39
+ '--sinch-comp-button-shape-radius-size-m'?: string;
40
+ '--sinch-comp-button-shape-radius-size-l'?: string;
41
+ '--sinch-comp-button-size-container-xs'?: string;
42
+ '--sinch-comp-button-size-container-s'?: string;
43
+ '--sinch-comp-button-size-container-m'?: string;
44
+ '--sinch-comp-button-size-container-l'?: string;
45
+ '--sinch-comp-button-size-icon-xs'?: string;
46
+ '--sinch-comp-button-size-icon-s'?: string;
47
+ '--sinch-comp-button-size-icon-m'?: string;
48
+ '--sinch-comp-button-size-icon-l'?: string;
49
+ '--sinch-comp-button-font-size-s-text'?: string;
50
+ '--sinch-comp-button-font-size-m-text'?: string;
51
+ '--sinch-comp-button-font-size-l-text'?: string;
34
52
  '--sinch-comp-link-default-font-initial'?: string;
35
53
  '--sinch-comp-link-default-text-decoration-initial'?: string;
36
54
  '--sinch-comp-link-default-text-decoration-hover'?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nectary/components",
3
- "version": "5.43.0",
3
+ "version": "5.44.0",
4
4
  "files": [
5
5
  "**/*/*.css",
6
6
  "**/*/*.json",