@nectary/components 5.40.0 → 5.41.1

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 (9) hide show
  1. package/bundle.js +66 -27
  2. package/link/index.d.ts +3 -0
  3. package/link/index.js +15 -3
  4. package/link/types.d.ts +3 -0
  5. package/link/utils.d.ts +2 -0
  6. package/link/utils.js +12 -0
  7. package/package.json +1 -1
  8. package/pop/index.js +4 -20
  9. package/tooltip/index.js +36 -1
package/bundle.js CHANGED
@@ -364,7 +364,7 @@ const typeValues$7 = ["m", "s", "xs", "xxs"];
364
364
  const templateHTML$1k = '<style>:host{text-align:var(--sinch-comp-text-align);display:block;font:var(--sinch-comp-text-font);color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default));--sinch-comp-text-font:var(--sinch-sys-font-body-m);--sinch-comp-text-align:unset}:host([inline]){display:inline}:host([type="s"]){--sinch-comp-text-font:var(--sinch-sys-font-body-s)}:host([type=xs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xs)}:host([type=xxs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xxs)}:host([type="m"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize)}:host([type="s"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize-s)}:host([type=xs][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize-xs)}:host([ellipsis]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--sinch-global-text-white-space:nowrap}</style><slot></slot>';
365
365
  const template$1k = document.createElement("template");
366
366
  template$1k.innerHTML = templateHTML$1k;
367
- class Text extends NectaryElement {
367
+ let Text$1 = class Text2 extends NectaryElement {
368
368
  constructor() {
369
369
  super();
370
370
  const shadowRoot = this.attachShadow();
@@ -423,8 +423,8 @@ class Text extends NectaryElement {
423
423
  getBooleanAttribute(this, "inline") ? "text" : "paragraph"
424
424
  );
425
425
  }
426
- }
427
- defineCustomElement("sinch-text", Text);
426
+ };
427
+ defineCustomElement("sinch-text", Text$1);
428
428
  const typeValues$6 = ["xl", "l", "m", "s", "xs"];
429
429
  const templateHTML$1j = '<style>:host{display:block;--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-m)}:host([type=xl]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-xl)}:host([type="l"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-l)}:host([type="m"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-m)}:host([type="s"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-s)}:host([type=xs]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-xs)}#text{letter-spacing:-2%;color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default));font:var(--sinch-comp-title-font)}:host([ellipsis]) #text{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}</style><span id="text"></span>';
430
430
  const template$1j = document.createElement("template");
@@ -1202,7 +1202,16 @@ class CodeTag extends NectaryElement {
1202
1202
  }
1203
1203
  }
1204
1204
  defineCustomElement("sinch-code-tag", CodeTag);
1205
- const templateHTML$1c = '<style>:host{display:inline}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)}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)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([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([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([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)}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}button:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover)}button:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([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}</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>';
1205
+ const linkTypeValues = [
1206
+ "primary",
1207
+ "secondary",
1208
+ "subtle-primary",
1209
+ "subtle-secondary",
1210
+ "cta-primary",
1211
+ "cta-secondary",
1212
+ "destructive"
1213
+ ];
1214
+ 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>';
1206
1215
  const template$1c = document.createElement("template");
1207
1216
  template$1c.innerHTML = templateHTML$1c;
1208
1217
  class Link extends NectaryElement {
@@ -1249,7 +1258,8 @@ class Link extends NectaryElement {
1249
1258
  "use-history",
1250
1259
  "external",
1251
1260
  "standalone",
1252
- "disabled"
1261
+ "disabled",
1262
+ "type"
1253
1263
  ];
1254
1264
  }
1255
1265
  #renderContent() {
@@ -1306,6 +1316,10 @@ class Link extends NectaryElement {
1306
1316
  updateBooleanAttribute(this, name, isExternal);
1307
1317
  break;
1308
1318
  }
1319
+ case "type": {
1320
+ updateLiteralAttribute(this, linkTypeValues, "type", newVal);
1321
+ break;
1322
+ }
1309
1323
  }
1310
1324
  }
1311
1325
  get text() {
@@ -1350,6 +1364,12 @@ class Link extends NectaryElement {
1350
1364
  get standalone() {
1351
1365
  return getBooleanAttribute(this, "standalone");
1352
1366
  }
1367
+ set type(value) {
1368
+ updateLiteralAttribute(this, linkTypeValues, "type", value);
1369
+ }
1370
+ get type() {
1371
+ return getLiteralAttribute(this, linkTypeValues, "type", null);
1372
+ }
1353
1373
  set preventDefault(isPrevented) {
1354
1374
  updateBooleanAttribute(this, "preventdefault", isPrevented);
1355
1375
  }
@@ -3831,22 +3851,8 @@ class Pop extends NectaryElement {
3831
3851
  const clampedPosition = shouldClamp ? clampPosition({ x: xPos, y: yPos, ...localViewportInfos }) : { x: xPos, y: yPos };
3832
3852
  const clampedXPos = clampedPosition.x;
3833
3853
  const clampedYPos = clampedPosition.y;
3834
- if (this.hideOutsideViewport) {
3835
- const viewportPosition = getAnchorPosition(targetRectViewport, modalWidthViewport, modalHeightViewport, orient);
3836
- const visibilityViewportInfos = {
3837
- boundsWidth: window.innerWidth,
3838
- boundsHeight: window.innerHeight,
3839
- insetX: inset,
3840
- insetY: inset,
3841
- modalWidth: modalWidthViewport,
3842
- modalHeight: modalHeightViewport
3843
- };
3844
- const isOutOfViewport = this.#isOutsideViewport(viewportPosition.x, viewportPosition.y, visibilityViewportInfos);
3845
- if (isOutOfViewport) {
3846
- this.#$dialog.style.setProperty("visibility", "hidden");
3847
- } else {
3848
- this.#$dialog.style.removeProperty("visibility");
3849
- }
3854
+ if (this.hideOutsideViewport && this.#isTargetOutsideViewport(targetRectViewport, inset)) {
3855
+ this.#$dialog.style.setProperty("visibility", "hidden");
3850
3856
  } else {
3851
3857
  this.#$dialog.style.removeProperty("visibility");
3852
3858
  }
@@ -3931,10 +3937,8 @@ class Pop extends NectaryElement {
3931
3937
  this.#updateOrientation();
3932
3938
  }
3933
3939
  };
3934
- #isOutsideViewport(x, y, viewportInfos) {
3935
- const { boundsWidth, boundsHeight, insetX, insetY, modalWidth, modalHeight } = viewportInfos;
3936
- const clampedPosition = clampPosition({ x, y, boundsWidth, boundsHeight, insetX, insetY, modalWidth, modalHeight });
3937
- return Math.abs(clampedPosition.x - x) > 2 || Math.abs(clampedPosition.y - y) > 2;
3940
+ #isTargetOutsideViewport(targetRect, inset) {
3941
+ return targetRect.x + targetRect.width <= inset || targetRect.y + targetRect.height <= inset || targetRect.x >= window.innerWidth - inset || targetRect.y >= window.innerHeight - inset;
3938
3942
  }
3939
3943
  }
3940
3944
  defineCustomElement("sinch-pop", Pop);
@@ -4102,6 +4106,7 @@ const SHOW_DELAY_FAST = 250;
4102
4106
  const HIDE_DELAY = 0;
4103
4107
  const ANIMATION_DURATION = 100;
4104
4108
  const FOCUSABLE_OUTSIDE_TARGET_SELECTOR = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable=""], [contenteditable="true"]';
4109
+ const OPEN_FLOATING_LAYER_SELECTOR = "sinch-popover[open], sinch-pop[open], dialog[open]";
4105
4110
  const OVERLAP_TOLERANCE = 1;
4106
4111
  const MAX_ZERO_DIMENSION_PLACEMENT_RETRIES = 8;
4107
4112
  const MIN_FIRST_REVEAL_STABILITY_FRAMES = 3;
@@ -4130,13 +4135,14 @@ class Tooltip extends NectaryElement {
4130
4135
  #isSuspendedByHover = false;
4131
4136
  #isSubscribed = false;
4132
4137
  #controller;
4138
+ #childObserver = null;
4133
4139
  #placementScheduled = false;
4134
4140
  #zeroDimensionPlacementRetries = 0;
4135
4141
  #revealRequestId = 0;
4136
4142
  #hasCompletedFirstReveal = false;
4137
4143
  constructor() {
4138
4144
  super();
4139
- const shadowRoot = this.attachShadow();
4145
+ const shadowRoot = this.attachShadow({ slotAssignment: "manual" });
4140
4146
  shadowRoot.appendChild(template$Y.content.cloneNode(true));
4141
4147
  this.#$pop = shadowRoot.querySelector("#pop");
4142
4148
  this.#$tooltipText = shadowRoot.querySelector("#text");
@@ -4165,6 +4171,11 @@ class Tooltip extends NectaryElement {
4165
4171
  this.setAttribute("role", "tooltip");
4166
4172
  this.#$pop.addEventListener("-close", this.#onPopClose, options);
4167
4173
  this.#$target.addEventListener("slotchange", this.#onTargetSlotChange, options);
4174
+ this.#assignTargetNodes();
4175
+ this.#childObserver = new MutationObserver(() => {
4176
+ this.#assignTargetNodes();
4177
+ });
4178
+ this.#childObserver.observe(this, { childList: true });
4168
4179
  this.addEventListener("-show", this.#onShowReactHandler, options);
4169
4180
  this.addEventListener("-hide", this.#onHideReactHandler, options);
4170
4181
  this.#resizeObserver = new ResizeObserver(() => {
@@ -4196,6 +4207,8 @@ class Tooltip extends NectaryElement {
4196
4207
  this.#controller = null;
4197
4208
  this.#resizeObserver?.disconnect();
4198
4209
  this.#resizeObserver = null;
4210
+ this.#childObserver?.disconnect();
4211
+ this.#childObserver = null;
4199
4212
  }
4200
4213
  static get observedAttributes() {
4201
4214
  return [
@@ -4312,12 +4325,18 @@ class Tooltip extends NectaryElement {
4312
4325
  this.#tooltipState.destroy();
4313
4326
  };
4314
4327
  #onMouseEnter = () => {
4328
+ if (this.#targetOwnsOpenFloatingLayer()) {
4329
+ return;
4330
+ }
4315
4331
  this.#claimHoverOwnership();
4316
4332
  this.#suspendFocusedTooltip();
4317
4333
  this.#closeActiveTooltip();
4318
4334
  this.#tooltipState.show();
4319
4335
  };
4320
4336
  #onContentMouseEnter = () => {
4337
+ if (this.#targetOwnsOpenFloatingLayer()) {
4338
+ return;
4339
+ }
4321
4340
  this.#claimHoverOwnership();
4322
4341
  if (this.#hasFocus) {
4323
4342
  return;
@@ -4337,6 +4356,9 @@ class Tooltip extends NectaryElement {
4337
4356
  this.#tooltipState.show();
4338
4357
  };
4339
4358
  #shouldOpenForFocus() {
4359
+ if (this.#targetOwnsOpenFloatingLayer()) {
4360
+ return false;
4361
+ }
4340
4362
  const activeEl = getDeepActiveElement(this.ownerDocument);
4341
4363
  if (!(activeEl instanceof HTMLElement) || !this.#targetContains(activeEl)) {
4342
4364
  return false;
@@ -4452,6 +4474,12 @@ class Tooltip extends NectaryElement {
4452
4474
  this.#tooltipState.hide();
4453
4475
  });
4454
4476
  };
4477
+ #assignTargetNodes() {
4478
+ const nodes = Array.from(this.childNodes).filter(
4479
+ (node) => node instanceof Element || node instanceof Text
4480
+ );
4481
+ this.#$target.assign(...nodes);
4482
+ }
4455
4483
  #targetContains(node) {
4456
4484
  return this.#$target.assignedElements().some((el) => composedContains(el, node));
4457
4485
  }
@@ -4467,6 +4495,13 @@ class Tooltip extends NectaryElement {
4467
4495
  #isFocusInFloatingLayer(el) {
4468
4496
  return el.tagName === "SINCH-POP" || el.tagName === "SINCH-TOOLTIP";
4469
4497
  }
4498
+ // Suppress while a target-owned floating layer (e.g. a sinch-popover triggered by the
4499
+ // target) is open, so the tooltip doesn't flicker over it or steal its focus.
4500
+ #targetOwnsOpenFloatingLayer() {
4501
+ return this.#getTargetElements().some((el) => {
4502
+ return el.matches(OPEN_FLOATING_LAYER_SELECTOR) || el.querySelector(OPEN_FLOATING_LAYER_SELECTOR) !== null;
4503
+ });
4504
+ }
4470
4505
  #clearFocusSuppression() {
4471
4506
  this.#suppressFocusIn = false;
4472
4507
  this.#isSuspendedByHover = false;
@@ -4541,6 +4576,10 @@ class Tooltip extends NectaryElement {
4541
4576
  };
4542
4577
  // SHOW_DELAY ended, tooltip can be shown with animation
4543
4578
  #onStateShowEnd = () => {
4579
+ if (this.#targetOwnsOpenFloatingLayer()) {
4580
+ this.#tooltipState.destroy();
4581
+ return;
4582
+ }
4544
4583
  const revealRequestId = ++this.#revealRequestId;
4545
4584
  activeTooltip = this;
4546
4585
  this.#dispatchShowEvent();
@@ -17862,7 +17901,7 @@ export {
17862
17901
  TabsIconOption,
17863
17902
  TabsOption,
17864
17903
  Tag,
17865
- Text,
17904
+ Text$1 as Text,
17866
17905
  Textarea,
17867
17906
  TimePicker,
17868
17907
  Title,
package/link/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import '../code-tag';
2
2
  import '../icon';
3
3
  import { NectaryElement } from '../utils';
4
+ import type { TSinchLinkType } from './types';
4
5
  export * from './types';
5
6
  export declare class Link extends NectaryElement {
6
7
  #private;
@@ -23,6 +24,8 @@ export declare class Link extends NectaryElement {
23
24
  get external(): boolean;
24
25
  set standalone(isstandalone: boolean);
25
26
  get standalone(): boolean;
27
+ set type(value: TSinchLinkType);
28
+ get type(): TSinchLinkType | null;
26
29
  set preventDefault(isPrevented: boolean);
27
30
  get preventDefault(): boolean;
28
31
  get focusable(): boolean;
package/link/index.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import "../code-tag/index.js";
2
2
  import "../icon/index.js";
3
- import { getAttribute, getBooleanAttribute, isAttrEqual, updateAttribute, updateBooleanAttribute, isAttrTrue } from "../utils/dom.js";
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
- const templateHTML = '<style>:host{display:inline}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)}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)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([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([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([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)}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}button:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover)}button:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([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}</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>';
6
+ 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>';
7
8
  const template = document.createElement("template");
8
9
  template.innerHTML = templateHTML;
9
10
  class Link extends NectaryElement {
@@ -50,7 +51,8 @@ class Link extends NectaryElement {
50
51
  "use-history",
51
52
  "external",
52
53
  "standalone",
53
- "disabled"
54
+ "disabled",
55
+ "type"
54
56
  ];
55
57
  }
56
58
  #renderContent() {
@@ -107,6 +109,10 @@ class Link extends NectaryElement {
107
109
  updateBooleanAttribute(this, name, isExternal);
108
110
  break;
109
111
  }
112
+ case "type": {
113
+ updateLiteralAttribute(this, linkTypeValues, "type", newVal);
114
+ break;
115
+ }
110
116
  }
111
117
  }
112
118
  get text() {
@@ -151,6 +157,12 @@ class Link extends NectaryElement {
151
157
  get standalone() {
152
158
  return getBooleanAttribute(this, "standalone");
153
159
  }
160
+ set type(value) {
161
+ updateLiteralAttribute(this, linkTypeValues, "type", value);
162
+ }
163
+ get type() {
164
+ return getLiteralAttribute(this, linkTypeValues, "type", null);
165
+ }
154
166
  set preventDefault(isPrevented) {
155
167
  updateBooleanAttribute(this, "preventdefault", isPrevented);
156
168
  }
package/link/types.d.ts CHANGED
@@ -1,9 +1,12 @@
1
1
  import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
2
+ export type TSinchLinkType = 'primary' | 'secondary' | 'subtle-primary' | 'subtle-secondary' | 'cta-primary' | 'cta-secondary' | 'destructive';
2
3
  export type TSinchLinkProps = {
3
4
  /** Text content of hyperlink */
4
5
  text: string;
5
6
  /** URL that hyperlink point to */
6
7
  href: string;
8
+ /** Renders the link with button visuals matching the given button type. Omit for default inline link styling. */
9
+ type?: TSinchLinkType;
7
10
  /** Replaces the anchor tag behaviour to use history instead */
8
11
  'use-history'?: boolean;
9
12
  /** Disabled */
package/link/utils.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { TSinchLinkType } from './types';
2
+ export declare const linkTypeValues: readonly TSinchLinkType[];
package/link/utils.js ADDED
@@ -0,0 +1,12 @@
1
+ const linkTypeValues = [
2
+ "primary",
3
+ "secondary",
4
+ "subtle-primary",
5
+ "subtle-secondary",
6
+ "cta-primary",
7
+ "cta-secondary",
8
+ "destructive"
9
+ ];
10
+ export {
11
+ linkTypeValues
12
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nectary/components",
3
- "version": "5.40.0",
3
+ "version": "5.41.1",
4
4
  "files": [
5
5
  "**/*/*.css",
6
6
  "**/*/*.json",
package/pop/index.js CHANGED
@@ -381,22 +381,8 @@ class Pop extends NectaryElement {
381
381
  const clampedPosition = shouldClamp ? clampPosition({ x: xPos, y: yPos, ...localViewportInfos }) : { x: xPos, y: yPos };
382
382
  const clampedXPos = clampedPosition.x;
383
383
  const clampedYPos = clampedPosition.y;
384
- if (this.hideOutsideViewport) {
385
- const viewportPosition = getAnchorPosition(targetRectViewport, modalWidthViewport, modalHeightViewport, orient);
386
- const visibilityViewportInfos = {
387
- boundsWidth: window.innerWidth,
388
- boundsHeight: window.innerHeight,
389
- insetX: inset,
390
- insetY: inset,
391
- modalWidth: modalWidthViewport,
392
- modalHeight: modalHeightViewport
393
- };
394
- const isOutOfViewport = this.#isOutsideViewport(viewportPosition.x, viewportPosition.y, visibilityViewportInfos);
395
- if (isOutOfViewport) {
396
- this.#$dialog.style.setProperty("visibility", "hidden");
397
- } else {
398
- this.#$dialog.style.removeProperty("visibility");
399
- }
384
+ if (this.hideOutsideViewport && this.#isTargetOutsideViewport(targetRectViewport, inset)) {
385
+ this.#$dialog.style.setProperty("visibility", "hidden");
400
386
  } else {
401
387
  this.#$dialog.style.removeProperty("visibility");
402
388
  }
@@ -481,10 +467,8 @@ class Pop extends NectaryElement {
481
467
  this.#updateOrientation();
482
468
  }
483
469
  };
484
- #isOutsideViewport(x, y, viewportInfos) {
485
- const { boundsWidth, boundsHeight, insetX, insetY, modalWidth, modalHeight } = viewportInfos;
486
- const clampedPosition = clampPosition({ x, y, boundsWidth, boundsHeight, insetX, insetY, modalWidth, modalHeight });
487
- return Math.abs(clampedPosition.x - x) > 2 || Math.abs(clampedPosition.y - y) > 2;
470
+ #isTargetOutsideViewport(targetRect, inset) {
471
+ return targetRect.x + targetRect.width <= inset || targetRect.y + targetRect.height <= inset || targetRect.x >= window.innerWidth - inset || targetRect.y >= window.innerHeight - inset;
488
472
  }
489
473
  }
490
474
  defineCustomElement("sinch-pop", Pop);
package/tooltip/index.js CHANGED
@@ -14,6 +14,7 @@ const SHOW_DELAY_FAST = 250;
14
14
  const HIDE_DELAY = 0;
15
15
  const ANIMATION_DURATION = 100;
16
16
  const FOCUSABLE_OUTSIDE_TARGET_SELECTOR = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable=""], [contenteditable="true"]';
17
+ const OPEN_FLOATING_LAYER_SELECTOR = "sinch-popover[open], sinch-pop[open], dialog[open]";
17
18
  const OVERLAP_TOLERANCE = 1;
18
19
  const MAX_ZERO_DIMENSION_PLACEMENT_RETRIES = 8;
19
20
  const MIN_FIRST_REVEAL_STABILITY_FRAMES = 3;
@@ -42,13 +43,14 @@ class Tooltip extends NectaryElement {
42
43
  #isSuspendedByHover = false;
43
44
  #isSubscribed = false;
44
45
  #controller;
46
+ #childObserver = null;
45
47
  #placementScheduled = false;
46
48
  #zeroDimensionPlacementRetries = 0;
47
49
  #revealRequestId = 0;
48
50
  #hasCompletedFirstReveal = false;
49
51
  constructor() {
50
52
  super();
51
- const shadowRoot = this.attachShadow();
53
+ const shadowRoot = this.attachShadow({ slotAssignment: "manual" });
52
54
  shadowRoot.appendChild(template.content.cloneNode(true));
53
55
  this.#$pop = shadowRoot.querySelector("#pop");
54
56
  this.#$tooltipText = shadowRoot.querySelector("#text");
@@ -77,6 +79,11 @@ class Tooltip extends NectaryElement {
77
79
  this.setAttribute("role", "tooltip");
78
80
  this.#$pop.addEventListener("-close", this.#onPopClose, options);
79
81
  this.#$target.addEventListener("slotchange", this.#onTargetSlotChange, options);
82
+ this.#assignTargetNodes();
83
+ this.#childObserver = new MutationObserver(() => {
84
+ this.#assignTargetNodes();
85
+ });
86
+ this.#childObserver.observe(this, { childList: true });
80
87
  this.addEventListener("-show", this.#onShowReactHandler, options);
81
88
  this.addEventListener("-hide", this.#onHideReactHandler, options);
82
89
  this.#resizeObserver = new ResizeObserver(() => {
@@ -108,6 +115,8 @@ class Tooltip extends NectaryElement {
108
115
  this.#controller = null;
109
116
  this.#resizeObserver?.disconnect();
110
117
  this.#resizeObserver = null;
118
+ this.#childObserver?.disconnect();
119
+ this.#childObserver = null;
111
120
  }
112
121
  static get observedAttributes() {
113
122
  return [
@@ -224,12 +233,18 @@ class Tooltip extends NectaryElement {
224
233
  this.#tooltipState.destroy();
225
234
  };
226
235
  #onMouseEnter = () => {
236
+ if (this.#targetOwnsOpenFloatingLayer()) {
237
+ return;
238
+ }
227
239
  this.#claimHoverOwnership();
228
240
  this.#suspendFocusedTooltip();
229
241
  this.#closeActiveTooltip();
230
242
  this.#tooltipState.show();
231
243
  };
232
244
  #onContentMouseEnter = () => {
245
+ if (this.#targetOwnsOpenFloatingLayer()) {
246
+ return;
247
+ }
233
248
  this.#claimHoverOwnership();
234
249
  if (this.#hasFocus) {
235
250
  return;
@@ -249,6 +264,9 @@ class Tooltip extends NectaryElement {
249
264
  this.#tooltipState.show();
250
265
  };
251
266
  #shouldOpenForFocus() {
267
+ if (this.#targetOwnsOpenFloatingLayer()) {
268
+ return false;
269
+ }
252
270
  const activeEl = getDeepActiveElement(this.ownerDocument);
253
271
  if (!(activeEl instanceof HTMLElement) || !this.#targetContains(activeEl)) {
254
272
  return false;
@@ -364,6 +382,12 @@ class Tooltip extends NectaryElement {
364
382
  this.#tooltipState.hide();
365
383
  });
366
384
  };
385
+ #assignTargetNodes() {
386
+ const nodes = Array.from(this.childNodes).filter(
387
+ (node) => node instanceof Element || node instanceof Text
388
+ );
389
+ this.#$target.assign(...nodes);
390
+ }
367
391
  #targetContains(node) {
368
392
  return this.#$target.assignedElements().some((el) => composedContains(el, node));
369
393
  }
@@ -379,6 +403,13 @@ class Tooltip extends NectaryElement {
379
403
  #isFocusInFloatingLayer(el) {
380
404
  return el.tagName === "SINCH-POP" || el.tagName === "SINCH-TOOLTIP";
381
405
  }
406
+ // Suppress while a target-owned floating layer (e.g. a sinch-popover triggered by the
407
+ // target) is open, so the tooltip doesn't flicker over it or steal its focus.
408
+ #targetOwnsOpenFloatingLayer() {
409
+ return this.#getTargetElements().some((el) => {
410
+ return el.matches(OPEN_FLOATING_LAYER_SELECTOR) || el.querySelector(OPEN_FLOATING_LAYER_SELECTOR) !== null;
411
+ });
412
+ }
382
413
  #clearFocusSuppression() {
383
414
  this.#suppressFocusIn = false;
384
415
  this.#isSuspendedByHover = false;
@@ -453,6 +484,10 @@ class Tooltip extends NectaryElement {
453
484
  };
454
485
  // SHOW_DELAY ended, tooltip can be shown with animation
455
486
  #onStateShowEnd = () => {
487
+ if (this.#targetOwnsOpenFloatingLayer()) {
488
+ this.#tooltipState.destroy();
489
+ return;
490
+ }
456
491
  const revealRequestId = ++this.#revealRequestId;
457
492
  activeTooltip = this;
458
493
  this.#dispatchShowEvent();