@kdcloudjs/shoelace 1.0.21 → 1.0.22

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

@@ -1,153 +0,0 @@
-import {
-  nav_styles_default
-} from "./chunk.BLU6UMY3.js";
-import {
-  e
-} from "./chunk.VHCLMDG7.js";
-import {
-  component_styles_default
-} from "./chunk.NDXSHFSW.js";
-import {
-  ShoelaceElement,
-  e as e2,
-  n
-} from "./chunk.BYYTZZD7.js";
-import {
-  b
-} from "./chunk.7WSF3BCU.js";
-import {
-  __decorateClass
-} from "./chunk.CZCSAYQZ.js";
-
-// src/components/nav/nav.component.ts
-var SlNav = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.value = "";
-    this.mode = "vertical";
-    this.handleNavSelect = (event) => {
-      const item = event.detail.item;
-      const previousActive = this.activeItem;
-      const valueChanged = this.value !== item.value;
-      this.value = item.value;
-      this.updateActiveItemFromValue(item);
-      if (valueChanged || previousActive !== item) {
-        this.emit("sl-change");
-      }
-    };
-    this.handleSlotChange = () => {
-      this.updateActiveItemFromValue();
-      this.updateMode();
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("sl-nav-select", this.handleNavSelect);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("sl-nav-select", this.handleNavSelect);
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("value")) {
-      this.updateActiveItem();
-    }
-    if (changedProperties.has("mode")) {
-      this.updateMode();
-    }
-  }
-  updateActiveItem() {
-    this.updateActiveItemFromValue();
-  }
-  updateMode() {
-    const elements = [...this.querySelectorAll("sl-nav-item, sl-nav-group, sl-nav-submenu")];
-    elements.forEach((el) => {
-      const closestSubmenu = el.closest("sl-nav-submenu");
-      if (closestSubmenu && closestSubmenu !== el) {
-        if (this.mode === "horizontal" || this.mode === "vertical-popup") {
-          el.mode = "vertical-popup";
-        } else {
-          el.mode = "vertical";
-        }
-      } else {
-        el.mode = this.mode;
-      }
-    });
-  }
-  getItems() {
-    return [...this.querySelectorAll("sl-nav-item")];
-  }
-  setActiveItem(item) {
-    if (this.activeItem && this.activeItem !== item) {
-      this.activeItem.active = false;
-    }
-    if (item) {
-      item.active = true;
-    }
-    this.activeItem = item;
-  }
-  updateActiveItemFromValue(selectedItem) {
-    const items = this.getItems();
-    const groups = [...this.querySelectorAll("sl-nav-group")];
-    const submenus = [...this.querySelectorAll("sl-nav-submenu")];
-    let nextSelected = selectedItem;
-    if (!nextSelected && this.value !== "") {
-      nextSelected = items.find((item) => item.value === this.value);
-    }
-    this.setActiveItem(nextSelected);
-    items.forEach((item) => {
-      item.active = item === nextSelected;
-    });
-    [...groups, ...submenus].forEach((el) => {
-      el.active = false;
-    });
-    const activeSubmenus = /* @__PURE__ */ new Set();
-    if (nextSelected) {
-      let currentElement = nextSelected.parentElement;
-      while (currentElement && currentElement !== this) {
-        const tagName = currentElement.tagName.toLowerCase();
-        if (tagName === "sl-nav-group" || tagName === "sl-nav-submenu") {
-          currentElement.active = true;
-        }
-        if (tagName === "sl-nav-submenu") {
-          activeSubmenus.add(currentElement);
-        }
-        currentElement = currentElement.parentElement;
-      }
-    }
-    if (this.mode === "vertical" && nextSelected) {
-      submenus.forEach((submenu) => {
-        const shouldOpen = activeSubmenus.has(submenu);
-        submenu.open = shouldOpen;
-      });
-    }
-  }
-  render() {
-    return b`
-      <nav
-        part="base"
-        class=${e({
-      nav: true,
-      "nav--horizontal": this.mode === "horizontal",
-      "nav--vertical": this.mode === "vertical" || this.mode === "vertical-popup"
-    })}
-      >
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </nav>
-    `;
-  }
-};
-SlNav.styles = [component_styles_default, nav_styles_default];
-__decorateClass([
-  e2("slot")
-], SlNav.prototype, "defaultSlot", 2);
-__decorateClass([
-  n({ reflect: true })
-], SlNav.prototype, "value", 2);
-__decorateClass([
-  n({ reflect: true })
-], SlNav.prototype, "mode", 2);
-
-export {
-  SlNav
-};

package/cdn/chunks/chunk.33CEUF35.js

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

package/cdn/chunks/chunk.37EERA2Q.js

@@ -1,21 +0,0 @@
-import {
-  SlBadge
-} from "./chunk.CDJSY4O2.js";
-
-// src/react/badge/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-var tagName = "sl-badge";
-SlBadge.define("sl-badge");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: SlBadge,
-  react: React,
-  events: {},
-  displayName: "SlBadge"
-});
-var badge_default = reactWrapper;
-
-export {
-  badge_default
-};

package/cdn/chunks/chunk.37IV5SCC.js

@@ -1,27 +0,0 @@
-import {
-  SlNavSubmenu
-} from "./chunk.643MR33C.js";
-
-// src/react/nav-submenu/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "sl-nav-submenu";
-SlNavSubmenu.define("sl-nav-submenu");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: SlNavSubmenu,
-  react: React,
-  events: {
-    onSlShow: "sl-show",
-    onSlAfterShow: "sl-after-show",
-    onSlHide: "sl-hide",
-    onSlAfterHide: "sl-after-hide"
-  },
-  displayName: "SlNavSubmenu"
-});
-var nav_submenu_default = reactWrapper;
-
-export {
-  nav_submenu_default
-};

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

@@ -1,24 +0,0 @@
-import {
-  SlTable
-} from "./chunk.ZZ7EFCM4.js";
-
-// src/react/table/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "sl-table";
-SlTable.define("sl-table");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: SlTable,
-  react: React,
-  events: {
-    onChange: "change"
-  },
-  displayName: "SlTable"
-});
-var table_default = reactWrapper;
-
-export {
-  table_default
-};

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

@@ -1,11 +0,0 @@
-import {
-  SlDetails
-} from "./chunk.UJGMQD4L.js";
-
-// src/components/details/details.ts
-var details_default = SlDetails;
-SlDetails.define("sl-details");
-
-export {
-  details_default
-};

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

@@ -1,29 +0,0 @@
-import {
-  SlTreeItem
-} from "./chunk.XLWPI6EW.js";
-
-// src/react/tree-item/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "sl-tree-item";
-SlTreeItem.define("sl-tree-item");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: SlTreeItem,
-  react: React,
-  events: {
-    onSlExpand: "sl-expand",
-    onSlAfterExpand: "sl-after-expand",
-    onSlCollapse: "sl-collapse",
-    onSlAfterCollapse: "sl-after-collapse",
-    onSlLazyChange: "sl-lazy-change",
-    onSlLazyLoad: "sl-lazy-load"
-  },
-  displayName: "SlTreeItem"
-});
-var tree_item_default = reactWrapper;
-
-export {
-  tree_item_default
-};

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

@@ -1,27 +0,0 @@
-import {
-  SlDetails
-} from "./chunk.UJGMQD4L.js";
-
-// src/react/details/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "sl-details";
-SlDetails.define("sl-details");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: SlDetails,
-  react: React,
-  events: {
-    onSlShow: "sl-show",
-    onSlAfterShow: "sl-after-show",
-    onSlHide: "sl-hide",
-    onSlAfterHide: "sl-after-hide"
-  },
-  displayName: "SlDetails"
-});
-var details_default = reactWrapper;
-
-export {
-  details_default
-};

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

@@ -1,24 +0,0 @@
-import {
-  SlTag
-} from "./chunk.BF5VBDIZ.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.3UBQKXGY.js

@@ -1,11 +0,0 @@
-import {
-  SlRadio
-} from "./chunk.LNTQ5KHS.js";
-
-// src/components/radio/radio.ts
-var radio_default = SlRadio;
-SlRadio.define("sl-radio");
-
-export {
-  radio_default
-};

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

@@ -1,347 +0,0 @@
-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
-};