@kdcloudjs/shoelace 1.0.27 → 1.0.29

package/cdn/chunks/chunk.3MZ7OZSA.js

@@ -0,0 +1,189 @@
+import {
+  i
+} from "./chunk.VKO6US6U.js";
+
+// src/components/alert/alert.styles.ts
+var alert_styles_default = i`
+  :host {
+    display: contents;
+
+    /* For better DX, we'll reset the margin here so the base part can inherit it */
+    margin: 0;
+  }
+
+  .alert {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    /* Use semantic -50 scale tokens for alert backgrounds for clearer intent */
+    background-color: var(--sl-color-neutral-50);
+    /* Use semantic neutral as the default border color instead of the generic panel border color */
+    border: solid var(--sl-panel-border-width) var(--sl-color-neutral-200);
+    border-top-width: calc(var(--sl-panel-border-width) * 1);
+    border-radius: var(--sl-border-radius-medium);
+    font-family: var(--sl-font-sans);
+    font-size: var(--sl-font-size-small);
+    font-weight: var(--sl-font-weight-normal);
+    line-height: 22px;
+    /* Use semantic -700 tokens for text to follow variant semantics (default to neutral-700) */
+    color: var(--sl-color-neutral-700);
+    margin: inherit;
+    overflow: hidden;
+    min-width: 280px;
+    max-width: 1000px;
+    max-height: 160px;
+  }
+
+  .alert:not(.alert--has-icon) .alert__icon,
+  .alert:not(.alert--closable) .alert__close-button {
+    display: none;
+  }
+
+  .alert__icon {
+    flex: 0 0 auto;
+    display: flex;
+    font-size: var(--sl-font-size-medium);
+    padding-inline-start: var(--sl-spacing-small);
+    padding-inline-end: var(--sl-spacing-x-small);
+    padding-block-start: var(--sl-spacing-small);
+  }
+
+  .alert--has-countdown {
+    border-bottom: none;
+  }
+
+  /* Variant borders use semantic colors */
+  .alert--primary {
+    border-color: var(--sl-color-primary-200);
+    /* light semantic background for primary alerts */
+    background-color: var(--sl-color-primary-50);
+    /* text follows semantic primary -700 */
+    color: var(--sl-color-primary-700);
+  }
+
+  .alert--primary .alert__icon {
+    color: var(--sl-color-primary-600);
+  }
+
+  .alert--success {
+    border-color: var(--sl-color-success-200);
+    /* light semantic background for success alerts */
+    background-color: var(--sl-color-success-50);
+    /* text follows semantic success -700 */
+    color: var(--sl-color-success-700);
+  }
+
+  .alert--success .alert__icon {
+    color: var(--sl-color-success-600);
+  }
+
+  .alert--neutral {
+    border-color: var(--sl-color-neutral-200);
+    /* neutral alerts use the neutral-50 background */
+    background-color: var(--sl-color-neutral-50);
+    /* text follows semantic neutral -700 */
+    color: var(--sl-color-neutral-700);
+  }
+
+  .alert--neutral .alert__icon {
+    color: var(--sl-color-neutral-600);
+  }
+
+  .alert--warning {
+    border-color: var(--sl-color-warning-200);
+    /* light semantic background for warning alerts */
+    background-color: var(--sl-color-warning-50);
+    /* text follows semantic warning -700 */
+    color: var(--sl-color-warning-700);
+  }
+
+  .alert--warning .alert__icon {
+    color: var(--sl-color-warning-600);
+  }
+
+  .alert--danger {
+    border-color: var(--sl-color-danger-200);
+    /* light semantic background for danger alerts */
+    background-color: var(--sl-color-danger-50);
+    /* text follows semantic danger -700 */
+    color: var(--sl-color-danger-700);
+  }
+
+  .alert--danger .alert__icon {
+    color: var(--sl-color-danger-600);
+  }
+
+  .alert__message {
+    flex: 1 1 auto;
+    display: block;
+    padding-block: var(--sl-spacing-x-small);
+    padding-inline-start: 0;
+    padding-inline-end: var(--sl-spacing-2x-small);
+    overflow-y: auto;
+  }
+
+  .alert__message strong,
+  .alert__message br {
+    display: none;
+  }
+
+  .alert:not(.alert--has-icon) .alert__message {
+    padding-inline-start: var(--sl-spacing-small);
+  }
+
+  .alert__close-button {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: var(--sl-font-size-x-small);
+    padding-inline-start: 0;
+    padding-inline-end: var(--sl-spacing-2x-small);
+  }
+
+  .alert__countdown {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: calc(var(--sl-panel-border-width) * 3);
+    background-color: var(--sl-panel-border-color);
+    display: flex;
+  }
+
+  .alert__countdown--ltr {
+    justify-content: flex-end;
+  }
+
+  .alert__countdown .alert__countdown-elapsed {
+    height: 100%;
+    width: 0;
+  }
+
+  .alert--primary .alert__countdown-elapsed {
+    background-color: var(--sl-color-primary-600);
+  }
+
+  .alert--success .alert__countdown-elapsed {
+    background-color: var(--sl-color-success-600);
+  }
+
+  .alert--neutral .alert__countdown-elapsed {
+    background-color: var(--sl-color-neutral-600);
+  }
+
+  .alert--warning .alert__countdown-elapsed {
+    background-color: var(--sl-color-warning-600);
+  }
+
+  .alert--danger .alert__countdown-elapsed {
+    background-color: var(--sl-color-danger-600);
+  }
+
+  .alert__timer {
+    display: none;
+  }
+`;
+
+export {
+  alert_styles_default
+};

package/cdn/chunks/chunk.3QRIFYGG.js

@@ -0,0 +1,175 @@
+import {
+  i
+} from "./chunk.VKO6US6U.js";
+
+// src/components/tree-item/tree-item.styles.ts
+var tree_item_styles_default = i`
+  :host {
+    display: block;
+    outline: 0;
+    z-index: 0;
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  slot:not([name])::slotted(sl-icon) {
+    margin-inline-end: var(--sl-spacing-x-small);
+  }
+
+  .tree-item {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+    color: var(--sl-color-neutral-700);
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .tree-item__checkbox {
+    pointer-events: none;
+  }
+
+  .tree-item__expand-button,
+  .tree-item__checkbox,
+  .tree-item__label {
+    font-family: var(--sl-font-sans);
+    font-size: var(--sl-font-size-small);
+    font-weight: var(--sl-font-weight-normal);
+    line-height: var(--sl-line-height-dense);
+    letter-spacing: var(--sl-letter-spacing-normal);
+  }
+
+  .tree-item__checkbox::part(base) {
+    display: flex;
+    align-items: center;
+  }
+
+  .tree-item__indentation {
+    display: block;
+    width: 1em;
+    flex-shrink: 0;
+  }
+
+  .tree-item__expand-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: content-box;
+    color: var(--sl-color-neutral-500);
+    padding: var(--sl-spacing-x-small);
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+
+  .tree-item__expand-button {
+    transition: var(--sl-transition-medium) rotate ease;
+  }
+
+  .tree-item--expanded .tree-item__expand-button {
+    rotate: 90deg;
+  }
+
+  .tree-item--expanded.tree-item--rtl .tree-item__expand-button {
+    rotate: -90deg;
+  }
+
+  .tree-item--expanded slot[name='expand-icon'],
+  .tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] {
+    display: none;
+  }
+
+  .tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot {
+    display: none;
+  }
+
+  .tree-item__expand-button--visible {
+    cursor: pointer;
+  }
+
+  .tree-item__item {
+    display: flex;
+    align-items: center;
+    border-inline-start: solid 3px transparent;
+  }
+
+  .tree-item--disabled .tree-item__item {
+    opacity: 0.5;
+    outline: none;
+    cursor: not-allowed;
+  }
+
+  :host(:not([aria-disabled='true'])) .tree-item__item:hover {
+    background-color: var(--sl-color-neutral-100);
+  }
+
+  :host(:not([aria-disabled='true'])) .tree-item__item:active .tree-item__label {
+    color: var(--sl-color-primary-600);
+  }
+
+  :host(:focus-visible) .tree-item__item {
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
+    z-index: 2;
+  }
+
+  :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
+    background-color: var(--sl-color-primary-100);
+    border-inline-start-color: transparent;
+    color: var(--sl-color-primary-600);
+  }
+
+  :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__label {
+    color: var(--sl-color-primary-600);
+  }
+
+  :host(:not([aria-disabled='true'])) .tree-item__expand-button {
+    color: var(--sl-color-neutral-600);
+  }
+
+  .tree-item__label {
+    display: flex;
+    align-items: center;
+    transition: var(--sl-transition-fast) color;
+  }
+
+  .tree-item__children {
+    display: block;
+    font-size: calc(1em + var(--indent-size, var(--sl-spacing-medium)));
+  }
+
+  /* Indentation lines */
+  .tree-item__children {
+    position: relative;
+  }
+
+  .tree-item__children::before {
+    content: '';
+    position: absolute;
+    top: var(--indent-guide-offset);
+    bottom: var(--indent-guide-offset);
+    left: calc(1em - (var(--indent-guide-width) / 2) - 1px);
+    border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);
+    z-index: 1;
+  }
+
+  .tree-item--rtl .tree-item__children::before {
+    left: auto;
+    right: 1em;
+  }
+
+  @media (forced-colors: active) {
+    :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
+      outline: dashed 1px SelectedItem;
+    }
+  }
+`;
+
+export {
+  tree_item_styles_default
+};

package/cdn/chunks/chunk.3T64H6HE.js

@@ -0,0 +1,27 @@
+import {
+  SlDropdown
+} from "./chunk.XLNV2YNC.js";
+
+// src/react/dropdown/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-dropdown";
+SlDropdown.define("sl-dropdown");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlDropdown,
+  react: React,
+  events: {
+    onSlShow: "sl-show",
+    onSlAfterShow: "sl-after-show",
+    onSlHide: "sl-hide",
+    onSlAfterHide: "sl-after-hide"
+  },
+  displayName: "SlDropdown"
+});
+var dropdown_default = reactWrapper;
+
+export {
+  dropdown_default
+};

package/cdn/chunks/chunk.3XHUQH4I.js

@@ -0,0 +1,79 @@
+import {
+  progress_ring_styles_default
+} from "./chunk.YA6XZYWF.js";
+import {
+  LocalizeController
+} from "./chunk.2SU6QBUU.js";
+import {
+  component_styles_default
+} from "./chunk.WT5BNBAS.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  r
+} from "./chunk.J5EDZ3U4.js";
+import {
+  b
+} from "./chunk.7Z2GKZ7U.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/progress-ring/progress-ring.component.ts
+var SlProgressRing = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.label = "";
+  }
+  updated(changedProps) {
+    super.updated(changedProps);
+    if (changedProps.has("value")) {
+      const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue("r"));
+      const circumference = 2 * Math.PI * radius;
+      const offset = circumference - this.value / 100 * circumference;
+      this.indicatorOffset = `${offset}px`;
+    }
+  }
+  render() {
+    return b`
+      <div
+        part="base"
+        class="progress-ring"
+        role="progressbar"
+        aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
+        aria-describedby="label"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow="${this.value}"
+        style="--percentage: ${this.value / 100}"
+      >
+        <svg class="progress-ring__image">
+          <circle class="progress-ring__track"></circle>
+          <circle class="progress-ring__indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle>
+        </svg>
+
+        <slot id="label" part="label" class="progress-ring__label"></slot>
+      </div>
+    `;
+  }
+};
+SlProgressRing.styles = [component_styles_default, progress_ring_styles_default];
+__decorateClass([
+  e(".progress-ring__indicator")
+], SlProgressRing.prototype, "indicator", 2);
+__decorateClass([
+  r()
+], SlProgressRing.prototype, "indicatorOffset", 2);
+__decorateClass([
+  n({ type: Number, reflect: true })
+], SlProgressRing.prototype, "value", 2);
+__decorateClass([
+  n()
+], SlProgressRing.prototype, "label", 2);
+
+export {
+  SlProgressRing
+};

package/cdn/chunks/chunk.3YS5E62V.js

@@ -0,0 +1,21 @@
+import {
+  SlQrCode
+} from "./chunk.ZAJIZ63T.js";
+
+// src/react/qr-code/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "sl-qr-code";
+SlQrCode.define("sl-qr-code");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlQrCode,
+  react: React,
+  events: {},
+  displayName: "SlQrCode"
+});
+var qr_code_default = reactWrapper;
+
+export {
+  qr_code_default
+};

package/cdn/chunks/chunk.3ZG6RGJQ.js

@@ -0,0 +1,51 @@
+import {
+  T,
+  b,
+  w
+} from "./chunk.7Z2GKZ7U.js";
+
+// node_modules/lit-html/static.js
+var a = Symbol.for("");
+var o = (t) => {
+  if ((t == null ? void 0 : t.r) === a) return t == null ? void 0 : t._$litStatic$;
+};
+var s = (t) => ({ _$litStatic$: t, r: a });
+var i = (t, ...r) => ({ _$litStatic$: r.reduce((r2, e, a2) => r2 + ((t2) => {
+  if (void 0 !== t2._$litStatic$) return t2._$litStatic$;
+  throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t2}. Use 'unsafeStatic' to pass non-literal values, but
+            take care to ensure page security.`);
+})(e) + t[a2 + 1], t[0]), r: a });
+var l = /* @__PURE__ */ new Map();
+var n = (t) => (r, ...e) => {
+  const a2 = e.length;
+  let s2, i2;
+  const n2 = [], u2 = [];
+  let c2, $2 = 0, f = false;
+  for (; $2 < a2; ) {
+    for (c2 = r[$2]; $2 < a2 && void 0 !== (i2 = e[$2], s2 = o(i2)); ) c2 += s2 + r[++$2], f = true;
+    $2 !== a2 && u2.push(i2), n2.push(c2), $2++;
+  }
+  if ($2 === a2 && n2.push(r[a2]), f) {
+    const t2 = n2.join("$$lit$$");
+    void 0 === (r = l.get(t2)) && (n2.raw = n2, l.set(t2, r = n2)), e = u2;
+  }
+  return t(r, ...e);
+};
+var u = n(b);
+var c = n(w);
+var $ = n(T);
+
+export {
+  s,
+  i,
+  u
+};
+/*! Bundled license information:
+
+lit-html/static.js:
+  (**
+   * @license
+   * Copyright 2020 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/

package/cdn/chunks/chunk.4AEYU43S.js

@@ -0,0 +1,11 @@
+import {
+  SlMenuLabel
+} from "./chunk.YJL3SPDD.js";
+
+// src/components/menu-label/menu-label.ts
+var menu_label_default = SlMenuLabel;
+SlMenuLabel.define("sl-menu-label");
+
+export {
+  menu_label_default
+};

package/cdn/chunks/chunk.4CKEL6FC.js

@@ -0,0 +1,155 @@
+import {
+  i
+} from "./chunk.VKO6US6U.js";
+
+// src/components/dialog/dialog.styles.ts
+var dialog_styles_default = i`
+  :host {
+    --width: 31rem;
+    --header-spacing: var(--sl-spacing-medium);
+    --body-spacing: var(--sl-spacing-medium);
+    --footer-spacing: var(--sl-spacing-medium);
+    display: contents;
+  }
+
+  .dialog {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: var(--sl-z-index-dialog);
+  }
+
+  .dialog__panel {
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    width: var(--width);
+    max-width: calc(100% - var(--sl-spacing-2x-large));
+    max-height: calc(100% - var(--sl-spacing-2x-large));
+    background-color: var(--sl-panel-background-color);
+    border-radius: var(--sl-border-radius-medium);
+    box-shadow: var(--sl-shadow-x-large);
+    transition: width 0.3s ease, height 0.3s ease, max-width 0.3s ease, max-height 0.3s ease;
+  }
+
+  .dialog--resizable .dialog__panel {
+    resize: both;
+    overflow: hidden;
+  }
+
+  .dialog--fullscreen .dialog__panel {
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100% !important;
+    max-height: 100% !important;
+    border-radius: 0;
+  }
+
+  .dialog__panel:focus {
+    outline: none;
+  }
+
+  /* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */
+  @media screen and (max-width: 420px) {
+    .dialog__panel {
+      max-height: 80vh;
+    }
+  }
+
+  .dialog--open .dialog__panel {
+    display: flex;
+    opacity: 1;
+  }
+
+  .dialog__header {
+    flex: 0 0 auto;
+    display: flex;
+    height: var(--sl-dialog-header-height);
+    border-bottom: solid 1px var(--sl-color-neutral-200);
+  }
+
+  .dialog__title {
+    flex: 1 1 auto;
+    font: inherit;
+    font-size: var(--sl-font-size-medium);
+    font-weight: var(--sl-font-weight-bold);
+    line-height: var(--sl-line-height-dense);
+    padding-left: var(--header-spacing);
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    align-self: center;
+    min-width: 32px;
+  }
+
+  .dialog__header-actions {
+    flex-shrink: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    align-items: center;
+    gap: var(--sl-spacing-2x-small);
+    padding: 0 var(--sl-spacing-medium) 0 var(--sl-spacing-x-large);
+  }
+
+  .dialog__header-actions sl-icon-button,
+  .dialog__header-actions ::slotted(sl-icon-button) {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: var(--sl-font-size-medium);
+  }
+
+  .dialog__close::part(base) {
+    padding: 0;
+  }
+
+  .dialog__body {
+    flex: 1 1 auto;
+    display: block;
+    padding: var(--body-spacing);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .dialog__footer {
+    flex: 0 0 auto;
+    text-align: center;
+    padding: var(--sl-spacing-x-small) var(--footer-spacing);
+    border-top: solid 1px var(--sl-color-neutral-200);
+  }
+
+  .dialog__footer ::slotted(sl-button:not(:first-of-type)) {
+    margin-inline-start: var(--sl-spacing-x-small);
+  }
+
+  .dialog:not(.dialog--has-footer) .dialog__footer {
+    display: none;
+  }
+
+  .dialog__overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--sl-overlay-background-color);
+  }
+
+  @media (forced-colors: active) {
+    .dialog__panel {
+      border: solid 1px var(--sl-color-neutral-0);
+    }
+  }
+`;
+
+export {
+  dialog_styles_default
+};