@kdcloudjs/shoelace 0.0.2 → 1.0.0

package/dist/chunks/{chunk.MAQXLKQ7.js → chunk.HPOVPECL.js}

@@ -10,7 +10,7 @@ var button_styles_default = css`
 
   .button {
     display: inline-flex;
-    align-items: stretch;
+    align-items: center;
     justify-content: center;
     width: 100%;
     border-style: solid;
@@ -22,7 +22,7 @@ var button_styles_default = css`
     -webkit-user-select: none;
     white-space: nowrap;
     vertical-align: middle;
-    padding: 0;
+    padding: var(--sl-spacing-x-small);
     transition:
       var(--sl-transition-x-fast) background-color,
       var(--sl-transition-x-fast) color,
@@ -79,20 +79,43 @@ var button_styles_default = css`
     background-color: var(--sl-color-neutral-0);
     border-color: var(--sl-input-border-color);
     color: var(--sl-color-neutral-700);
+    height: var(--sl-input-height-medium);
+    min-height: var(--sl-input-height-medium);
+    padding-top: 0;
+    padding-bottom: 0;
   }
 
   .button--standard.button--default:hover:not(.button--disabled) {
-    background-color: var(--sl-color-primary-50);
-    border-color: var(--sl-color-primary-300);
-    color: var(--sl-color-primary-700);
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-primary-600);
+    color: var(--sl-color-primary-600);
   }
 
   .button--standard.button--default:active:not(.button--disabled) {
-    background-color: var(--sl-color-primary-100);
-    border-color: var(--sl-color-primary-400);
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-primary-700);
     color: var(--sl-color-primary-700);
   }
 
+  /* Default button sizes with custom hover styling */
+  // .button--standard.button--default.button--small:hover:not(.button--disabled) {
+  //   background-color: var(--sl-color-neutral-0);
+  //   border-color: var(--sl-color-primary-600);
+  //   color: var(--sl-color-primary-600);
+  // }
+
+  // .button--standard.button--default.button--medium:hover:not(.button--disabled) {
+  //   background-color: var(--sl-color-neutral-0);
+  //   border-color: var(--sl-color-primary-600);
+  //   color: var(--sl-color-primary-600);
+  // }
+
+  // .button--standard.button--default.button--large:hover:not(.button--disabled) {
+  //   background-color: var(--sl-color-neutral-0);
+  //   border-color: var(--sl-color-primary-600);
+  //   color: var(--sl-color-primary-600);
+  // }
+
   /* Primary */
   .button--standard.button--primary {
     background-color: var(--sl-color-primary-600);
@@ -107,11 +130,19 @@ var button_styles_default = css`
   }
 
   .button--standard.button--primary:active:not(.button--disabled) {
-    background-color: var(--sl-color-primary-600);
-    border-color: var(--sl-color-primary-600);
+    background-color: var(--sl-color-primary-700);
+    border-color: var(--sl-color-primary-700);
     color: var(--sl-color-neutral-0);
   }
 
+  /* Force primary buttons to a fixed height unless overridden by size modifiers */
+  .button--standard.button--primary {
+    height: var(--sl-input-height-medium);
+    min-height: var(--sl-input-height-medium);
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
   /* Success */
   .button--standard.button--success {
     background-color: var(--sl-color-success-600);
@@ -126,8 +157,8 @@ var button_styles_default = css`
   }
 
   .button--standard.button--success:active:not(.button--disabled) {
-    background-color: var(--sl-color-success-600);
-    border-color: var(--sl-color-success-600);
+    background-color: var(--sl-color-success-700);
+    border-color: var(--sl-color-success-700);
     color: var(--sl-color-neutral-0);
   }
 
@@ -163,8 +194,8 @@ var button_styles_default = css`
   }
 
   .button--standard.button--warning:active:not(.button--disabled) {
-    background-color: var(--sl-color-warning-600);
-    border-color: var(--sl-color-warning-600);
+    background-color: var(--sl-color-warning-700);
+    border-color: var(--sl-color-warning-700);
     color: var(--sl-color-neutral-0);
   }
 
@@ -182,8 +213,8 @@ var button_styles_default = css`
   }
 
   .button--standard.button--danger:active:not(.button--disabled) {
-    background-color: var(--sl-color-danger-600);
-    border-color: var(--sl-color-danger-600);
+    background-color: var(--sl-color-danger-700);
+    border-color: var(--sl-color-danger-700);
     color: var(--sl-color-neutral-0);
   }
 
@@ -194,6 +225,7 @@ var button_styles_default = css`
   .button--outline {
     background: none;
     border: solid 1px;
+    border-radius: var(--sl-border-radius-small);
   }
 
   /* Default */
@@ -205,14 +237,14 @@ var button_styles_default = css`
   .button--outline.button--default:hover:not(.button--disabled),
   .button--outline.button--default.button--checked:not(.button--disabled) {
     border-color: var(--sl-color-primary-600);
-    background-color: var(--sl-color-primary-600);
-    color: var(--sl-color-neutral-0);
+    background-color: var(--sl-color-neutral-0);
+    color: var(--sl-color-primary-600);
   }
 
   .button--outline.button--default:active:not(.button--disabled) {
     border-color: var(--sl-color-primary-700);
-    background-color: var(--sl-color-primary-700);
-    color: var(--sl-color-neutral-0);
+    background-color: var(--sl-color-neutral-0);
+    color: var(--sl-color-primary-700);
   }
 
   /* Primary */
@@ -224,12 +256,13 @@ var button_styles_default = css`
   .button--outline.button--primary:hover:not(.button--disabled),
   .button--outline.button--primary.button--checked:not(.button--disabled) {
     background-color: var(--sl-color-primary-600);
+    border-color: var(--sl-color-primary-600);
     color: var(--sl-color-neutral-0);
   }
 
   .button--outline.button--primary:active:not(.button--disabled) {
-    border-color: var(--sl-color-primary-700);
-    background-color: var(--sl-color-primary-700);
+    border-color: var(--sl-color-primary-800);
+    background-color: var(--sl-color-primary-800);
     color: var(--sl-color-neutral-0);
   }
 
@@ -336,34 +369,34 @@ var button_styles_default = css`
   .button--text:active:not(.button--disabled) {
     background-color: transparent;
     border-color: transparent;
-    color: var(--sl-color-primary-700);
+    color: var(--sl-color-primary-800);
   }
 
   /*
    * Size modifiers
    */
 
-  .button--small {
-    height: auto;
+  .button--standard.button--small {
+    height: var(--sl-input-height-small);
     min-height: var(--sl-input-height-small);
     font-size: var(--sl-button-font-size-small);
-    line-height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);
+    padding: 0 var(--sl-spacing-x-small);
     border-radius: var(--sl-input-border-radius-small);
   }
 
-  .button--medium {
-    height: auto;
+  .button--standard.button--medium {
+    height: var(--sl-input-height-medium);
     min-height: var(--sl-input-height-medium);
     font-size: var(--sl-button-font-size-medium);
-    line-height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
+    padding: 0 var(--sl-spacing-x-small);
     border-radius: var(--sl-input-border-radius-medium);
   }
 
-  .button--large {
-    height: auto;
+  .button--standard.button--large {
+    height: var(--sl-input-height-large);
     min-height: var(--sl-input-height-large);
     font-size: var(--sl-button-font-size-large);
-    line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
+    padding: 0 var(--sl-spacing-small);
     border-radius: var(--sl-input-border-radius-large);
   }
 
@@ -374,15 +407,56 @@ var button_styles_default = css`
   .button--pill.button--small {
     border-radius: var(--sl-input-height-small);
   }
+  .button--pill.button--small.button--standard:hover:not(.button--disabled) {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-primary-600);
+    color: var(--sl-color-primary-600);
+  }
+
+  .button--pill.button--small.button--standard.button--default:active:not(.button--disabled) {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-primary-700);
+    color: var(--sl-color-primary-700);
+  }
 
   .button--pill.button--medium {
     border-radius: var(--sl-input-height-medium);
   }
 
+  .button--pill.button--medium.button--standard:hover:not(.button--disabled) {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-primary-600);
+    color: var(--sl-color-primary-600);
+  }
+
+  .button--pill.button--medium.button--standard.button--default:active:not(.button--disabled) {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-primary-700);
+    color: var(--sl-color-primary-700);
+  }
+
   .button--pill.button--large {
     border-radius: var(--sl-input-height-large);
   }
 
+  .button--pill.button--large.button--standard:hover:not(.button--disabled) {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-primary-600);
+    color: var(--sl-color-primary-600);
+  }
+
+  .button--pill.button--large.button--standard.button--default:active:not(.button--disabled) {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-primary-700);
+    color: var(--sl-color-primary-700);
+  }
+
+  .button--standard.button--default.button--disabled {
+    background-color: var(--sl-color-neutral-100);
+    border-color: var(--sl-color-neutral-300);
+    color: var(--sl-color-neutral-500);
+    opacity: 1;
+  }
   /*
    * Circle modifier
    */
@@ -394,17 +468,20 @@ var button_styles_default = css`
 
   .button--circle.button--small {
     width: var(--sl-input-height-small);
-    border-radius: 50%;
+    border-radius: var(--sl-border-radius-circle);
+    padding: 0;
   }
 
   .button--circle.button--medium {
     width: var(--sl-input-height-medium);
-    border-radius: 50%;
+    border-radius: var(--sl-border-radius-circle);
+    padding: 0;
   }
 
   .button--circle.button--large {
     width: var(--sl-input-height-large);
-    border-radius: 50%;
+    border-radius: var(--sl-border-radius-circle);
+    padding: 0;
   }
 
   .button--circle .button__prefix,
@@ -474,69 +551,70 @@ var button_styles_default = css`
    */
 
   .button--has-label.button--small .button__label {
-    padding: 0 var(--sl-spacing-small);
+    // padding: 0 var(--sl-spacing-small);
   }
 
   .button--has-label.button--medium .button__label {
-    padding: 0 var(--sl-spacing-medium);
+    // padding: 0 var(--sl-spacing-medium);
   }
 
   .button--has-label.button--large .button__label {
-    padding: 0 var(--sl-spacing-large);
+    // padding: 0 var(--sl-spacing-large);
   }
 
   .button--has-prefix.button--small {
-    padding-inline-start: var(--sl-spacing-x-small);
+    // padding-inline-start: var(--sl-spacing-x-small);
   }
 
   .button--has-prefix.button--small .button__label {
-    padding-inline-start: var(--sl-spacing-x-small);
+    padding-inline-start: var(--sl-spacing-2x-small);
+    padding-inline-end: var(--sl-spacing-2x-small);
   }
 
-  .button--has-prefix.button--medium {
-    padding-inline-start: var(--sl-spacing-small);
+  .button--has-prefix.button--medium .button__label {
+    padding-inline-start: var(--sl-spacing-2x-small);
+    padding-inline-end: var(--sl-spacing-2x-small);
   }
 
-  .button--has-prefix.button--medium .button__label {
-    padding-inline-start: var(--sl-spacing-small);
+  .button--has-prefix.button--large .button__label {
+    padding-inline-start: var(--sl-spacing-2x-small);
+    padding-inline-end: var(--sl-spacing-2x-small);
   }
 
   .button--has-prefix.button--large {
-    padding-inline-start: var(--sl-spacing-small);
+    // padding-inline-start: var(--sl-spacing-small);
   }
 
   .button--has-prefix.button--large .button__label {
-    padding-inline-start: var(--sl-spacing-small);
+    padding-inline-start: var(--sl-spacing-2x-small);
   }
 
   .button--has-suffix.button--small,
   .button--caret.button--small {
-    padding-inline-end: var(--sl-spacing-x-small);
+    // padding-inline-end: var(--sl-spacing-x-small);
   }
 
   .button--has-suffix.button--small .button__label,
   .button--caret.button--small .button__label {
-    padding-inline-end: var(--sl-spacing-x-small);
-  }
-
-  .button--has-suffix.button--medium,
-  .button--caret.button--medium {
-    padding-inline-end: var(--sl-spacing-small);
+    padding-inline-start: var(--sl-spacing-2x-small);
+    padding-inline-end: var(--sl-spacing-2x-small);
   }
 
   .button--has-suffix.button--medium .button__label,
   .button--caret.button--medium .button__label {
-    padding-inline-end: var(--sl-spacing-small);
-  }
-
-  .button--has-suffix.button--large,
-  .button--caret.button--large {
-    padding-inline-end: var(--sl-spacing-small);
+    padding-inline-start: var(--sl-spacing-2x-small);
+    padding-inline-end: var(--sl-spacing-2x-small);
   }
 
   .button--has-suffix.button--large .button__label,
   .button--caret.button--large .button__label {
-    padding-inline-end: var(--sl-spacing-small);
+    padding-inline-start: var(--sl-spacing-2x-small);
+    padding-inline-end: var(--sl-spacing-2x-small);
+  }
+
+  .button--has-suffix.button--large,
+  .button--caret.button--large {
+    // padding-inline-end: var(--sl-spacing-small);
   }
 
   /*

package/dist/chunks/chunk.HRAFWQWD.js

@@ -0,0 +1,113 @@
+// src/components/table/features/row-selection.ts
+import "@tanstack/lit-table";
+import { html } from "lit";
+var getSelectionColumn = (rowSelection) => {
+  const { type = "checkbox", width = 50, className, disabled } = rowSelection;
+  return {
+    id: "select",
+    size: width,
+    meta: {
+      align: "center",
+      className
+    },
+    header: ({ table }) => {
+      const isCheckbox = type === "checkbox";
+      const fnCallBack = () => {
+        window == null ? void 0 : window.requestAnimationFrame(() => {
+          if (rowSelection == null ? void 0 : rowSelection.onSelectAll) {
+            rowSelection.onSelectAll(
+              table.getIsAllRowsSelected(),
+              table.getFilteredRowModel().rows.map((r) => r.original)
+            );
+          }
+          if (rowSelection == null ? void 0 : rowSelection.onChange) {
+            rowSelection.onChange(
+              table.getSelectedRowModel().rows.map((r) => r.id),
+              table.getSelectedRowModel().rows.map((r) => r.original)
+            );
+          }
+        });
+      };
+      return isCheckbox ? html`<sl-checkbox
+            size="small"
+            part="row-all-select"
+            .checked="${table.getIsAllRowsSelected()}"
+            .indeterminate="${table.getIsSomeRowsSelected()}"
+            ?disabled="${disabled}"
+            @sl-change="${() => {
+        table.toggleAllRowsSelected();
+        fnCallBack();
+      }}"
+          ></sl-checkbox>` : html``;
+    },
+    cell: ({ row, table }) => {
+      var _a;
+      const fnCallback = (e) => {
+        window == null ? void 0 : window.requestAnimationFrame(() => {
+          if (rowSelection == null ? void 0 : rowSelection.onSelect) {
+            rowSelection.onSelect(
+              row.original,
+              row.getIsSelected(),
+              table.getSelectedRowModel().rows.map((r) => r.original),
+              e
+            );
+          }
+          if (rowSelection == null ? void 0 : rowSelection.onChange) {
+            rowSelection.onChange(
+              table.getSelectedRowModel().rows.map((r) => r.id),
+              table.getSelectedRowModel().rows.map((r) => r.original)
+            );
+          }
+        });
+      };
+      const cellProps = ((_a = rowSelection == null ? void 0 : rowSelection.getCheckboxProps) == null ? void 0 : _a.call(rowSelection, row.original)) || {};
+      const { style, classNames } = cellProps;
+      const isDisabled = !row.getCanSelect();
+      return html`
+        ${type === "radio" ? html`<sl-radio
+              part="row-radio-select"
+              size="small"
+              @click="${(e) => {
+        table.resetRowSelection(true);
+        row.toggleSelected(true);
+        fnCallback(e);
+      }}"
+              .checked="${row.getIsSelected()}"
+              ?disabled="${isDisabled}"
+              style="${style}"
+              class="${classNames}"
+            ></sl-radio>` : html`<sl-checkbox
+              part="row-check-select"
+              size="small"
+              @sl-change="${(e) => {
+        row.toggleSelected();
+        fnCallback(e);
+      }}"
+              .checked="${row.getIsSelected()}"
+              ?disabled="${isDisabled}"
+              style="${style}"
+              class="${classNames}"
+            ></sl-checkbox>`}
+      `;
+    }
+  };
+};
+var getRowSelectionOptions = ({
+  rowSelection
+}) => {
+  const rowSelectionOptions = {};
+  if (rowSelection) {
+    const { getCheckboxProps } = rowSelection;
+    rowSelectionOptions.enableRowSelection = (record) => {
+      var _a;
+      return ((_a = getCheckboxProps == null ? void 0 : getCheckboxProps(record.original)) == null ? void 0 : _a.disabled) !== true;
+    };
+    rowSelectionOptions.enableMultiRowSelection = rowSelection.type !== "radio";
+  }
+  return rowSelectionOptions;
+};
+
+export {
+  getSelectionColumn,
+  getRowSelectionOptions
+};

package/dist/chunks/{chunk.J7PLVEQM.js → chunk.HUI4WJKN.js}

@@ -10,6 +10,7 @@ var details_styles_default = css`
     border-radius: var(--sl-border-radius-medium);
     background-color: var(--sl-color-neutral-0);
     overflow-anchor: none;
+    box-shadow: var(--sl-shadow-x-small);
   }
 
   .details--disabled {
@@ -20,7 +21,8 @@ var details_styles_default = css`
     display: flex;
     align-items: center;
     border-radius: inherit;
-    padding: var(--sl-spacing-medium);
+    padding: 0 var(--sl-spacing-medium);
+    height: 40px;
     user-select: none;
     -webkit-user-select: none;
     cursor: pointer;
@@ -59,6 +61,20 @@ var details_styles_default = css`
     display: flex;
     align-items: center;
     transition: var(--sl-transition-medium) rotate ease;
+    margin-right: var(--sl-spacing-2x-small);
+  }
+
+  .details--rtl .details__summary-icon {
+    margin-right: 0;
+    margin-left: var(--sl-spacing-2x-small);
+  }
+
+  .details__summary {
+    font-weight: var(--sl-font-weight-bold);
+  }
+
+  .details__summary-icon sl-icon {
+    color: var(--sl-color-neutral-600);
   }
 
   .details--open .details__summary-icon {
@@ -80,7 +96,7 @@ var details_styles_default = css`
 
   .details__content {
     display: block;
-    padding: var(--sl-spacing-medium);
+    padding: var(--sl-spacing-x-small) var(--sl-spacing-medium);
   }
 `;
 

package/dist/chunks/{chunk.MB7KNGYL.js → chunk.HV7LH2XE.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.6CTB5ZDJ.js";
 import {
   ShoelaceElement
-} from "./chunk.VAOOYX3C.js";
+} from "./chunk.YFUR5BLL.js";
 import {
   __decorateClass
 } from "./chunk.KAW7D32O.js";

package/dist/chunks/{chunk.LXNDNLGT.js → chunk.HZY36HHO.js}

@@ -14,7 +14,7 @@ import {
 } from "./chunk.TUVJKY7S.js";
 import {
   ShoelaceElement
-} from "./chunk.VAOOYX3C.js";
+} from "./chunk.YFUR5BLL.js";
 import {
   __decorateClass
 } from "./chunk.KAW7D32O.js";

package/dist/chunks/{chunk.RWS55LOH.js → chunk.I56YA2FE.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.K35GSB4N.js";
 import {
   SlIcon
-} from "./chunk.LXNDNLGT.js";
+} from "./chunk.HZY36HHO.js";
 import {
   watch
 } from "./chunk.GMYPQTFK.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk.TUVJKY7S.js";
 import {
   ShoelaceElement
-} from "./chunk.VAOOYX3C.js";
+} from "./chunk.YFUR5BLL.js";
 import {
   __decorateClass
 } from "./chunk.KAW7D32O.js";

package/dist/chunks/{chunk.6UYZKYOJ.js → chunk.I5WFQYZE.js}

@@ -1,6 +1,6 @@
 import {
   SlRelativeTime
-} from "./chunk.5SZZZQEY.js";
+} from "./chunk.C2TY2O26.js";
 
 // src/components/relative-time/relative-time.ts
 var relative_time_default = SlRelativeTime;

package/dist/chunks/{chunk.IMQAXOY4.js → chunk.ICQBJXN3.js}

@@ -1,6 +1,6 @@
 import {
   SlProgressRing
-} from "./chunk.RE456CM4.js";
+} from "./chunk.BZ2VS2FQ.js";
 
 // src/components/progress-ring/progress-ring.ts
 var progress_ring_default = SlProgressRing;

package/dist/chunks/{chunk.IB5CAIOM.js → chunk.IE4TYRVL.js}

@@ -1,6 +1,6 @@
 import {
   SlAvatar
-} from "./chunk.RWS55LOH.js";
+} from "./chunk.I56YA2FE.js";
 
 // src/components/avatar/avatar.ts
 var avatar_default = SlAvatar;

package/dist/chunks/{chunk.C3NG3M7R.js → chunk.IFNZ32RQ.js}

@@ -1,6 +1,6 @@
 import {
   SlInclude
-} from "./chunk.2P7ZU66U.js";
+} from "./chunk.URUWFFVY.js";
 
 // src/react/include/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.LVAFQGBI.js → chunk.IGTQGR6B.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.TUVJKY7S.js";
 import {
   ShoelaceElement
-} from "./chunk.VAOOYX3C.js";
+} from "./chunk.YFUR5BLL.js";
 import {
   __decorateClass
 } from "./chunk.KAW7D32O.js";

package/dist/chunks/{chunk.ULVOY2FX.js → chunk.IJKSR74B.js}

@@ -1,12 +1,12 @@
 import {
   tree_item_styles_default
-} from "./chunk.BWVSW6TI.js";
+} from "./chunk.MIGZY5I4.js";
 import {
   SlCheckbox
-} from "./chunk.XPPUPUIY.js";
+} from "./chunk.KBYTZHEC.js";
 import {
   SlSpinner
-} from "./chunk.RG5YP4E7.js";
+} from "./chunk.VKZADIVB.js";
 import {
   getAnimation,
   setDefaultAnimation
@@ -21,7 +21,7 @@ import {
 } from "./chunk.6CTB5ZDJ.js";
 import {
   SlIcon
-} from "./chunk.LXNDNLGT.js";
+} from "./chunk.HZY36HHO.js";
 import {
   watch
 } from "./chunk.GMYPQTFK.js";
@@ -30,7 +30,7 @@ import {
 } from "./chunk.TUVJKY7S.js";
 import {
   ShoelaceElement
-} from "./chunk.VAOOYX3C.js";
+} from "./chunk.YFUR5BLL.js";
 import {
   __decorateClass
 } from "./chunk.KAW7D32O.js";

package/dist/chunks/{chunk.YOY67QCJ.js → chunk.INDYAKUU.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.TUVJKY7S.js";
 import {
   ShoelaceElement
-} from "./chunk.VAOOYX3C.js";
+} from "./chunk.YFUR5BLL.js";
 
 // src/components/card/card.component.ts
 import { classMap } from "lit/directives/class-map.js";

package/dist/chunks/{chunk.AUDNO7AX.js → chunk.IO6GTQTU.js}

@@ -1,6 +1,6 @@
 import {
   SlVisuallyHidden
-} from "./chunk.OH57EZ77.js";
+} from "./chunk.DFNJ6YO5.js";
 
 // src/react/visually-hidden/index.ts
 import * as React from "react";