@kdcloudjs/shoelace 1.0.40 → 1.0.42

package/dist/chunks/chunk.FBEXPB2E.js

@@ -0,0 +1,21 @@
+import {
+  SlVisuallyHidden
+} from "./chunk.76VVG6G3.js";
+
+// src/react/visually-hidden/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "sl-visually-hidden";
+SlVisuallyHidden.define("sl-visually-hidden");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlVisuallyHidden,
+  react: React,
+  events: {},
+  displayName: "SlVisuallyHidden"
+});
+var visually_hidden_default = reactWrapper;
+
+export {
+  visually_hidden_default
+};

package/dist/chunks/chunk.FGRJGNL3.js

@@ -0,0 +1,90 @@
+import {
+  breadcrumb_styles_default
+} from "./chunk.P4NYDBZP.js";
+import {
+  LocalizeController
+} from "./chunk.6CTB5ZDJ.js";
+import {
+  SlIcon
+} from "./chunk.BYYZZMGG.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.HDL3N2D6.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.FN5R7ZH4.js

@@ -0,0 +1,11 @@
+import {
+  SlThoughtChainNode
+} from "./chunk.YR7LKWFQ.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.FQ2H66KA.js

@@ -0,0 +1,126 @@
+// src/components/checkbox/checkbox.styles.ts
+import { css } from "lit";
+var checkbox_styles_default = css`
+  :host {
+    display: inline-block;
+  }
+
+  .checkbox {
+    position: relative;
+    display: inline-flex;
+    align-items: flex-start;
+    font-family: var(--sl-input-font-family, var(--sl-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif));
+    font-weight: var(--sl-input-font-weight, var(--sl-font-weight-normal, 400));
+    color: var(--sl-input-label-color, inherit);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .checkbox--small {
+    --toggle-size: var(--sl-toggle-size-small, calc(16 * 1 / var(--kdds-base-font-size, 16) * 1rem));
+    font-size: var(--sl-input-font-size-small, var(--sl-font-size-x-small, calc(16 * 0.75 / var(--kdds-base-font-size, 16) * 1rem)));
+  }
+
+  .checkbox--medium {
+    --toggle-size: var(--sl-toggle-size-medium, calc(16 * 1.25 / var(--kdds-base-font-size, 16) * 1rem));
+    font-size: var(--sl-input-font-size-medium, var(--sl-font-size-small, calc(16 * 0.875 / var(--kdds-base-font-size, 16) * 1rem)));
+  }
+
+  .checkbox--large {
+    --toggle-size: var(--sl-toggle-size-large, calc(16 * 1.5 / var(--kdds-base-font-size, 16) * 1rem));
+    font-size: var(--sl-input-font-size-large, var(--sl-font-size-medium, calc(16 * 1 / var(--kdds-base-font-size, 16) * 1rem)));
+  }
+
+  .checkbox__control {
+    flex: 0 0 auto;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--toggle-size);
+    height: var(--toggle-size);
+    border: solid var(--sl-input-border-width, 1px) var(--sl-input-border-color, var(--sl-color-neutral-300, #d9d9d9));
+    border-radius: 2px;
+    background-color: var(--sl-input-background-color, var(--sl-color-neutral-0, hsl(0, 0%, 100%)));
+    color: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
+    transition:
+      var(--sl-transition-fast, 150ms) border-color,
+      var(--sl-transition-fast, 150ms) background-color,
+      var(--sl-transition-fast, 150ms) color,
+      var(--sl-transition-fast, 150ms) box-shadow;
+  }
+
+  .checkbox__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  .checkbox__checked-icon,
+  .checkbox__indeterminate-icon {
+    display: inline-flex;
+    width: var(--toggle-size);
+    height: var(--toggle-size);
+  }
+
+  /* Hover */
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
+    border-color: var(--sl-input-border-color-hover, var(--sl-color-primary-600, #5582f3));
+    background-color: var(--sl-input-background-color-hover, var(--sl-input-background-color, var(--sl-color-neutral-0, hsl(0, 0%, 100%))));
+  }
+
+  /* Focus */
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
+    outline: var(--sl-focus-ring, solid 1px var(--sl-color-primary-600, #5582f3));
+    outline-offset: var(--sl-focus-ring-offset, 1px);
+  }
+
+  /* Checked/indeterminate */
+  .checkbox--checked .checkbox__control,
+  .checkbox--indeterminate .checkbox__control {
+    border-color: var(--sl-color-primary-600, #5582f3);
+    background-color: var(--sl-color-primary-600, #5582f3);
+  }
+
+  /* Checked/indeterminate + hover */
+  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {
+    border-color: var(--sl-color-primary-500, #87a9ff);
+    background-color: var(--sl-color-primary-500, #87a9ff);
+  }
+
+  /* Checked/indeterminate + focus */
+  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control,
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
+    outline: var(--sl-focus-ring, solid 1px var(--sl-color-primary-600, #5582f3));
+    outline-offset: var(--sl-focus-ring-offset, 1px);
+  }
+
+  /* Disabled */
+  .checkbox--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .checkbox__label {
+    display: inline-block;
+    color: var(--sl-input-label-color, inherit);
+    line-height: var(--toggle-size);
+    margin-inline-start: 0.5em;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  :host([required]) .checkbox__label::after {
+    content: var(--sl-input-required-content, '*');
+    color: var(--sl-input-required-content-color, var(--sl-color-danger-600, #f12234));
+    margin-inline-start: var(--sl-input-required-content-offset, -2px);
+    font-size: 1.2em;
+  }
+`;
+
+export {
+  checkbox_styles_default
+};

package/dist/chunks/chunk.FQJRRUJI.js

@@ -0,0 +1,11 @@
+import {
+  SlTreeItem
+} from "./chunk.SPZDVICF.js";
+
+// src/components/tree-item/tree-item.ts
+var tree_item_default = SlTreeItem;
+SlTreeItem.define("sl-tree-item");
+
+export {
+  tree_item_default
+};

package/dist/chunks/chunk.FY5MMQWD.js

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

package/dist/chunks/chunk.G2DGLGJU.js

@@ -0,0 +1,11 @@
+import {
+  SlInput
+} from "./chunk.SFGRSHKM.js";
+
+// src/components/input/input.ts
+var input_default = SlInput;
+SlInput.define("sl-input");
+
+export {
+  input_default
+};

package/dist/chunks/chunk.G3SBOPRT.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.HDL3N2D6.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.G4JBXOZZ.js

@@ -0,0 +1,63 @@
+import {
+  tab_panel_styles_default
+} from "./chunk.BQSEJD7X.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.HDL3N2D6.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/tab-panel/tab-panel.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var id = 0;
+var SlTabPanel = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.attrId = ++id;
+    this.componentId = `sl-tab-panel-${this.attrId}`;
+    this.name = "";
+    this.active = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+    this.setAttribute("role", "tabpanel");
+  }
+  handleActiveChange() {
+    this.setAttribute("aria-hidden", this.active ? "false" : "true");
+  }
+  render() {
+    return html`
+      <slot
+        part="base"
+        class=${classMap({
+      "tab-panel": true,
+      "tab-panel--active": this.active
+    })}
+      ></slot>
+    `;
+  }
+};
+SlTabPanel.styles = [component_styles_default, tab_panel_styles_default];
+__decorateClass([
+  property({ reflect: true })
+], SlTabPanel.prototype, "name", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlTabPanel.prototype, "active", 2);
+__decorateClass([
+  watch("active")
+], SlTabPanel.prototype, "handleActiveChange", 1);
+
+export {
+  SlTabPanel
+};