@albi_scando/as-design-system-lib 1.8.0 → 1.8.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.
|
@@ -211,7 +211,7 @@ const F = {
|
|
|
211
211
|
}, bt = `<button part="button">
|
|
212
212
|
<slot></slot>
|
|
213
213
|
</button>
|
|
214
|
-
`, vt = "*{box-sizing:border-box}:where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-wide);line-height:var(--line-height-normal);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);background:var(--color-bg-secondary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm);transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast),filter var(--transition-fast)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;line-height:1}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.35;cursor:not-allowed;box-shadow:none}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary);box-shadow:var(--shadow-md)
|
|
214
|
+
`, vt = "*{box-sizing:border-box}:where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-wide);line-height:var(--line-height-normal);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);background:var(--color-bg-secondary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm);transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast),filter var(--transition-fast)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;line-height:1}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.35;cursor:not-allowed;box-shadow:none}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary);box-shadow:var(--shadow-md)}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):active){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary);box-shadow:var(--shadow-sm)}:where(button,input[type=button],input[type=submit],input[type=reset]):focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}", U = new CSSStyleSheet();
|
|
215
215
|
U.replaceSync(vt);
|
|
216
216
|
class s extends HTMLElement {
|
|
217
217
|
/**
|
|
@@ -649,8 +649,8 @@ const St = "previous-button", xe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */
|
|
|
649
649
|
}, Symbol.toStringTag, { value: "Module" })), Et = `<button part="button">
|
|
650
650
|
<span class="material-symbols-outlined">chevron_right</span>
|
|
651
651
|
</button>
|
|
652
|
-
`, xt = "*{box-sizing:border-box}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",
|
|
653
|
-
|
|
652
|
+
`, xt = "*{box-sizing:border-box}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", C = new CSSStyleSheet();
|
|
653
|
+
C.replaceSync(xt);
|
|
654
654
|
class N extends s {
|
|
655
655
|
static _disabledAttribute = "disabled";
|
|
656
656
|
static _titleAttribute = "title";
|
|
@@ -659,7 +659,7 @@ class N extends s {
|
|
|
659
659
|
* @ignore
|
|
660
660
|
*/
|
|
661
661
|
constructor() {
|
|
662
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
662
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(C), this.command = O.CLOSE;
|
|
663
663
|
}
|
|
664
664
|
/**
|
|
665
665
|
* Specifies which attributes should be observed for changes.
|
|
@@ -704,8 +704,8 @@ const Lt = "next-button", Le = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obj
|
|
|
704
704
|
}, Symbol.toStringTag, { value: "Module" })), kt = `<dialog part="dialog">
|
|
705
705
|
<slot></slot>
|
|
706
706
|
</dialog>
|
|
707
|
-
`, Rt = "*{box-sizing:border-box}dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-xl);padding:var(--spacing-4);font-family:var(--font-family-base);line-height:var(--line-height-normal);font-size:var(--font-size-sm);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideIn var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog.closing{animation:slideOut var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog::backdrop{background:var(--window-backdrop);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--transition-base) ease-out forwards}dialog.closing::backdrop{animation:fadeOut var(--transition-base) ease-out forwards}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-20px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}",
|
|
708
|
-
|
|
707
|
+
`, Rt = "*{box-sizing:border-box}dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-xl);padding:var(--spacing-4);font-family:var(--font-family-base);line-height:var(--line-height-normal);font-size:var(--font-size-sm);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideIn var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog.closing{animation:slideOut var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog::backdrop{background:var(--window-backdrop);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--transition-base) ease-out forwards}dialog.closing::backdrop{animation:fadeOut var(--transition-base) ease-out forwards}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-20px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}", Y = new CSSStyleSheet();
|
|
708
|
+
Y.replaceSync(Rt);
|
|
709
709
|
class z extends HTMLElement {
|
|
710
710
|
/**
|
|
711
711
|
* @see HTMLDialogElement.closedBy
|
|
@@ -721,7 +721,7 @@ class z extends HTMLElement {
|
|
|
721
721
|
* @ignore
|
|
722
722
|
*/
|
|
723
723
|
constructor() {
|
|
724
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
724
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(Y);
|
|
725
725
|
}
|
|
726
726
|
/**
|
|
727
727
|
* Specifies which attributes should be observed for changes.
|
|
@@ -1488,7 +1488,7 @@ const $e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
|
1488
1488
|
__proto__: null,
|
|
1489
1489
|
ProgressBarComponent: h,
|
|
1490
1490
|
selector: Kt
|
|
1491
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
1491
|
+
}, Symbol.toStringTag, { value: "Module" })), Ct = "ds-skeleton", Yt = `<div part="skeleton" class="skeleton" aria-hidden="true"></div>
|
|
1492
1492
|
`, Vt = "*{box-sizing:border-box}:host{display:block;width:100%}.skeleton{background:linear-gradient(90deg,var(--color-bg-secondary) 25%,var(--color-bg-tertiary) 50%,var(--color-bg-secondary) 75%);background-size:200% 100%;border-radius:var(--border-radius-md);animation:shimmer 1.5s infinite;min-height:1rem;width:100%}:host([shape=circle]) .skeleton{border-radius:var(--border-radius-full);width:var(--skeleton-size, 3rem);height:var(--skeleton-size, 3rem)}:host([shape=text]) .skeleton{border-radius:var(--border-radius-sm);height:1em}:host([shape=rect]) .skeleton{border-radius:var(--border-radius-md)}:host([width=full]){width:100%}:host([width=half]){width:50%}:host([width=quarter]){width:25%}:host([width=three-quarters]){width:75%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}", Z = new CSSStyleSheet();
|
|
1493
1493
|
Z.replaceSync(Vt);
|
|
1494
1494
|
class A extends HTMLElement {
|
|
@@ -1524,7 +1524,7 @@ class A extends HTMLElement {
|
|
|
1524
1524
|
r !== e && t === A._heightAttribute && this._applyHeight(r);
|
|
1525
1525
|
}
|
|
1526
1526
|
_render() {
|
|
1527
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
1527
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = Yt, this._applyHeight(this.height));
|
|
1528
1528
|
}
|
|
1529
1529
|
_applyHeight(t) {
|
|
1530
1530
|
const e = this.shadowRoot?.querySelector(".skeleton");
|
|
@@ -1534,7 +1534,7 @@ class A extends HTMLElement {
|
|
|
1534
1534
|
const Ie = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
1535
1535
|
__proto__: null,
|
|
1536
1536
|
SkeletonComponent: A,
|
|
1537
|
-
selector:
|
|
1537
|
+
selector: Ct
|
|
1538
1538
|
}, Symbol.toStringTag, { value: "Module" })), Bt = "ds-card", Xt = `<div part="card" class="card">
|
|
1539
1539
|
<slot name="header" class="card-header-slot"></slot>
|
|
1540
1540
|
<div class="card-body">
|
|
@@ -1646,7 +1646,7 @@ const Ne = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
|
1646
1646
|
<span class="close-icon">✕</span>
|
|
1647
1647
|
</button>
|
|
1648
1648
|
</div>
|
|
1649
|
-
`, ie = '@charset "UTF-8";*{box-sizing:border-box}:host{display:block}:host([hidden]){display:none}.alert{display:flex;align-items:center;gap:var(--gap-sm);padding:var(--spacing-3)
|
|
1649
|
+
`, ie = '@charset "UTF-8";*{box-sizing:border-box}:host{display:block}:host([hidden]){display:none}.alert{display:flex;align-items:center;gap:var(--gap-sm);padding:var(--spacing-3);border-radius:var(--border-radius-lg);border-left:4px solid var(--color-primary);background-color:var(--color-bg-secondary);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-sm);line-height:var(--line-height-normal);animation:alertIn var(--transition-fast) ease-out}:host([variant=success]) .alert{border-left-color:#22c55e;background-color:#1a3f1f;color:#d1fae5}:host([variant=warning]) .alert{border-left-color:#facc15;background-color:#3f3011;color:#e0c600}:host([variant=error]) .alert{border-left-color:#dc2626;background-color:color-mix(in srgb,#dc2626 10%,var(--color-bg-primary))}:host([variant=info]) .alert{border-left-color:var(--color-border-secondary);background:var(--color-bg-primary);color:var(--color-text-primary)}.alert-icon{font-size:var(--font-size-lg);flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:1.25em;height:1.25em}:host([variant=success]) .alert-icon:before{content:"✓"}:host([variant=warning]) .alert-icon:before{content:"⚠"}:host([variant=error]) .alert-icon:before{content:"✕"}:host([variant=info]) .alert-icon:before{content:"ℹ"}.alert-content{flex:1;min-width:0;padding:0 var(--gap-sm);border-left:1px solid}::slotted([slot=title]){display:block;font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);margin-bottom:var(--spacing-1)}.alert-close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);border-radius:var(--border-radius-sm);color:var(--color-text-secondary);font-size:var(--font-size-md);line-height:1;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),color var(--transition-fast)}.alert-close:hover{background:var(--color-hover-bg-secondary);color:var(--color-text-primary)}:host(:not([dismissible])) .alert-close{display:none}@keyframes alertIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}', rt = new CSSStyleSheet();
|
|
1650
1650
|
rt.replaceSync(ie);
|
|
1651
1651
|
class k extends HTMLElement {
|
|
1652
1652
|
static _variantAttribute = "variant";
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
</svg>`}.CUSTOM_CROSSHAIR)}`;const q={ANY:"any",NONE:"none"},G={KEY_DOWN:"keydown"},z={CLICK:"click"},gt=`<button part="button">
|
|
10
10
|
<slot></slot>
|
|
11
11
|
</button>
|
|
12
|
-
`,pt="*{box-sizing:border-box}:where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-wide);line-height:var(--line-height-normal);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);background:var(--color-bg-secondary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm);transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast),filter var(--transition-fast)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;line-height:1}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.35;cursor:not-allowed;box-shadow:none}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary);box-shadow:var(--shadow-md)
|
|
12
|
+
`,pt="*{box-sizing:border-box}:where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-wide);line-height:var(--line-height-normal);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);background:var(--color-bg-secondary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm);transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast),filter var(--transition-fast)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;line-height:1}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.35;cursor:not-allowed;box-shadow:none}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary);box-shadow:var(--shadow-md)}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):active){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary);box-shadow:var(--shadow-sm)}:where(button,input[type=button],input[type=submit],input[type=reset]):focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}",W=new CSSStyleSheet;W.replaceSync(pt);class s extends HTMLElement{static autofocusAttribute="autofocus";static commandAttribute="command";static commandforAttribute="commandfor";static disabledAttribute="disabled";static nameAttribute="name";static titleAttribute="title";static typeAttribute="type";static valueAttribute="value";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(W)}static get observedAttributes(){return[s.autofocusAttribute,s.commandAttribute,s.commandforAttribute,s.disabledAttribute,s.nameAttribute,s.titleAttribute,s.typeAttribute,s.valueAttribute]}get buttonElement(){return this.shadowRoot?.querySelector("button")}get autofocus(){return this.hasAttribute(s.autofocusAttribute)}set autofocus(t){t?this.setAttribute(s.autofocusAttribute,d):this.removeAttribute(s.autofocusAttribute)}get command(){return this.getAttribute(s.commandAttribute)??d}set command(t){this.setAttribute(s.commandAttribute,t)}get commandfor(){return this.getAttribute(s.commandforAttribute)??d}set commandfor(t){t!==d?this.setAttribute(s.commandforAttribute,t):this.removeAttribute(s.commandforAttribute)}get disabled(){return this.hasAttribute(s.disabledAttribute)}set disabled(t){t?this.setAttribute(s.disabledAttribute,d):this.removeAttribute(s.disabledAttribute)}get name(){return this.getAttribute(s.nameAttribute)??d}set name(t){t!==d?this.setAttribute(s.nameAttribute,t):this.removeAttribute(s.nameAttribute)}get headline(){return this.getAttribute(s.titleAttribute)??d}set headline(t){t!==d?this.setAttribute(s.titleAttribute,t):this.removeAttribute(s.titleAttribute)}get type(){return this.getAttribute(s.typeAttribute)??"button"}set type(t){t!==d?this.setAttribute(s.typeAttribute,t):this.removeAttribute(s.typeAttribute)}get value(){return this.getAttribute(s.valueAttribute)??"button"}set value(t){t!==d?this.setAttribute(s.valueAttribute,t):this.removeAttribute(s.valueAttribute)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,r){r!==e&&this._syncAttribute(t)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=gt,this._syncAttributes())}_addEventListeners(){this.buttonElement.addEventListener(z.CLICK,this._handleClick)}_removeEventListeners(){this.buttonElement.addEventListener(z.CLICK,this._handleClick)}_handleClick=()=>{if(this.command===d||this.commandfor===d)return;let t=document.getElementById(this.commandfor);if(t??=this._findElementInShadowDOM(this.commandfor),t===null)return;const e=t;switch(this.command){case O.SHOW_MODAL:e.showModal?.();break;case O.CLOSE:e.close?.();break}};_findElementInShadowDOM(t){const r=`#${CSS.escape(t)}`;let i=this.querySelector(r);if(i!==null||(i=this._searchInShadowRootsOfChildren(this,r),i!==null))return i;let n=this.parentElement;for(;n!==null;){if(i=n.querySelector(r),i!==null||(i=this._searchInShadowRootsOfChildren(n,r),i!==null))return i;const g=n.parentElement;if(g!==null)n=g;else{const u=n.getRootNode();if(u instanceof ShadowRoot&&u.host!==null)n=u.host;else break}}return null}_searchInShadowRootsOfChildren(t,e){const r=t.children;for(const i of r){if(i.shadowRoot!==null){const g=i.shadowRoot.querySelector(e);if(g!==null)return g;const u=this._searchInShadowRootsOfChildren(i.shadowRoot,e);if(u!==null)return u}const n=this._searchInShadowRootsOfChildren(i,e);if(n!==null)return n}return null}_syncAttribute(t){const e=this.buttonElement;e!==null&&(this.hasAttribute(t)?e.setAttribute(t,this.getAttribute(t)??d):e.removeAttribute(t))}_syncAttributes(){s.observedAttributes.forEach(t=>{this._syncAttribute(t)})}}const ft=Object.freeze(Object.defineProperty({__proto__:null,BaseButtonComponent:s,selector:vt},Symbol.toStringTag,{value:"Module"})),mt=`<button title="Undo" part="button">
|
|
13
13
|
<span class="material-symbols-outlined">undo</span>
|
|
14
14
|
<span>Undo</span>
|
|
15
15
|
</button>
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
<span class="close-icon">✕</span>
|
|
100
100
|
</button>
|
|
101
101
|
</div>
|
|
102
|
-
`,ve='@charset "UTF-8";*{box-sizing:border-box}:host{display:block}:host([hidden]){display:none}.alert{display:flex;align-items:center;gap:var(--gap-sm);padding:var(--spacing-3)
|
|
102
|
+
`,ve='@charset "UTF-8";*{box-sizing:border-box}:host{display:block}:host([hidden]){display:none}.alert{display:flex;align-items:center;gap:var(--gap-sm);padding:var(--spacing-3);border-radius:var(--border-radius-lg);border-left:4px solid var(--color-primary);background-color:var(--color-bg-secondary);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-sm);line-height:var(--line-height-normal);animation:alertIn var(--transition-fast) ease-out}:host([variant=success]) .alert{border-left-color:#22c55e;background-color:#1a3f1f;color:#d1fae5}:host([variant=warning]) .alert{border-left-color:#facc15;background-color:#3f3011;color:#e0c600}:host([variant=error]) .alert{border-left-color:#dc2626;background-color:color-mix(in srgb,#dc2626 10%,var(--color-bg-primary))}:host([variant=info]) .alert{border-left-color:var(--color-border-secondary);background:var(--color-bg-primary);color:var(--color-text-primary)}.alert-icon{font-size:var(--font-size-lg);flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:1.25em;height:1.25em}:host([variant=success]) .alert-icon:before{content:"✓"}:host([variant=warning]) .alert-icon:before{content:"⚠"}:host([variant=error]) .alert-icon:before{content:"✕"}:host([variant=info]) .alert-icon:before{content:"ℹ"}.alert-content{flex:1;min-width:0;padding:0 var(--gap-sm);border-left:1px solid}::slotted([slot=title]){display:block;font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);margin-bottom:var(--spacing-1)}.alert-close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);border-radius:var(--border-radius-sm);color:var(--color-text-secondary);font-size:var(--font-size-md);line-height:1;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),color var(--transition-fast)}.alert-close:hover{background:var(--color-hover-bg-secondary);color:var(--color-text-primary)}:host(:not([dismissible])) .alert-close{display:none}@keyframes alertIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}',ot=new CSSStyleSheet;ot.replaceSync(ve);class R extends HTMLElement{static _variantAttribute="variant";static _dismissibleAttribute="dismissible";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(ot)}static get observedAttributes(){return[R._variantAttribute,R._dismissibleAttribute]}get variant(){return this.getAttribute(R._variantAttribute)??"info"}set variant(t){this.setAttribute(R._variantAttribute,t)}get dismissible(){return this.hasAttribute(R._dismissibleAttribute)}set dismissible(t){t?this.setAttribute(R._dismissibleAttribute,""):this.removeAttribute(R._dismissibleAttribute)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,r){}_handleClose=()=>{this.dispatchEvent(new CustomEvent("ds-alert-dismiss",{bubbles:!0,composed:!0})),this.setAttribute("hidden","")};_addEventListeners(){this.shadowRoot?.querySelector(".alert-close")?.addEventListener("click",this._handleClose)}_removeEventListeners(){this.shadowRoot?.querySelector(".alert-close")?.removeEventListener("click",this._handleClose)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=be,this._addEventListeners())}}const ge=Object.freeze(Object.defineProperty({__proto__:null,AlertComponent:R,selector:he},Symbol.toStringTag,{value:"Module"})),pe="ds-tag",fe=`<span part="tag" class="tag">
|
|
103
103
|
<slot></slot>
|
|
104
104
|
<button
|
|
105
105
|
part="remove-button"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@albi_scando/as-design-system-lib",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.1",
|
|
4
4
|
"description": "A library of reusable, strongly typed Web Components built with TypeScript, designed for creating consistent and maintainable user interfaces.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": {
|