@kdcloudjs/shoelace 1.0.25 → 1.0.26

package/cdn/chunks/chunk.HS6MJCKU.js

@@ -0,0 +1,49 @@
+import {
+  skeleton_styles_default
+} from "./chunk.3TOH2DHT.js";
+import {
+  e
+} from "./chunk.VHCLMDG7.js";
+import {
+  component_styles_default
+} from "./chunk.NDXSHFSW.js";
+import {
+  ShoelaceElement,
+  n
+} from "./chunk.GRL5CHGV.js";
+import {
+  b
+} from "./chunk.7WSF3BCU.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/skeleton/skeleton.component.ts
+var SlSkeleton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.effect = "none";
+  }
+  render() {
+    return b`
+      <div
+        part="base"
+        class=${e({
+      skeleton: true,
+      "skeleton--pulse": this.effect === "pulse",
+      "skeleton--sheen": this.effect === "sheen"
+    })}
+      >
+        <div part="indicator" class="skeleton__indicator"></div>
+      </div>
+    `;
+  }
+};
+SlSkeleton.styles = [component_styles_default, skeleton_styles_default];
+__decorateClass([
+  n()
+], SlSkeleton.prototype, "effect", 2);
+
+export {
+  SlSkeleton
+};

package/cdn/chunks/chunk.HTEXI2VI.js

@@ -0,0 +1,11 @@
+import {
+  SlBreadcrumb
+} from "./chunk.O5A3RY3G.js";
+
+// src/components/breadcrumb/breadcrumb.ts
+var breadcrumb_default = SlBreadcrumb;
+SlBreadcrumb.define("sl-breadcrumb");
+
+export {
+  breadcrumb_default
+};

package/cdn/chunks/chunk.HUTIII2K.js

@@ -0,0 +1,11 @@
+import {
+  SlRange
+} from "./chunk.KGTEVL2H.js";
+
+// src/components/range/range.ts
+var range_default = SlRange;
+SlRange.define("sl-range");
+
+export {
+  range_default
+};

package/cdn/chunks/chunk.HVS7A7ZU.js

@@ -0,0 +1,24 @@
+import {
+  SlMenu
+} from "./chunk.S7TQOU5P.js";
+
+// src/react/menu/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-menu";
+SlMenu.define("sl-menu");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlMenu,
+  react: React,
+  events: {
+    onSlSelect: "sl-select"
+  },
+  displayName: "SlMenu"
+});
+var menu_default = reactWrapper;
+
+export {
+  menu_default
+};

package/cdn/chunks/chunk.I3PA3O7Z.js

@@ -0,0 +1,11 @@
+import {
+  SlAlert
+} from "./chunk.ENGRL32K.js";
+
+// src/components/alert/alert.ts
+var alert_default = SlAlert;
+SlAlert.define("sl-alert");
+
+export {
+  alert_default
+};

package/cdn/chunks/chunk.I5FN5K2H.js

@@ -0,0 +1,11 @@
+import {
+  SlPopup
+} from "./chunk.EJBB6RVY.js";
+
+// src/components/popup/popup.ts
+var popup_default = SlPopup;
+SlPopup.define("sl-popup");
+
+export {
+  popup_default
+};

package/cdn/chunks/chunk.I7CZNJSA.js

@@ -0,0 +1,11 @@
+import {
+  SlNav
+} from "./chunk.ONNTFK36.js";
+
+// src/components/nav/nav.ts
+var nav_default = SlNav;
+SlNav.define("sl-nav");
+
+export {
+  nav_default
+};

package/cdn/chunks/chunk.IBB55CIA.js

@@ -0,0 +1,218 @@
+import {
+  i
+} from "./chunk.7WSF3BCU.js";
+
+// src/components/think/think.styles.ts
+var think_styles_default = i`
+  :host {
+    display: block;
+  }
+
+  .think__status {
+    width: fit-content;
+    display: flex;
+    flex-direction: row;
+    gap: var(--sl-spacing-1-5x-small, 6px);
+    align-items: center;
+    font-size: var(--sl-font-size-medium, 16px);
+    color: var(--sl-color-neutral-600, #555555);
+    line-height: var(--sl-line-height-normal, 1.8);
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    border-radius: var(--sl-border-radius-small, 2px);
+    // padding: var(--sl-spacing-3x-small);
+    outline: none;
+  }
+
+  .think__status:focus-visible {
+    outline: var(--sl-focus-ring, solid 1px #5582f3);
+    outline-offset: var(--sl-focus-ring-offset, 1px);
+  }
+
+  .think__status-icon {
+    font-size: var(--sl-font-size-large, 1.25rem);
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--sl-color-neutral-600, #555555);
+  }
+
+  .think__status-text {
+    line-height: var(--sl-line-height-normal, 22px);
+    font-size: var(--sl-font-size-small, 14px);
+    color: var(--sl-color-neutral-900, rgba(0, 0, 0, 0.94));
+    font-weight: var(--sl-font-weight-bold, 700);
+    /* Bidirectional text: let each title string determine its own base direction
+       via the Unicode Paragraph Algorithm (same as HTML dir='auto' on a block). */
+    unicode-bidi: plaintext;
+  }
+
+  .think__chevron {
+    display: flex;
+    align-items: center;
+    /* Match React's fontSizeSM for the down icon */
+    font-size: var(--sl-font-size-large, 1.25rem);
+    color: var(--sl-color-neutral-600, #555555);
+    /* Matches React's transition: all motionDurationMid motionEaseInOut */
+    transition: transform var(--sl-transition-medium, 250ms) ease-in-out;
+    flex-shrink: 0;
+  }
+
+  .think__chevron--expanded {
+    transform: rotate(90deg);
+  }
+
+  .think__body {
+    overflow: hidden;
+  }
+
+  .think__content {
+    /* Matches React: marginSM top, paddingSM inline-start, 2*lineWidth border */
+    margin-block-start: var(--sl-spacing-x-small, 0.5rem);
+    width: 100%;
+    color: var(--sl-color-neutral-600, rgba(0, 0, 0, 0.64));
+    padding-inline-start: var(--sl-spacing-x-small, 0.5rem);
+    border-inline-start: 2px solid var(--sl-color-neutral-600, rgba(0, 0, 0, 0.64));
+    font-size: var(--sl-font-size-small, 14px);
+    line-height: var(--sl-line-height-normal, 22px);
+    /* Bidirectional text: each block-level paragraph determines its own base
+       direction from its first strong Unicode character. This handles mixed
+       LTR/RTL content without requiring an explicit dir attribute on every node. */
+    unicode-bidi: plaintext;
+  }
+
+  /* ── RTL support ─────────────────────────────────────────────────────────── */
+  /* Mirrors React's [prefixCls]-rtl class applied when direction === 'rtl'.  */
+  /* Uses LocalizeController + class modifier, consistent with sl-details etc. */
+
+  /* In RTL, the inherited direction: rtl from the host makes flex-direction: row
+     flow right-to-left automatically. No flex-direction override needed. */
+
+  /* .think__content uses logical properties (padding-inline-start, border-inline-start)
+     which auto-flip in RTL via inherited direction: rtl. No override needed. */
+
+  .think--rtl .think__chevron {
+    transform: scaleX(-1);
+  }
+
+  .think--rtl .think__chevron--expanded {
+    transform: scaleX(-1) rotate(90deg);
+  }
+
+  /* Spinner animation */
+  @keyframes think-spin {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .think__spinner {
+    animation: think-spin 1s linear infinite;
+    transform-origin: center;
+  }
+
+  /*
+   * Blink animation — matches React's blinkMotion visual effect.
+   *
+   * A highlight "beam" sweeps left-to-right across the title text while the text
+   * remains fully visible at all times. The gradient goes from the base text
+   * colour through the highlight colour and back, so no part of the text ever
+   * disappears — only the brightness changes as the beam passes.
+   *
+   * React implementation (blink.ts) uses:
+   *   color             - colorTextBlinkDefault (base text colour)
+   *   backgroundImage   - linear-gradient(90deg, transparent, colorTextBlink, transparent)
+   *   backgroundClip    - text
+   *   backgroundSize    - 50%
+   *
+   * In React's CSS-in-JS environment, the "color" property keeps the text
+   * visible while the gradient beam sweeps behind it. In a Web Component we
+   * must use -webkit-text-fill-color: transparent so the clipped background
+   * shows through the text glyphs. To compensate, the gradient endpoints use
+   * the base colour (instead of transparent) so the text stays readable.
+   *
+   * CSS custom properties:
+   *   --sl-c-think-TitleTextBlink-color-default           Base text colour (colorTextBlinkDefault in React).
+   *                                 Defaults to rgba(0, 0, 0, 0.45).
+   *   --sl-c-think-TitleTextBlink-color Highlight beam colour (colorTextBlink / colorTextBase in React).
+   *                                 Defaults to #000.
+   */
+  @keyframes think-blink {
+    0% {
+      background-position-x: -200%;
+      background-position-y: 100%;
+    }
+
+    25% {
+      background-position-x: -100%;
+      background-position-y: 100%;
+    }
+
+    50% {
+      background-position-x: 0%;
+      background-position-y: 100%;
+    }
+
+    75% {
+      background-position-x: 100%;
+      background-position-y: 100%;
+    }
+
+    100% {
+      background-position-x: 200%;
+      background-position-y: 100%;
+    }
+  }
+
+  .think__status-text--blink {
+    /*
+     * Blink shimmer — matches React's blinkMotion visual effect.
+     *
+     * The technique layers TWO backgrounds via background-clip: text:
+     *   1. background-color (base colour) - always fills the full text area,
+     *      keeping every glyph visible at all times.
+     *   2. background-image (gradient beam) - transparent -> highlight -> transparent,
+     *      50% wide, sweeps left-to-right. Where the gradient is transparent the
+     *      background-color shows through (= base colour). At the peak the
+     *      highlight colour fully covers the base, producing strong contrast.
+     *
+     * This is the Web-Component equivalent of React's:
+     *   color: colorTextBlinkDefault          (keeps text readable)
+     *   backgroundImage: linear-gradient(90deg, transparent, colorTextBlink, transparent)
+     *   backgroundClip: 'text'
+     *   backgroundSize: '50%'
+     */
+    color: var(--sl-c-think-TitleTextBlink-color-default, rgba(0, 0, 0, 0.45));
+    -webkit-text-fill-color: transparent;
+
+    /* 1. Base colour — guarantees text is always fully visible */
+    background-color: var(--sl-c-think-TitleTextBlink-color-default, rgba(0, 0, 0, 0.45));
+
+    /* 2. Beam gradient — transparent endpoints let background-color show through;
+     *    only the highlight peak produces a visible colour change. */
+    background-image: linear-gradient(90deg, transparent, var(--sl-c-think-TitleTextBlink-color, #000), transparent);
+
+    background-clip: text;
+    -webkit-background-clip: text;
+
+    /* Beam size: 50% of element width (matches React's backgroundSize: '50%') */
+    background-size: 50%;
+    background-repeat: no-repeat;
+
+    /* Animation: 1s linear infinite (matches React's animationDuration / timing) */
+    animation-name: think-blink;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+  }
+`;
+
+export {
+  think_styles_default
+};

package/cdn/chunks/chunk.IBGO6X76.js

@@ -0,0 +1,219 @@
+import {
+  time_panel_styles_default
+} from "./chunk.PC4SBX2U.js";
+import {
+  SlButton
+} from "./chunk.PIMYQWSH.js";
+import {
+  e
+} from "./chunk.VHCLMDG7.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.NDXSHFSW.js";
+import {
+  ShoelaceElement,
+  n,
+  r
+} from "./chunk.KT6MOS3J.js";
+import {
+  b
+} from "./chunk.7WSF3BCU.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/time-panel/time-panel.component.ts
+var locale = {
+  confirmText: "\u786E\u5B9A"
+};
+var SlTimePanel = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.value = null;
+    this.noHeader = false;
+    this.withFooter = false;
+    this.isTimeUpdating = false;
+  }
+  async handleValueChange() {
+    if (this.value && !this.isTimeUpdating) {
+      await this.updateComplete;
+      this.scrollToTime("hour", "instant");
+      this.scrollToTime("minute", "instant");
+      this.scrollToTime("second", "instant");
+    }
+  }
+  async resetScroll(behavior = "auto") {
+    var _a;
+    await this.updateComplete;
+    if (this.value) {
+      this.scrollToTime("hour", behavior);
+      this.scrollToTime("minute", behavior);
+      this.scrollToTime("second", behavior);
+    } else {
+      const columns = (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll(".timepicker__column");
+      columns == null ? void 0 : columns.forEach((col) => col.scrollTo({ top: 0, behavior }));
+    }
+  }
+  padStart(num, length = 2) {
+    return String(num).padStart(length, "0");
+  }
+  scrollToTime(part, behavior = "smooth") {
+    var _a;
+    const column = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(`.timepicker__column[part~="${part}"]`);
+    if (!column) return;
+    const selectedItem = column.querySelector(`.timepicker__item--selected`);
+    if (selectedItem) {
+      const columnRect = column.getBoundingClientRect();
+      const itemRect = selectedItem.getBoundingClientRect();
+      const offset = itemRect.top - columnRect.top;
+      const targetScrollTop = column.scrollTop + offset;
+      column.scrollTo({
+        top: Math.max(0, targetScrollTop),
+        behavior
+      });
+    }
+  }
+  async updateTime(part, val) {
+    let base = this.value ? new Date(this.value) : /* @__PURE__ */ new Date();
+    if (!this.value) {
+      const today = /* @__PURE__ */ new Date();
+      base = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0);
+    }
+    if (part === "hour") {
+      base.setHours(val);
+    } else if (part === "minute") {
+      base.setMinutes(val);
+    } else if (part === "second") {
+      base.setSeconds(val);
+    }
+    this.isTimeUpdating = true;
+    this.value = base;
+    this.emit("sl-change", {
+      detail: { value: base }
+    });
+    await this.updateComplete;
+    this.scrollToTime(part, "smooth");
+    setTimeout(() => {
+      this.isTimeUpdating = false;
+    }, 0);
+  }
+  render() {
+    const activeDate = this.value ? new Date(this.value) : null;
+    const activeHour = activeDate ? activeDate.getHours() : null;
+    const activeMinute = activeDate ? activeDate.getMinutes() : null;
+    const activeSecond = activeDate ? activeDate.getSeconds() : null;
+    const hours = Array.from({ length: 24 }, (_, index) => index);
+    const minutes = Array.from({ length: 60 }, (_, index) => index);
+    const seconds = Array.from({ length: 60 }, (_, index) => index);
+    return b`
+      <div class="timepicker" part="base">
+        ${!this.noHeader ? b`
+              <div class="timepicker__header" part="header">
+                <span class="timepicker__header-item"> ${activeHour !== null ? this.padStart(activeHour) : "--"} </span>
+                <span class="timepicker__header-separator">:</span>
+                <span class="timepicker__header-item">
+                  ${activeMinute !== null ? this.padStart(activeMinute) : "--"}
+                </span>
+                <span class="timepicker__header-separator">:</span>
+                <span class="timepicker__header-item">
+                  ${activeSecond !== null ? this.padStart(activeSecond) : "--"}
+                </span>
+              </div>
+            ` : ""}
+        <div class="timepicker__margin">
+          <div part="margin-cell-first"></div>
+          <div part="margin-cell"></div>
+          <div part="margin-cell"></div>
+        </div>
+        <div class="timepicker__columns" part="columns">
+          <div class="timepicker__column" part="column hour">
+            ${hours.map(
+      (hour) => b`
+                <div
+                  class="timepicker__item ${e({
+        "timepicker__item--selected": hour === activeHour
+      })}"
+                  part="item hour"
+                  @click="${() => this.updateTime("hour", hour)}"
+                >
+                  ${this.padStart(hour)}
+                </div>
+              `
+    )}
+            <div class="timepicker__pad"></div>
+          </div>
+          <div class="timepicker__column" part="column minute">
+            ${minutes.map(
+      (minute) => b`
+                <div
+                  class="timepicker__item ${e({
+        "timepicker__item--selected": minute === activeMinute
+      })}"
+                  part="item minute"
+                  @click="${() => this.updateTime("minute", minute)}"
+                >
+                  ${this.padStart(minute)}
+                </div>
+              `
+    )}
+            <div class="timepicker__pad"></div>
+          </div>
+          <div class="timepicker__column" part="column second">
+            ${seconds.map(
+      (second) => b`
+                <div
+                  class="timepicker__item ${e({
+        "timepicker__item--selected": second === activeSecond
+      })}"
+                  part="item second"
+                  @click="${() => this.updateTime("second", second)}"
+                >
+                  ${this.padStart(second)}
+                </div>
+              `
+    )}
+            <div class="timepicker__pad"></div>
+          </div>
+        </div>
+
+        ${this.withFooter ? b`
+              <div class="timepicker__footer" part="footer">
+                <sl-button
+                  size="small"
+                  variant="primary"
+                  @click=${() => {
+      this.emit("sl-select", { detail: { value: this.value } });
+    }}
+                >
+                  ${locale.confirmText}
+                </sl-button>
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+SlTimePanel.styles = [component_styles_default, time_panel_styles_default];
+SlTimePanel.dependencies = { "sl-button": SlButton };
+__decorateClass([
+  n({ attribute: false })
+], SlTimePanel.prototype, "value", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "no-header" })
+], SlTimePanel.prototype, "noHeader", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "with-footer" })
+], SlTimePanel.prototype, "withFooter", 2);
+__decorateClass([
+  r()
+], SlTimePanel.prototype, "isTimeUpdating", 2);
+__decorateClass([
+  watch("value")
+], SlTimePanel.prototype, "handleValueChange", 1);
+
+export {
+  SlTimePanel
+};

package/cdn/chunks/chunk.IEAZDAMS.js

@@ -0,0 +1,24 @@
+import {
+  SlMutationObserver
+} from "./chunk.IEBKFWRY.js";
+
+// src/react/mutation-observer/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-mutation-observer";
+SlMutationObserver.define("sl-mutation-observer");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlMutationObserver,
+  react: React,
+  events: {
+    onSlMutation: "sl-mutation"
+  },
+  displayName: "SlMutationObserver"
+});
+var mutation_observer_default = reactWrapper;
+
+export {
+  mutation_observer_default
+};