@nectary/components 5.20.6 → 5.20.8

package/bundle.js

@@ -2878,7 +2878,7 @@ const getChipColorBg = (id) => {
 const getChipColorFg = (id) => {
   return `var(--sinch-comp-chip-color-${id}-default-foreground-initial)`;
 };
-const templateHTML$T = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-chip-size-container-m);padding:0 5px 0 9px;border-radius:var(--sinch-comp-chip-shape-radius);background-color:var(--sinch-comp-chip-color-neutral-default-background-initial);box-sizing:border-box;--sinch-global-color-text:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-color-icon:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-m)}:host(:focus-visible)>#button::after{content:"";position:absolute;inset:-4px;border-radius:calc(var(--sinch-comp-chip-shape-radius) + 4px);border:2px solid var(--sinch-comp-chip-color-outiline-focus);pointer-events:none}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-chip-font-size-m-label)}:host([small]) #button{height:var(--sinch-comp-chip-size-container-s);padding:0 3px 0 7px;--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-s)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-chip-font-size-s-label)}::slotted([slot=icon]){margin-left:-4px}</style><div id="button" inert><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><slot name="right-icon"><sinch-icon icons-version="2" name="circle-cross" id="icon-close"></sinch-icon></slot></div>';
+const templateHTML$T = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-chip-size-container-m);padding:0 5px 0 9px;border:1px solid var(--sinch-comp-chip-border);border-radius:var(--sinch-comp-chip-shape-radius);background-color:var(--sinch-comp-chip-color-neutral-default-background-initial);box-sizing:border-box;--sinch-global-color-text:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-color-icon:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-m)}:host(:focus-visible)>#button::after{content:"";position:absolute;inset:-4px;border-radius:calc(var(--sinch-comp-chip-shape-radius) + 4px);border:2px solid var(--sinch-comp-chip-color-outiline-focus);pointer-events:none}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-chip-font-size-m-label)}:host([small]) #button{height:var(--sinch-comp-chip-size-container-s);padding:0 3px 0 7px;--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-s)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-chip-font-size-s-label)}::slotted([slot=icon]){margin-left:-4px}</style><div id="button" inert><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><slot name="right-icon"><sinch-icon icons-version="2" name="circle-cross" id="icon-close"></sinch-icon></slot></div>';
 const template$T = document.createElement("template");
 template$T.innerHTML = templateHTML$T;
 class Chip extends NectaryElement {
@@ -12821,7 +12821,7 @@ class TabsOption extends NectaryElement {
   };
 }
 defineCustomElement("sinch-tabs-option", TabsOption);
-const templateHTML$5 = '<style>:host{display:inline-block;vertical-align:middle;outline:0}:host([ellipsis]){display:inline}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-tag-size-container-m);padding:0 9px;border-radius:var(--sinch-comp-tag-shape-radius);background-color:var(--sinch-comp-tag-color-default-background);box-sizing:border-box;user-select:none;--sinch-global-color-text:var(--sinch-comp-tag-color-default-foreground);--sinch-global-color-icon:var(--sinch-comp-tag-color-default-foreground);--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-m)}:host([small]) #wrapper{height:var(--sinch-comp-tag-size-container-s);padding:0 8px;--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-s)}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-tag-font-size-m-label)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-tag-font-size-s-label)}::slotted(*){margin-left:-4px}</style><sinch-tooltip id="tooltip" type="fast"><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="s" ellipsis></sinch-text></div></sinch-tooltip>';
+const templateHTML$5 = '<style>:host{display:inline-block;vertical-align:middle;outline:0}:host([ellipsis]){display:inline}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-tag-size-container-m);padding:0 9px;border:1px solid var(--sinch-comp-tag-border);border-radius:var(--sinch-comp-tag-shape-radius);background-color:var(--sinch-comp-tag-color-default-background);box-sizing:border-box;user-select:none;--sinch-global-color-text:var(--sinch-comp-tag-color-default-foreground);--sinch-global-color-icon:var(--sinch-comp-tag-color-default-foreground);--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-m)}:host([small]) #wrapper{height:var(--sinch-comp-tag-size-container-s);padding:0 8px;--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-s)}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-tag-font-size-m-label)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-tag-font-size-s-label)}::slotted(*){margin-left:-4px}</style><sinch-tooltip id="tooltip" type="fast"><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="s" ellipsis></sinch-text></div></sinch-tooltip>';
 const template$5 = document.createElement("template");
 template$5.innerHTML = templateHTML$5;
 class Tag extends NectaryElement {

package/chip/index.js

@@ -4,7 +4,7 @@ import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateAttribute, getAt
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { getChipColorBg, getChipColorFg } from "./utils.js";
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-chip-size-container-m);padding:0 5px 0 9px;border-radius:var(--sinch-comp-chip-shape-radius);background-color:var(--sinch-comp-chip-color-neutral-default-background-initial);box-sizing:border-box;--sinch-global-color-text:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-color-icon:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-m)}:host(:focus-visible)>#button::after{content:"";position:absolute;inset:-4px;border-radius:calc(var(--sinch-comp-chip-shape-radius) + 4px);border:2px solid var(--sinch-comp-chip-color-outiline-focus);pointer-events:none}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-chip-font-size-m-label)}:host([small]) #button{height:var(--sinch-comp-chip-size-container-s);padding:0 3px 0 7px;--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-s)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-chip-font-size-s-label)}::slotted([slot=icon]){margin-left:-4px}</style><div id="button" inert><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><slot name="right-icon"><sinch-icon icons-version="2" name="circle-cross" id="icon-close"></sinch-icon></slot></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-chip-size-container-m);padding:0 5px 0 9px;border:1px solid var(--sinch-comp-chip-border);border-radius:var(--sinch-comp-chip-shape-radius);background-color:var(--sinch-comp-chip-color-neutral-default-background-initial);box-sizing:border-box;--sinch-global-color-text:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-color-icon:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-m)}:host(:focus-visible)>#button::after{content:"";position:absolute;inset:-4px;border-radius:calc(var(--sinch-comp-chip-shape-radius) + 4px);border:2px solid var(--sinch-comp-chip-color-outiline-focus);pointer-events:none}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-chip-font-size-m-label)}:host([small]) #button{height:var(--sinch-comp-chip-size-container-s);padding:0 3px 0 7px;--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-s)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-chip-font-size-s-label)}::slotted([slot=icon]){margin-left:-4px}</style><div id="button" inert><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><slot name="right-icon"><sinch-icon icons-version="2" name="circle-cross" id="icon-close"></sinch-icon></slot></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Chip extends NectaryElement {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.20.6",
+  "version": "5.20.8",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/sheet/index.js

@@ -5,7 +5,7 @@ import { getRect } from "../utils/rect.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { isTargetEqual } from "../utils/event-target.js";
 import { disableScroll, enableScroll } from "../utils/scroll-lock.js";
-const templateHTML = '<style>:host{display:contents}#dialog{position:fixed;margin:0;display:grid;grid-template-rows:auto 1fr auto;padding:var(--sinch-comp-sheet-size-padding);gap:var(--sinch-comp-sheet-size-gap);max-width:unset;max-height:unset;box-sizing:border-box;contain:content;background-color:var(--sinch-comp-sheet-color-background);border:none;outline:0;opacity:0;transition-property:transform,opacity;transition-duration:var(--sinch-comp-sheet-animation-duration),calc(var(--sinch-comp-sheet-animation-duration) / 2.5);transition-timing-function:var(--sinch-comp-sheet-animation-easing)}#dialog.overlay-push{opacity:.5}#dialog[open],#dialog[open].placement-bottom,#dialog[open].placement-left,#dialog[open].placement-right,#dialog[open].placement-top{transform:translateX(0) translateY(0);opacity:1}#dialog.placement-right{top:0;right:0;margin-left:auto;height:100dvh;transform:translateX(100%);max-width:var(--sinch-comp-sheet-size-max-horizontal)}#dialog.placement-left{top:0;left:0;margin-right:auto;height:100dvh;transform:translateX(-100%);max-width:var(--sinch-comp-sheet-size-max-horizontal)}#dialog.placement-top{top:0;left:0;right:0;width:100%;transform:translateY(-100%);max-height:var(--sinch-comp-sheet-size-max-vertical)}#dialog.placement-bottom{bottom:0;left:0;right:0;width:100%;margin-top:auto;transform:translateY(100%);max-height:var(--sinch-comp-sheet-size-max-vertical)}#dialog::backdrop{display:block;background:linear-gradient(var(--sinch-comp-sheet-color-backdrop-from),var(--sinch-comp-sheet-color-backdrop-to));backdrop-filter:blur(var(--sinch-comp-sheet-size-backdrop-blur))}#content{min-height:0;overflow:auto;overscroll-behavior:contain}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px}#action.empty{display:none}@media screen and (max-width:576px){#dialog.placement-left,#dialog.placement-right{max-width:100dvw}}@media (prefers-reduced-motion:reduce){#dialog{transition-duration:0s}}</style><dialog id="dialog" aria-labelledby="title" aria-describedby="content"><slot id="title" name="title"></slot><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="footer"></slot></sinch-stop-events></div></dialog>';
+const templateHTML = '<style>:host{display:contents}#dialog{position:fixed;margin:0;display:grid;grid-template-rows:auto 1fr auto;padding:var(--sinch-comp-sheet-size-padding) 0;gap:var(--sinch-comp-sheet-size-gap);max-width:unset;max-height:unset;box-sizing:border-box;contain:content;background-color:var(--sinch-comp-sheet-color-background);border:none;outline:0;opacity:0;transition-property:transform,opacity;transition-duration:var(--sinch-comp-sheet-animation-duration),calc(var(--sinch-comp-sheet-animation-duration) / 2.5);transition-timing-function:var(--sinch-comp-sheet-animation-easing)}#dialog.overlay-push{opacity:.5}#dialog[open],#dialog[open].placement-bottom,#dialog[open].placement-left,#dialog[open].placement-right,#dialog[open].placement-top{transform:translateX(0) translateY(0);opacity:1}#dialog.placement-right{top:0;right:0;margin-left:auto;height:100dvh;transform:translateX(100%);max-width:var(--sinch-comp-sheet-size-max-horizontal)}#dialog.placement-left{top:0;left:0;margin-right:auto;height:100dvh;transform:translateX(-100%);max-width:var(--sinch-comp-sheet-size-max-horizontal)}#dialog.placement-top{top:0;left:0;right:0;width:100%;transform:translateY(-100%);max-height:var(--sinch-comp-sheet-size-max-vertical)}#dialog.placement-bottom{bottom:0;left:0;right:0;width:100%;margin-top:auto;transform:translateY(100%);max-height:var(--sinch-comp-sheet-size-max-vertical)}#dialog::backdrop{display:block;background:linear-gradient(var(--sinch-comp-sheet-color-backdrop-from),var(--sinch-comp-sheet-color-backdrop-to));backdrop-filter:blur(var(--sinch-comp-sheet-size-backdrop-blur))}#title{padding:0 var(--sinch-comp-sheet-size-padding)}#content{min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 var(--sinch-comp-sheet-size-padding);box-sizing:border-box}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;padding:0 var(--sinch-comp-sheet-size-padding)}#action.empty{display:none}@media screen and (max-width:576px){#dialog.placement-left,#dialog.placement-right{max-width:100dvw}}@media (prefers-reduced-motion:reduce){#dialog{transition-duration:0s}}</style><dialog id="dialog" aria-labelledby="title" aria-describedby="content"><div id="title"><slot name="title"></slot></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="footer"></slot></sinch-stop-events></div></dialog>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Sheet extends NectaryElement {

package/tag/index.js

@@ -3,7 +3,7 @@ import "../tooltip/index.js";
 import { getAttribute, updateAttribute, getBooleanAttribute, updateBooleanAttribute, isAttrEqual, isAttrTrue } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getTagColorBg, getTagColorFg } from "./utils.js";
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}:host([ellipsis]){display:inline}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-tag-size-container-m);padding:0 9px;border-radius:var(--sinch-comp-tag-shape-radius);background-color:var(--sinch-comp-tag-color-default-background);box-sizing:border-box;user-select:none;--sinch-global-color-text:var(--sinch-comp-tag-color-default-foreground);--sinch-global-color-icon:var(--sinch-comp-tag-color-default-foreground);--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-m)}:host([small]) #wrapper{height:var(--sinch-comp-tag-size-container-s);padding:0 8px;--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-s)}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-tag-font-size-m-label)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-tag-font-size-s-label)}::slotted(*){margin-left:-4px}</style><sinch-tooltip id="tooltip" type="fast"><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="s" ellipsis></sinch-text></div></sinch-tooltip>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}:host([ellipsis]){display:inline}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-tag-size-container-m);padding:0 9px;border:1px solid var(--sinch-comp-tag-border);border-radius:var(--sinch-comp-tag-shape-radius);background-color:var(--sinch-comp-tag-color-default-background);box-sizing:border-box;user-select:none;--sinch-global-color-text:var(--sinch-comp-tag-color-default-foreground);--sinch-global-color-icon:var(--sinch-comp-tag-color-default-foreground);--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-m)}:host([small]) #wrapper{height:var(--sinch-comp-tag-size-container-s);padding:0 8px;--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-s)}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-tag-font-size-m-label)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-tag-font-size-s-label)}::slotted(*){margin-left:-4px}</style><sinch-tooltip id="tooltip" type="fast"><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="s" ellipsis></sinch-text></div></sinch-tooltip>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Tag extends NectaryElement {