@kdcloudjs/shoelace 1.0.18 → 1.0.20

package/cdn/chunks/chunk.2D23USCW.js

@@ -0,0 +1,140 @@
+import {
+  nav_item_styles_default
+} from "./chunk.ZHYOC7HD.js";
+import {
+  HasSlotController
+} from "./chunk.NYIIDP5N.js";
+import {
+  e
+} from "./chunk.VHCLMDG7.js";
+import {
+  component_styles_default
+} from "./chunk.NDXSHFSW.js";
+import {
+  ShoelaceElement,
+  n
+} from "./chunk.C32UDDJX.js";
+import {
+  b
+} from "./chunk.7WSF3BCU.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/nav-item/nav-item.component.ts
+var SlNavItem = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "prefix", "suffix");
+    this.value = "";
+    this.disabled = false;
+    this.active = false;
+    this.href = "";
+    this.rel = "noreferrer noopener";
+    this.mode = "vertical";
+  }
+  handleClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    this.emit("sl-nav-select", { detail: { item: this } });
+  }
+  handleKeyDown(event) {
+    if (this.disabled) {
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.emit("sl-nav-select", { detail: { item: this } });
+    }
+  }
+  render() {
+    const isLink = !!this.href;
+    const content = b`
+      <span class="nav-item__content">
+        <slot
+          name="prefix"
+          part="prefix"
+          class="nav-item__prefix"
+          style="display: ${this.hasSlotController.test("prefix") ? "flex" : "none"}"
+        ></slot>
+        <slot part="label" class="nav-item__label"></slot>
+        <slot
+          name="suffix"
+          part="suffix"
+          class="nav-item__suffix"
+          style="display: ${this.hasSlotController.test("suffix") ? "flex" : "none"}"
+        ></slot>
+      </span>
+    `;
+    const tag = isLink ? b`
+      <a
+        part="base"
+        class=${e({
+      "nav-item": true,
+      "nav-item--disabled": this.disabled,
+      "nav-item--active": this.active
+    })}
+        href=${this.href}
+        target=${this.target}
+        download=${this.download}
+        rel=${this.target === "_blank" ? this.rel : void 0}
+        @click=${this.handleClick}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        aria-current=${this.active ? "page" : void 0}
+        tabindex=${this.disabled ? "-1" : "0"}
+      >
+        ${content}
+      </a>
+    ` : b`
+      <div
+        part="base"
+        class=${e({
+      "nav-item": true,
+      "nav-item--disabled": this.disabled,
+      "nav-item--active": this.active
+    })}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        aria-current=${this.active ? "page" : void 0}
+        role="menuitem"
+        tabindex=${this.disabled ? "-1" : "0"}
+      >
+        ${content}
+      </div>
+    `;
+    return tag;
+  }
+};
+SlNavItem.styles = [component_styles_default, nav_item_styles_default];
+__decorateClass([
+  n()
+], SlNavItem.prototype, "value", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlNavItem.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlNavItem.prototype, "active", 2);
+__decorateClass([
+  n()
+], SlNavItem.prototype, "href", 2);
+__decorateClass([
+  n()
+], SlNavItem.prototype, "target", 2);
+__decorateClass([
+  n()
+], SlNavItem.prototype, "download", 2);
+__decorateClass([
+  n()
+], SlNavItem.prototype, "rel", 2);
+__decorateClass([
+  n({ reflect: true })
+], SlNavItem.prototype, "mode", 2);
+
+export {
+  SlNavItem
+};

package/cdn/chunks/chunk.2RCCYUF5.js

@@ -0,0 +1,24 @@
+import {
+  SlNavItem
+} from "./chunk.2D23USCW.js";
+
+// src/react/nav-item/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-nav-item";
+SlNavItem.define("sl-nav-item");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlNavItem,
+  react: React,
+  events: {
+    onSlNavSelect: "sl-nav-select"
+  },
+  displayName: "SlNavItem"
+});
+var nav_item_default = reactWrapper;
+
+export {
+  nav_item_default
+};

package/cdn/chunks/chunk.2TKU3L4J.js

@@ -0,0 +1,24 @@
+import {
+  SlTag
+} from "./chunk.Y75WHQLP.js";
+
+// src/react/tag/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-tag";
+SlTag.define("sl-tag");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlTag,
+  react: React,
+  events: {
+    onSlRemove: "sl-remove"
+  },
+  displayName: "SlTag"
+});
+var tag_default = reactWrapper;
+
+export {
+  tag_default
+};

package/cdn/chunks/chunk.2U22GIRT.js

@@ -0,0 +1,25 @@
+import {
+  SlTabGroup
+} from "./chunk.I6RV2R33.js";
+
+// src/react/tab-group/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-tab-group";
+SlTabGroup.define("sl-tab-group");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlTabGroup,
+  react: React,
+  events: {
+    onSlTabShow: "sl-tab-show",
+    onSlTabHide: "sl-tab-hide"
+  },
+  displayName: "SlTabGroup"
+});
+var tab_group_default = reactWrapper;
+
+export {
+  tab_group_default
+};

package/cdn/chunks/chunk.2Y3R65EN.js

@@ -0,0 +1,27 @@
+import {
+  SlDropdown
+} from "./chunk.ULRISOA4.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.2ZZL46WA.js

@@ -0,0 +1,26 @@
+import {
+  SlRadioGroup
+} from "./chunk.NLKQ7WRY.js";
+
+// src/react/radio-group/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-radio-group";
+SlRadioGroup.define("sl-radio-group");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlRadioGroup,
+  react: React,
+  events: {
+    onSlChange: "sl-change",
+    onSlInput: "sl-input",
+    onSlInvalid: "sl-invalid"
+  },
+  displayName: "SlRadioGroup"
+});
+var radio_group_default = reactWrapper;
+
+export {
+  radio_group_default
+};

package/cdn/chunks/chunk.35PB6CZG.js

@@ -0,0 +1,25 @@
+import {
+  SlRadioButton
+} from "./chunk.BCFIC5EH.js";
+
+// src/react/radio-button/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-radio-button";
+SlRadioButton.define("sl-radio-button");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlRadioButton,
+  react: React,
+  events: {
+    onSlBlur: "sl-blur",
+    onSlFocus: "sl-focus"
+  },
+  displayName: "SlRadioButton"
+});
+var radio_button_default = reactWrapper;
+
+export {
+  radio_button_default
+};

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

@@ -0,0 +1,11 @@
+import {
+  SlButton
+} from "./chunk.VRLOBCSH.js";
+
+// src/components/button/button.ts
+var button_default = SlButton;
+SlButton.define("sl-button");
+
+export {
+  button_default
+};

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

@@ -0,0 +1,11 @@
+import {
+  SlSpinner
+} from "./chunk.VEYJKKIO.js";
+
+// src/components/spinner/spinner.ts
+var spinner_default = SlSpinner;
+SlSpinner.define("sl-spinner");
+
+export {
+  spinner_default
+};

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

@@ -0,0 +1,347 @@
+import {
+  component_styles_default
+} from "./chunk.NDXSHFSW.js";
+import {
+  i
+} from "./chunk.7WSF3BCU.js";
+
+// src/components/nav-submenu/nav-submenu.styles.ts
+var nav_submenu_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+    --content-padding: var(--sl-spacing-2x-small);
+    --submenu-offset: var(--sl-spacing-medium);
+    --header-height: var(--sl-nav-item-height, 46px);
+    --header-padding: var(--sl-nav-item-padding-inline, var(--sl-spacing-medium));
+    --header-radius: var(--sl-border-radius-x-medium);
+    --sl-nav-item-padding-start: calc(var(--sl-spacing-3x-large) - var(--sl-spacing-2x-small));
+  }
+
+  .nav-submenu__header {
+    display: flex;
+    align-items: stretch;
+    position: relative;
+    width: 100%;
+    height: var(--header-height);
+    color: var(--sl-nav-item-color, var(--sl-color-neutral-900));
+    background-color: transparent;
+    border: none;
+    font-family: var(--sl-font-sans);
+    font-size: var(--sl-font-size-small);
+    font-weight: var(--sl-font-weight-semibold);
+    line-height: var(--sl-line-height-normal);
+    padding: var(--sl-spacing-2x-small);
+    text-align: start;
+    text-decoration: none;
+    user-select: none;
+    cursor: pointer;
+    transition:
+      var(--sl-transition-fast) background-color,
+      var(--sl-transition-fast) color,
+      var(--sl-transition-fast) box-shadow;
+  }
+
+  .nav-submenu__header-content {
+    display: flex;
+    gap: var(--sl-spacing-x-small);
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    padding-inline: var(--header-padding);
+    padding-block: var(--sl-spacing-x-small);
+    border-radius: var(--header-radius);
+    transition:
+      var(--sl-transition-fast) background-color,
+      var(--sl-transition-fast) box-shadow;
+  }
+
+  .nav-submenu__header:hover:not(.nav-submenu__header--disabled),
+  .nav-submenu__header:focus-visible:not(.nav-submenu__header--disabled) {
+    color: var(--sl-nav-item-hover-color, var(--sl-color-neutral-900));
+    outline: none;
+  }
+
+  .nav-submenu__header:hover:not(.nav-submenu__header--disabled) .nav-submenu__header-content,
+  .nav-submenu__header:focus-visible:not(.nav-submenu__header--disabled) .nav-submenu__header-content {
+    background-color: var(--sl-nav-item-hover-background, var(--sl-color-neutral-100));
+  }
+
+  .nav-submenu__header:focus-visible {
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
+  }
+
+  .nav-submenu__header--disabled {
+    color: var(--sl-color-neutral-400);
+    opacity: 1;
+    cursor: not-allowed;
+  }
+
+  .nav-submenu__header--active:not(.nav-submenu__header--disabled) {
+    color: var(--sl-nav-item-active-color, var(--sl-color-primary-600));
+  }
+
+  .nav-submenu__header--active:not(.nav-submenu__header--disabled) .nav-submenu__header-content {
+    background-color: var(--sl-nav-item-active-background, transparent);
+  }
+
+  .nav-submenu__prefix,
+  .nav-submenu__suffix {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+    color: inherit;
+  }
+
+  .nav-submenu__prefix::slotted(*) {
+    display: inline-flex;
+    width: 20px;
+    height: 20px;
+  }
+
+  .nav-submenu__suffix::slotted(*) {
+    display: inline-flex;
+  }
+
+  .nav-submenu__label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .nav-submenu__label::slotted(*) {
+    color: inherit;
+  }
+
+  .nav-submenu__chevron {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-inline-start: auto;
+    color: var(--sl-color-neutral-500);
+    transition:
+      var(--sl-transition-medium) transform,
+      var(--sl-transition-fast) color;
+    width: 16px;
+    height: 16px;
+  }
+
+  .nav-submenu__header--active .nav-submenu__chevron,
+  :host([open]) .nav-submenu__chevron {
+    color: currentColor;
+  }
+
+  :host([open]) .nav-submenu__chevron {
+    transform: rotate(90deg);
+  }
+
+  :host([mode='vertical-popup'][open]) .nav-submenu__chevron,
+  :host([mode='horizontal'][nested][open]) .nav-submenu__chevron {
+    transform: none;
+  }
+
+  :host([dir='rtl'][open]) .nav-submenu__chevron {
+    transform: rotate(-90deg);
+  }
+
+  :host([mode='vertical'][open]) .nav-submenu__chevron {
+    transform: rotate(180deg);
+  }
+
+  /* Body (Content) */
+  .nav-submenu__body {
+    display: block;
+    overflow: hidden;
+  }
+
+  :host(:not([mode='horizontal']):not([mode='vertical-popup'])) .nav-submenu__body {
+    margin-block-start: 4px;
+    background-color: var(--sl-color-neutral-gray-50);
+  }
+
+  :host([nested]:not([mode='horizontal']):not([mode='vertical-popup'])) .nav-submenu__body {
+    margin-inline-start: 0;
+    background-color: var(--sl-color-neutral-gray-200);
+  }
+
+  :host([nested]:not([mode='horizontal']):not([mode='vertical-popup'])) .nav-submenu__content {
+    --sl-nav-item-padding-start: calc(var(--sl-spacing-4x-large) - var(--sl-spacing-2x-small));
+    --sl-nav-item-hover-background: var(--sl-color-neutral-gray-400);
+  }
+
+  :host([nested]:not([mode='horizontal']):not([mode='vertical-popup'])) .nav-submenu__header-content {
+    padding-inline-start: calc(var(--sl-spacing-3x-large) - var(--sl-spacing-2x-small));
+  }
+
+  .nav-submenu__content {
+    display: grid;
+    gap: 2px;
+  }
+
+  /* Horizontal (Popup) Mode Overrides */
+  :host([mode='horizontal']) .nav-submenu__header {
+    height: 46px;
+    font-size: var(--sl-font-size-small);
+    line-height: 20px;
+  }
+
+  :host([mode='horizontal']) .nav-submenu__header-content {
+    gap: var(--sl-nav-horizontal-item-gap, var(--sl-spacing-x-small));
+    padding-inline: var(--sl-nav-horizontal-item-padding-inline, var(--sl-spacing-medium));
+    padding-block: 0;
+    border-radius: 0;
+  }
+
+  :host([mode='horizontal']) .nav-submenu__header:hover:not(.nav-submenu__header--disabled) {
+    background-color: transparent;
+    color: var(--sl-nav-item-hover-color, var(--sl-color-neutral-900));
+    box-shadow:
+      inset 0 calc(-1 * var(--sl-nav-horizontal-indicator-width, 2px)) 0 0
+      var(--sl-nav-horizontal-indicator-color, var(--sl-color-primary-600));
+  }
+
+  :host([mode='horizontal']) .nav-submenu__header:hover:not(.nav-submenu__header--disabled) .nav-submenu__header-content,
+  :host([mode='horizontal']) .nav-submenu__header:focus-visible:not(.nav-submenu__header--disabled) .nav-submenu__header-content {
+    background-color: transparent;
+  }
+
+  :host([mode='horizontal'][nested]) .nav-submenu__header:hover:not(.nav-submenu__header--disabled) {
+    box-shadow: none;
+  }
+
+  :host([mode='horizontal'][nested]) .nav-submenu__header,
+  :host([mode='vertical-popup'][nested]) .nav-submenu__header {
+    padding: 4px;
+    box-sizing: border-box;
+  }
+
+  :host([mode='horizontal'][nested]) .nav-submenu__header-content,
+  :host([mode='vertical-popup'][nested]) .nav-submenu__header-content {
+    border-radius: var(--header-radius);
+  }
+
+  :host([mode='horizontal'][nested]) .nav-submenu__header:hover:not(.nav-submenu__header--disabled) .nav-submenu__header-content {
+    background-color: var(--sl-nav-item-hover-background, var(--sl-color-neutral-100));
+  }
+
+  :host([mode='horizontal'][open]) .nav-submenu__header {
+    color: var(--sl-nav-item-active-color, var(--sl-color-primary-600));
+    box-shadow: none;
+  }
+
+  :host([mode='horizontal']) .nav-submenu__header--active {
+    color: var(--sl-color-primary-600);
+    box-shadow:
+      inset 0 calc(-1 * var(--sl-nav-horizontal-indicator-width, 2px)) 0 0
+      var(--sl-nav-horizontal-indicator-color, var(--sl-color-primary-600));
+  }
+
+  :host([mode='horizontal']) .nav-submenu__header--active .nav-submenu__header-content {
+    background-color: transparent;
+  }
+
+  :host([mode='horizontal']) .nav-submenu__prefix::slotted(*) {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* Popup Content Style */
+  :host([mode='horizontal']) .nav-submenu__body,
+  :host([mode='vertical-popup']) .nav-submenu__body {
+    background-color: var(--sl-color-neutral-0);
+    border: none;
+    border-radius: var(--sl-border-radius-x-medium);
+    box-shadow: 0px 4px 15px 0px #2F3E611F;
+    min-width: 212px;
+    padding: var(--sl-spacing-2x-small) 0;
+    overflow: visible;
+    --sl-nav-item-height: 46px;
+    --sl-nav-item-padding-inline: var(--sl-spacing-small);
+    --sl-nav-item-radius: var(--sl-border-radius-x-large);
+    --sl-nav-item-hover-background: var(--sl-color-neutral-100);
+    --sl-nav-item-active-background: var(--sl-color-primary-50);
+    --sl-nav-item-active-color: var(--sl-color-primary-600);
+    --sl-nav-item-color: var(--sl-color-neutral-900);
+    --sl-nav-item-divider-width: 1px;
+    --sl-nav-item-divider-color: var(--sl-color-neutral-300);
+    --sl-nav-item-divider-inset: var(--sl-spacing-small);
+  }
+
+  :host([mode='horizontal']) .nav-submenu__body {
+    margin-block-start: var(--sl-spacing-2x-small);
+  }
+
+  :host([mode='horizontal'][nested]) .nav-submenu__body {
+    margin-block-start: 0;
+    margin-inline-start: var(--sl-spacing-2x-small);
+  }
+
+  :host([mode='vertical-popup']) .nav-submenu__body {
+    margin-inline-start: var(--sl-spacing-2x-small);
+  }
+
+  :host([mode='horizontal']) .nav-submenu__content,
+  :host([mode='vertical-popup']) .nav-submenu__content {
+    padding: 0;
+    gap: 0;
+  }
+
+  :host([mode='horizontal']) ::slotted(sl-nav-item),
+  :host([mode='vertical-popup']) ::slotted(sl-nav-item) {
+    --padding-start: var(--sl-spacing-small);
+    --padding-end: var(--sl-spacing-small);
+  }
+
+  :host([mode='horizontal']) ::slotted(sl-nav-submenu),
+  :host([mode='vertical-popup']) ::slotted(sl-nav-submenu) {
+    --padding-start: var(--sl-spacing-large);
+    --padding-end: var(--sl-spacing-large);
+  }
+
+  :host([mode='horizontal']) ::slotted(sl-nav-item[active]) {
+    --sl-nav-item-active-color: var(--sl-color-primary-600);
+    --sl-nav-item-active-background: var(--sl-color-primary-50);
+  }
+
+  :host([mode='horizontal']) ::slotted(sl-nav-submenu[active]),
+  :host([mode='vertical-popup']) ::slotted(sl-nav-submenu[active]) {
+    --sl-nav-item-active-color: var(--sl-color-primary-600);
+    --sl-nav-item-hover-background: var(--sl-color-neutral-100);
+    --sl-nav-item-divider-width: 1px;
+    --sl-nav-item-divider-color: var(--sl-color-neutral-300);
+    --sl-nav-item-divider-inset: var(--sl-spacing-medium);
+  }
+
+  :host([mode='horizontal']:not([nested])) .nav-submenu__chevron {
+    display: none;
+  }
+
+  :host([mode='horizontal'][nested]) .nav-submenu__chevron,
+  :host([mode='vertical-popup']) .nav-submenu__chevron {
+    width: 16px;
+    height: 16px;
+    color: inherit;
+  }
+
+  :host([mode='vertical-popup']) .nav-submenu__header:hover:not(.nav-submenu__header--disabled) {
+    box-shadow: none;
+  }
+
+  :host([mode='horizontal'][nested][open]) .nav-submenu__header,
+  :host([mode='vertical-popup'][nested][open]) .nav-submenu__header {
+    color: var(--sl-color-primary-600);
+  }
+
+  :host([mode='horizontal'][nested][open]) .nav-submenu__header .nav-submenu__header-content,
+  :host([mode='vertical-popup'][nested][open]) .nav-submenu__header .nav-submenu__header-content {
+    background-color: var(--sl-color-primary-50);
+  }
+`;
+
+export {
+  nav_submenu_styles_default
+};