@kdcloudjs/shoelace 1.0.32 → 1.0.34

package/dist/chunks/chunk.2TEPVCQC.js

@@ -0,0 +1,134 @@
+import {
+  radio_button_styles_default
+} from "./chunk.PHLBO5DX.js";
+import {
+  HasSlotController
+} from "./chunk.NYIIDP5N.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.IAKFV7KT.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/radio-button/radio-button.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit/static-html.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query, state } from "lit/decorators.js";
+var SlRadioButton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]", "prefix", "suffix");
+    this.hasFocus = false;
+    this.checked = false;
+    this.disabled = false;
+    this.size = "medium";
+    this.pill = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "presentation");
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("sl-blur");
+  }
+  handleClick(e) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    this.checked = true;
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("sl-focus");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  /** Sets focus on the radio button. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the radio button. */
+  blur() {
+    this.input.blur();
+  }
+  render() {
+    return html`
+      <div part="base" role="presentation">
+        <button
+          part="${`button${this.checked ? " button--checked" : ""}`}"
+          role="radio"
+          aria-checked="${this.checked}"
+          class=${classMap({
+      button: true,
+      "button--default": true,
+      "button--small": this.size === "small",
+      "button--medium": this.size === "medium",
+      "button--large": this.size === "large",
+      "button--checked": this.checked,
+      "button--disabled": this.disabled,
+      "button--focused": this.hasFocus,
+      "button--outline": true,
+      "button--pill": this.pill,
+      "button--has-label": this.hasSlotController.test("[default]"),
+      "button--has-prefix": this.hasSlotController.test("prefix"),
+      "button--has-suffix": this.hasSlotController.test("suffix")
+    })}
+          aria-disabled=${this.disabled}
+          type="button"
+          value=${ifDefined(this.value)}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @click=${this.handleClick}
+        >
+          <slot name="prefix" part="prefix" class="button__prefix"></slot>
+          <slot part="label" class="button__label"></slot>
+          <slot name="suffix" part="suffix" class="button__suffix"></slot>
+        </button>
+      </div>
+    `;
+  }
+};
+SlRadioButton.styles = [component_styles_default, radio_button_styles_default];
+__decorateClass([
+  query(".button")
+], SlRadioButton.prototype, "input", 2);
+__decorateClass([
+  query(".hidden-input")
+], SlRadioButton.prototype, "hiddenInput", 2);
+__decorateClass([
+  state()
+], SlRadioButton.prototype, "hasFocus", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlRadioButton.prototype, "checked", 2);
+__decorateClass([
+  property()
+], SlRadioButton.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlRadioButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlRadioButton.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlRadioButton.prototype, "pill", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SlRadioButton.prototype, "handleDisabledChange", 1);
+
+export {
+  SlRadioButton
+};

package/dist/chunks/chunk.2UCK7XX3.js

@@ -0,0 +1,25 @@
+import {
+  SlCopyButton
+} from "./chunk.JMO7MU4Q.js";
+
+// src/react/copy-button/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-copy-button";
+SlCopyButton.define("sl-copy-button");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlCopyButton,
+  react: React,
+  events: {
+    onSlCopy: "sl-copy",
+    onSlError: "sl-error"
+  },
+  displayName: "SlCopyButton"
+});
+var copy_button_default = reactWrapper;
+
+export {
+  copy_button_default
+};

package/dist/chunks/chunk.2UUJAZ43.js

@@ -0,0 +1,29 @@
+import {
+  SlDrawer
+} from "./chunk.DWVZAQ47.js";
+
+// src/react/drawer/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-drawer";
+SlDrawer.define("sl-drawer");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlDrawer,
+  react: React,
+  events: {
+    onSlShow: "sl-show",
+    onSlAfterShow: "sl-after-show",
+    onSlHide: "sl-hide",
+    onSlAfterHide: "sl-after-hide",
+    onSlInitialFocus: "sl-initial-focus",
+    onSlRequestClose: "sl-request-close"
+  },
+  displayName: "SlDrawer"
+});
+var drawer_default = reactWrapper;
+
+export {
+  drawer_default
+};

package/dist/chunks/chunk.2VL5QPEL.js

@@ -0,0 +1,24 @@
+import {
+  SlFloatButton
+} from "./chunk.FNOIFC2B.js";
+
+// src/react/float-button/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-float-button";
+SlFloatButton.define("sl-float-button");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlFloatButton,
+  react: React,
+  events: {
+    onSlClick: "sl-click"
+  },
+  displayName: "SlFloatButton"
+});
+var float_button_default = reactWrapper;
+
+export {
+  float_button_default
+};

package/dist/chunks/chunk.32NRPGLV.js

@@ -0,0 +1,93 @@
+import {
+  tag_styles_default
+} from "./chunk.LVBOFYKS.js";
+import {
+  SlIconButton
+} from "./chunk.OASYD7GP.js";
+import {
+  LocalizeController
+} from "./chunk.6CTB5ZDJ.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.IAKFV7KT.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/tag/tag.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var SlTag = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.variant = "neutral";
+    this.size = "medium";
+    this.pill = false;
+    this.removable = false;
+  }
+  handleRemoveClick() {
+    this.emit("sl-remove");
+  }
+  render() {
+    return html`
+      <span
+        part="base"
+        class=${classMap({
+      tag: true,
+      // Types
+      "tag--primary": this.variant === "primary",
+      "tag--success": this.variant === "success",
+      "tag--neutral": this.variant === "neutral",
+      "tag--warning": this.variant === "warning",
+      "tag--danger": this.variant === "danger",
+      "tag--text": this.variant === "text",
+      // Sizes
+      "tag--small": this.size === "small",
+      "tag--medium": this.size === "medium",
+      "tag--large": this.size === "large",
+      // Modifiers
+      "tag--pill": this.pill,
+      "tag--removable": this.removable
+    })}
+      >
+        <slot part="content" class="tag__content"></slot>
+
+        ${this.removable ? html`
+              <sl-icon-button
+                part="remove-button"
+                exportparts="base:remove-button__base"
+                name="x-lg"
+                library="system"
+                label=${this.localize.term("remove")}
+                class="tag__remove"
+                @click=${this.handleRemoveClick}
+                tabindex="-1"
+              ></sl-icon-button>
+            ` : ""}
+      </span>
+    `;
+  }
+};
+SlTag.styles = [component_styles_default, tag_styles_default];
+SlTag.dependencies = { "sl-icon-button": SlIconButton };
+__decorateClass([
+  property({ reflect: true })
+], SlTag.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlTag.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlTag.prototype, "pill", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlTag.prototype, "removable", 2);
+
+export {
+  SlTag
+};

package/dist/chunks/chunk.366H3MAH.js

@@ -0,0 +1,217 @@
+// 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 */
+  }
+
+  .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;
+  }
+
+  .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);
+  }
+  .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: var(--sl-spacing-x-small, 0.5rem) 0;
+    background: var(--sl-color-neutral-100, #f5f5f5);
+  }
+
+  .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;
+    height: auto; /* Adaptive height */
+  }
+
+  .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: 40px;
+    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% - 20px);
+    left: 0;
+    width: 100%;
+    background: linear-gradient(to bottom, var(--sl-color-neutral-50, #fafafa) 0%, rgba(245, 245, 245, 0) 100%);
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  .date-panel__wheel-translate-bottom {
+    position: absolute;
+    bottom: 0;
+    height: calc(50% - 20px);
+    left: 0;
+    width: 100%;
+    background: linear-gradient(to top, var(--sl-color-neutral-50, #fafafa) 0%, rgba(245, 245, 245, 0) 100%);
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  .date-panel__wheel-highlight {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: 40px;
+    margin-top: -20px; /* Half of height */
+    // 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% - 20px);
+    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
+};

package/dist/chunks/chunk.3FVW7UFF.js

@@ -0,0 +1,25 @@
+import {
+  carousel_item_styles_default
+} from "./chunk.NQ44LUGM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.IAKFV7KT.js";
+
+// src/components/carousel-item/carousel-item.component.ts
+import { html } from "lit";
+var SlCarouselItem = class extends ShoelaceElement {
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  render() {
+    return html` <slot></slot> `;
+  }
+};
+SlCarouselItem.styles = [component_styles_default, carousel_item_styles_default];
+
+export {
+  SlCarouselItem
+};

package/dist/chunks/chunk.3J5MMV5Z.js

@@ -0,0 +1,11 @@
+import {
+  SlSpace
+} from "./chunk.CUQWJCVZ.js";
+
+// src/components/space/space.ts
+var space_default = SlSpace;
+SlSpace.define("sl-space");
+
+export {
+  space_default
+};

package/dist/chunks/chunk.3NUDKZJS.js

@@ -0,0 +1,39 @@
+// src/components/thought-chain/thought-chain.styles.ts
+import { css } from "lit";
+var thought_chain_styles_default = css`
+  :host {
+    display: block;
+  }
+
+  .thought-chain {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* ===== Size variants ===== */
+  :host([size='small']) {
+    --sl-thought-chain-gap: var(--sl-spacing-2x-small, 0.25rem);
+    --sl-thought-chain-icon-size: var(--sl-font-size-small, 0.875rem);
+    font-size: var(--sl-font-size-small, 0.875rem);
+  }
+
+  :host([size='middle']) {
+    --sl-thought-chain-gap: var(--sl-spacing-small, 0.75rem);
+    --sl-thought-chain-icon-size: var(--sl-font-size-medium, 1rem);
+    font-size: var(--sl-font-size-medium, 1rem);
+  }
+
+  :host([size='large']) {
+    --sl-thought-chain-gap: var(--sl-spacing-medium, 1rem);
+    --sl-thought-chain-icon-size: var(--sl-font-size-large, 1.25rem);
+    font-size: var(--sl-font-size-large, 1.25rem);
+  }
+
+  :host([dir='rtl']) .thought-chain {
+    direction: rtl;
+  }
+`;
+
+export {
+  thought_chain_styles_default
+};

package/dist/chunks/chunk.3PLTQS7I.js

@@ -0,0 +1,11 @@
+import {
+  SlTextarea
+} from "./chunk.SFYIUAXU.js";
+
+// src/components/textarea/textarea.ts
+var textarea_default = SlTextarea;
+SlTextarea.define("sl-textarea");
+
+export {
+  textarea_default
+};