@kdcloudjs/shoelace 1.0.41 → 1.0.43

package/dist/chunks/chunk.HYBGUDRE.js

@@ -0,0 +1,231 @@
+import {
+  details_styles_default
+} from "./chunk.ARV7TBVG.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.WO7ALQNH.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  shimKeyframesHeightAuto,
+  stopAnimations
+} from "./chunk.VHWATTYS.js";
+import {
+  LocalizeController
+} from "./chunk.6CTB5ZDJ.js";
+import {
+  SlIcon
+} from "./chunk.OZ7SJI5K.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.JROVVA7L.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/details/details.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+var SlDetails = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.open = false;
+    this.disabled = false;
+  }
+  firstUpdated() {
+    this.body.style.height = this.open ? "auto" : "0";
+    if (this.open) {
+      this.details.open = true;
+    }
+    this.detailsObserver = new MutationObserver((changes) => {
+      for (const change of changes) {
+        if (change.type === "attributes" && change.attributeName === "open") {
+          if (this.details.open) {
+            this.show();
+          } else {
+            this.hide();
+          }
+        }
+      }
+    });
+    this.detailsObserver.observe(this.details, { attributes: true });
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this.detailsObserver) == null ? void 0 : _a.disconnect();
+  }
+  handleSummaryClick(event) {
+    event.preventDefault();
+    if (!this.disabled) {
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+      this.header.focus();
+    }
+  }
+  handleSummaryKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+    if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.hide();
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+      event.preventDefault();
+      this.show();
+    }
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.details.open = true;
+      const slShow = this.emit("sl-show", { cancelable: true });
+      if (slShow.defaultPrevented) {
+        this.open = false;
+        this.details.open = false;
+        return;
+      }
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, "details.show", { dir: this.localize.dir() });
+      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+      this.body.style.height = "auto";
+      this.emit("sl-after-show");
+    } else {
+      const slHide = this.emit("sl-hide", { cancelable: true });
+      if (slHide.defaultPrevented) {
+        this.details.open = true;
+        this.open = true;
+        return;
+      }
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, "details.hide", { dir: this.localize.dir() });
+      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+      this.body.style.height = "auto";
+      this.details.open = false;
+      this.emit("sl-after-hide");
+    }
+  }
+  /** Shows the details. */
+  async show() {
+    if (this.open || this.disabled) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "sl-after-show");
+  }
+  /** Hides the details */
+  async hide() {
+    if (!this.open || this.disabled) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "sl-after-hide");
+  }
+  render() {
+    const isRtl = this.localize.dir() === "rtl";
+    return html`
+      <details
+        part="base"
+        class=${classMap({
+      details: true,
+      "details--open": this.open,
+      "details--disabled": this.disabled,
+      "details--rtl": isRtl
+    })}
+      >
+        <summary
+          part="header"
+          id="header"
+          class="details__header"
+          role="button"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls="content"
+          aria-disabled=${this.disabled ? "true" : "false"}
+          tabindex=${this.disabled ? "-1" : "0"}
+          @click=${this.handleSummaryClick}
+          @keydown=${this.handleSummaryKeyDown}
+        >
+          <span part="summary-icon" class="details__summary-icon">
+            <slot name="expand-icon">
+              <sl-icon library="system" name=${isRtl ? "chevron-left" : "chevron-right"}></sl-icon>
+            </slot>
+            <slot name="collapse-icon">
+              <sl-icon library="system" name=${isRtl ? "chevron-left" : "chevron-right"}></sl-icon>
+            </slot>
+          </span>
+
+          <slot name="summary" part="summary" class="details__summary">${this.summary}</slot>
+        </summary>
+
+        <div class="details__body" role="region" aria-labelledby="header">
+          <slot part="content" id="content" class="details__content"></slot>
+        </div>
+      </details>
+    `;
+  }
+};
+SlDetails.styles = [component_styles_default, details_styles_default];
+SlDetails.dependencies = {
+  "sl-icon": SlIcon
+};
+__decorateClass([
+  query(".details")
+], SlDetails.prototype, "details", 2);
+__decorateClass([
+  query(".details__header")
+], SlDetails.prototype, "header", 2);
+__decorateClass([
+  query(".details__body")
+], SlDetails.prototype, "body", 2);
+__decorateClass([
+  query(".details__expand-icon-slot")
+], SlDetails.prototype, "expandIconSlot", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlDetails.prototype, "open", 2);
+__decorateClass([
+  property()
+], SlDetails.prototype, "summary", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlDetails.prototype, "disabled", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], SlDetails.prototype, "handleOpenChange", 1);
+setDefaultAnimation("details.show", {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+setDefaultAnimation("details.hide", {
+  keyframes: [
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+
+export {
+  SlDetails
+};

package/dist/chunks/chunk.I3J6H5SR.js

@@ -0,0 +1,26 @@
+import {
+  SlNav
+} from "./chunk.4QQS5DGK.js";
+
+// src/react/nav/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-nav";
+SlNav.define("sl-nav");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlNav,
+  react: React,
+  events: {
+    onSlChange: "sl-change",
+    onSlNavOpenChange: "sl-nav-open-change",
+    onSlNavSelect: "sl-nav-select"
+  },
+  displayName: "SlNav"
+});
+var nav_default = reactWrapper;
+
+export {
+  nav_default
+};

package/dist/chunks/chunk.I4IN26AL.js

@@ -0,0 +1,11 @@
+import {
+  SlThoughtChainNode
+} from "./chunk.HDY2LT5B.js";
+
+// src/components/thought-chain-node/thought-chain-node.ts
+var thought_chain_node_default = SlThoughtChainNode;
+SlThoughtChainNode.define("sl-thought-chain-node");
+
+export {
+  thought_chain_node_default
+};

package/dist/chunks/chunk.I4P3YPVU.js

@@ -0,0 +1,11 @@
+import {
+  SlSteps
+} from "./chunk.YDB7E2CZ.js";
+
+// src/components/steps/steps.ts
+var steps_default = SlSteps;
+SlSteps.define("sl-steps");
+
+export {
+  steps_default
+};

package/dist/chunks/chunk.I6BRBYE6.js

@@ -0,0 +1,11 @@
+import {
+  SlRating
+} from "./chunk.7BKTCZAZ.js";
+
+// src/components/rating/rating.ts
+var rating_default = SlRating;
+SlRating.define("sl-rating");
+
+export {
+  rating_default
+};

package/dist/chunks/chunk.I72QB2R3.js

@@ -0,0 +1,11 @@
+import {
+  SlCalendar
+} from "./chunk.K3A4R42A.js";
+
+// src/components/calendar/calendar.ts
+var calendar_default = SlCalendar;
+SlCalendar.define("sl-calendar");
+
+export {
+  calendar_default
+};

package/dist/chunks/chunk.IAVBALDB.js

@@ -0,0 +1,11 @@
+import {
+  SlNotification
+} from "./chunk.6RC6ZJG3.js";
+
+// src/components/notification/notification.ts
+var notification_default = SlNotification;
+SlNotification.define("sl-notification");
+
+export {
+  notification_default
+};

package/dist/chunks/chunk.IEYWJQ7M.js

@@ -0,0 +1,90 @@
+import {
+  breadcrumb_styles_default
+} from "./chunk.P4NYDBZP.js";
+import {
+  LocalizeController
+} from "./chunk.6CTB5ZDJ.js";
+import {
+  SlIcon
+} from "./chunk.OZ7SJI5K.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.JROVVA7L.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/breadcrumb/breadcrumb.component.ts
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+var SlBreadcrumb = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.separatorDir = this.localize.dir();
+    this.label = "";
+  }
+  // Generates a clone of the separator element to use for each breadcrumb item
+  getSeparator() {
+    const separator = this.separatorSlot.assignedElements({ flatten: true })[0];
+    const clone = separator.cloneNode(true);
+    [clone, ...clone.querySelectorAll("[id]")].forEach((el) => el.removeAttribute("id"));
+    clone.setAttribute("data-default", "");
+    clone.slot = "separator";
+    return clone;
+  }
+  handleSlotChange() {
+    const items = [...this.defaultSlot.assignedElements({ flatten: true })].filter(
+      (item) => item.tagName.toLowerCase() === "sl-breadcrumb-item"
+    );
+    items.forEach((item, index) => {
+      const separator = item.querySelector('[slot="separator"]');
+      if (separator === null) {
+        item.append(this.getSeparator());
+      } else if (separator.hasAttribute("data-default")) {
+        separator.replaceWith(this.getSeparator());
+      } else {
+      }
+      if (index === items.length - 1) {
+        item.setAttribute("aria-current", "page");
+      } else {
+        item.removeAttribute("aria-current");
+      }
+    });
+  }
+  render() {
+    if (this.separatorDir !== this.localize.dir()) {
+      this.separatorDir = this.localize.dir();
+      this.updateComplete.then(() => this.handleSlotChange());
+    }
+    return html`
+      <nav part="base" class="breadcrumb" aria-label=${this.label}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </nav>
+
+      <span hidden aria-hidden="true">
+        <slot name="separator">
+          <sl-icon name=${this.localize.dir() === "rtl" ? "chevron-left" : "chevron-right"} library="system"></sl-icon>
+        </slot>
+      </span>
+    `;
+  }
+};
+SlBreadcrumb.styles = [component_styles_default, breadcrumb_styles_default];
+SlBreadcrumb.dependencies = { "sl-icon": SlIcon };
+__decorateClass([
+  query("slot")
+], SlBreadcrumb.prototype, "defaultSlot", 2);
+__decorateClass([
+  query('slot[name="separator"]')
+], SlBreadcrumb.prototype, "separatorSlot", 2);
+__decorateClass([
+  property()
+], SlBreadcrumb.prototype, "label", 2);
+
+export {
+  SlBreadcrumb
+};

package/dist/chunks/chunk.IGGGCNLH.js

@@ -0,0 +1,235 @@
+// src/components/date-panel/date-panel.styles.ts
+import { css } from "lit";
+var date_panel_styles_default = css`
+  :host {
+    display: contents;
+    --sl-mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  }
+
+  /* Mobile Drawer Styles */
+  .date-panel__drawer {
+    --size: auto;
+  }
+
+  .date-panel__drawer::part(body) {
+    padding: 0 0 max(var(--sl-spacing-2x-small, 0.25rem), var(--sl-mobile-safe-area-bottom)) 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+    min-height: 350px; /* Ensure enough height for wheel picker */
+  }
+
+  /* Calendar full width in mobile drawer */
+  .date-panel__calendar {
+    display: block;
+    width: 100%;
+  }
+
+  .date-panel__calendar::part(base) {
+    max-width: none;
+    box-shadow: none;
+    border-radius: 0;
+  }
+
+  .date-panel__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--sl-spacing-2x-small, 0.25rem) var(--sl-spacing-small, 0.75rem);
+    background: var(--sl-color-neutral-50, #fafafa);
+    border-bottom: 1px solid var(--sl-color-neutral-200, #e5e5e5);
+    flex-shrink: 0;
+    min-height: var(--sl-calendar-header-height-mobile, 48px);
+    box-sizing: border-box;
+  }
+
+  .date-panel__title {
+    font-weight: var(--sl-font-weight-bold, 700);
+  }
+
+  /* Wheel Picker */
+  .date-panel__wheel-picker {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding-bottom: max(var(--sl-spacing-2x-small, 0.25rem), var(--sl-mobile-safe-area-bottom));
+    background: var(--sl-color-neutral-50, #fafafa);
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .date-panel__wheel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--sl-spacing-2x-small, 0.25rem) var(--sl-spacing-small, 0.75rem);
+    /* border-bottom: 1px solid var(--sl-color-neutral-200); */
+    flex-shrink: 0;
+    background: var(--sl-color-neutral-50, #fafafa);
+    min-height: var(--sl-calendar-header-height-mobile, 48px);
+    box-sizing: border-box;
+  }
+  .date-panel__wheel-header sl-button:first-child::part(base) {
+    color: var(--sl-color-neutral-900, #212121);
+  }
+
+  .date-panel__wheel-title {
+    font-weight: var(--sl-font-weight-bold, 700);
+    flex: 1;
+    text-align: center;
+  }
+
+  .date-panel__wheel-current-date {
+    text-align: center;
+    font-size: var(--sl-font-size-medium, 1rem);
+    padding: var(--sl-spacing-x-small, 0.5rem) 0;
+    color: var(--sl-color-neutral-900, #212121);
+    border-top: 1px solid var(--sl-color-neutral-200, #e5e5e5);
+    border-bottom: 1px solid var(--sl-color-neutral-200, #e5e5e5);
+  }
+
+  .date-panel__wheel-labels {
+    display: flex;
+    padding: 0;
+    background: var(--sl-color-neutral-100, #f5f5f5);
+    min-height: var(--sl-calendar-label-height-mobile, 32px);
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .date-panel__wheel-labels > div {
+    flex: 1;
+    text-align: center;
+    font-size: var(--sl-font-size-small, 0.875rem);
+    color: var(--sl-color-neutral-500, #999999);
+  }
+
+  .date-panel__wheel-body {
+    flex: 1;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .date-panel__wheel-column {
+    flex: 1;
+    overflow-y: scroll;
+    overflow-x: hidden; /* Prevent horizontal scrolling */
+    scroll-snap-type: y mandatory;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    /* Hide scrollbar */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    position: relative;
+    z-index: 1;
+    touch-action: pan-y; /* Prevent horizontal browser gestures (back/forward) */
+    overscroll-behavior-x: none; /* Prevent horizontal bounce/rubber-banding */
+    display: flex;
+    flex-direction: column;
+  }
+
+  .date-panel__wheel-column::-webkit-scrollbar {
+    display: none;
+  }
+
+  .date-panel__wheel-column--year,
+  .date-panel__wheel-column--month,
+  .date-panel__wheel-column--hour,
+  .date-panel__wheel-column--minute,
+  .date-panel__wheel-column--second {
+    flex: 1;
+  }
+
+  .date-panel__wheel-column-label {
+    text-align: center;
+    font-size: var(--sl-font-size-small, 0.875rem);
+    color: var(--sl-color-neutral-500, #999999);
+    padding: var(--sl-spacing-2x-small, 0.25rem) 0;
+    background: var(--sl-color-neutral-50, #fafafa);
+    border-bottom: 1px solid var(--sl-color-neutral-200, #e5e5e5);
+  }
+
+  .date-panel__wheel-item {
+    height: var(--sl-calendar-wheel-item-height, 50px);
+    flex-shrink: 0; /* Prevent item compression in flex container */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    scroll-snap-align: center;
+    color: var(--sl-color-neutral-400, #b2b2b2);
+    transition: color 0.1s; /* Optimization: Avoid animating geometry */
+    font-size: var(--sl-font-size-medium, 1rem);
+    box-sizing: border-box;
+    will-change: transform; /* Hint for browser */
+  }
+
+  .date-panel__wheel-item--selected {
+    color: var(--sl-color-neutral-900, #212121);
+    /* font-weight: var(--sl-font-weight-bold); */
+  }
+
+  .date-panel__wheel-translate-top {
+    position: absolute;
+    top: 0;
+    height: calc(50% - var(--sl-calendar-wheel-item-height, 50px) / 2);
+    left: 0;
+    width: 100%;
+    background: linear-gradient(to bottom, var(--sl-color-neutral-50, #fafafa) 0%, rgba(245, 245, 245, 0.4) 100%);
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  .date-panel__wheel-translate-bottom {
+    position: absolute;
+    bottom: 0;
+    height: calc(50% - var(--sl-calendar-wheel-item-height, 50px) / 2);
+    left: 0;
+    width: 100%;
+    background: linear-gradient(to top, var(--sl-color-neutral-50, #fafafa) 0%, rgba(245, 245, 245, 0.4) 100%);
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  .date-panel__wheel-highlight {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: var(--sl-calendar-wheel-item-height, 50px);
+    margin-top: calc(var(--sl-calendar-wheel-item-height, 50px) / -2);
+    /* background: var(--sl-color-neutral-100); */
+    opacity: 0.5;
+    border-top: 1px solid var(--sl-color-neutral-200, #e5e5e5);
+    border-bottom: 1px solid var(--sl-color-neutral-200, #e5e5e5);
+    pointer-events: none;
+    z-index: 3;
+    box-sizing: border-box;
+  }
+
+  /* Padding to center the first and last item */
+  /* Dynamic spacer to keep items centered regardless of container height */
+  /* (50% of container) - (half of item height 20px) */
+  .date-panel__wheel-spacer {
+    height: calc(50% - var(--sl-calendar-wheel-item-height, 50px) / 2);
+    flex-shrink: 0;
+  }
+
+  sl-button::part(base) {
+    font-size: var(--sl-button-font-size-medium, var(--sl-font-size-small, 0.875rem));
+    color: var(--sl-color-neutral-900, #212121);
+  }
+  .date-panel__confirm_btn:not([disabled])::part(base) {
+    color: var(--sl-color-primary-600, #5582f3);
+  }
+`;
+
+export {
+  date_panel_styles_default
+};