@cordwainer/cw-elements 1.0.2 → 1.1.0-alpha.1

package/cdn/chunks/{chunk.TQZ6L3P4.js → chunk.23QJ7NJJ.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk.UXX4VLJE.js";
 import {
   CwPopup
-} from "./chunk.SMIHYJB7.js";
+} from "./chunk.BBZR4SMX.js";
 import {
   getAnimation,
   setDefaultAnimation
@@ -38,7 +38,7 @@ import {
   CwElement,
   e as e2,
   n
-} from "./chunk.XVXHFMZV.js";
+} from "./chunk.IJV5TSMJ.js";
 import {
   b
 } from "./chunk.6A2LG33L.js";

package/cdn/chunks/{chunk.XOG3NHNL.js → chunk.2AVZV55V.js}

@@ -1,6 +1,6 @@
 import {
   CwSplitPanel
-} from "./chunk.PKD7CGJ4.js";
+} from "./chunk.TMLGI2RQ.js";
 
 // src/react/split-panel/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.5UO6AHMQ.js → chunk.2BZYHVAA.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.NJIHXHXI.js";
 import {
   CwElement
-} from "./chunk.XVXHFMZV.js";
+} from "./chunk.IJV5TSMJ.js";
 import {
   b
 } from "./chunk.6A2LG33L.js";

package/cdn/chunks/{chunk.SMOHZXI4.js → chunk.2ELMNABV.js}

@@ -31,7 +31,7 @@ import {
   e as e2,
   n,
   r
-} from "./chunk.XVXHFMZV.js";
+} from "./chunk.IJV5TSMJ.js";
 import {
   b
 } from "./chunk.6A2LG33L.js";

package/{dist/chunks/chunk.TCNA5JCH.js → cdn/chunks/chunk.2KRRVOTP.js}

@@ -1,6 +1,6 @@
 import {
   CwProgressBar
-} from "./chunk.S4ZWERNN.js";
+} from "./chunk.VG3JLKZT.js";
 
 // src/react/progress-bar/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.ICZSBSUK.js → chunk.2KRVWKPV.js}

@@ -1,6 +1,6 @@
 import {
   CwAnimatedImage
-} from "./chunk.IRW4ZF36.js";
+} from "./chunk.JNVGCUJV.js";
 
 // src/components/animated-image/animated-image.ts
 var animated_image_default = CwAnimatedImage;

package/cdn/chunks/{chunk.RCSVY64A.js → chunk.2M4B6U6R.js}

@@ -1,6 +1,6 @@
 import {
   CwDialog
-} from "./chunk.DTP7WKYG.js";
+} from "./chunk.36KJB3ZP.js";
 
 // src/components/dialog/dialog.ts
 var dialog_default = CwDialog;

package/{dist/chunks/chunk.GBBU2BYQ.js → cdn/chunks/chunk.2MAEADU5.js}

@@ -1,6 +1,6 @@
 import {
   CwSplitPanel
-} from "./chunk.PYQFFEGZ.js";
+} from "./chunk.TMLGI2RQ.js";
 
 // src/components/split-panel/split-panel.ts
 var split_panel_default = CwSplitPanel;

package/cdn/chunks/{chunk.6IQRSUDS.js → chunk.2QQBAJ2H.js}

@@ -1,6 +1,6 @@
 import {
   CwTreeItem
-} from "./chunk.H3OHBUEG.js";
+} from "./chunk.OMQZMDHO.js";
 
 // src/react/tree-item/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.47SIJ5O2.js → chunk.2QZ36WJT.js}

@@ -1,6 +1,6 @@
 import {
   CwSpinner
-} from "./chunk.5UO6AHMQ.js";
+} from "./chunk.2BZYHVAA.js";
 import {
   FormControlController,
   validValidityState
@@ -26,7 +26,7 @@ import {
 } from "./chunk.VBR4VS53.js";
 import {
   CwIcon
-} from "./chunk.ANTTHUGO.js";
+} from "./chunk.5QU7YOU6.js";
 import {
   watch
 } from "./chunk.RB5L7E7Z.js";
@@ -38,7 +38,7 @@ import {
   e as e2,
   n,
   r
-} from "./chunk.XVXHFMZV.js";
+} from "./chunk.IJV5TSMJ.js";
 import {
   __decorateClass
 } from "./chunk.QIOX6AG5.js";

package/cdn/chunks/{chunk.DTP7WKYG.js → chunk.36KJB3ZP.js}

@@ -1,3 +1,6 @@
+import {
+  dialog_styles_default
+} from "./chunk.W7ROZ45G.js";
 import {
   Modal
 } from "./chunk.YR7OVYEM.js";
@@ -5,15 +8,12 @@ import {
   lockBodyScrolling,
   unlockBodyScrolling
 } from "./chunk.PH2N3MLE.js";
-import {
-  dialog_styles_default
-} from "./chunk.W7ROZ45G.js";
 import {
   blurActiveElement
 } from "./chunk.LD4M4QGE.js";
 import {
   CwIconButton
-} from "./chunk.EFEK2W42.js";
+} from "./chunk.5YUYCGQ7.js";
 import {
   getAnimation,
   setDefaultAnimation
@@ -47,7 +47,7 @@ import {
   CwElement,
   e as e2,
   n
-} from "./chunk.XVXHFMZV.js";
+} from "./chunk.IJV5TSMJ.js";
 import {
   b
 } from "./chunk.6A2LG33L.js";

package/cdn/chunks/{chunk.DHFOXVGY.js → chunk.3EFTNCB7.js}

@@ -1,6 +1,6 @@
 import {
   CwImageComparer
-} from "./chunk.6O7IXZWF.js";
+} from "./chunk.QBDAXQRD.js";
 
 // src/components/image-comparer/image-comparer.ts
 var image_comparer_default = CwImageComparer;

package/cdn/chunks/{chunk.FE5PFPCU.js → chunk.3XT5BPUQ.js}

@@ -1,6 +1,6 @@
 import {
   CwCopyButton
-} from "./chunk.ZEJCID2X.js";
+} from "./chunk.XRJQMOKI.js";
 
 // src/components/copy-button/copy-button.ts
 var copy_button_default = CwCopyButton;

package/cdn/chunks/{chunk.4X47BZC4.js → chunk.3ZFAS3AL.js}

@@ -1,6 +1,6 @@
 import {
   CwTree
-} from "./chunk.E46RKBOL.js";
+} from "./chunk.MA7BRXRJ.js";
 
 // src/react/tree/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.EQVCN7G2.js → chunk.423POR7Z.js}

@@ -1,6 +1,6 @@
 import {
   CwFormatNumber
-} from "./chunk.6DMW4GCT.js";
+} from "./chunk.4R6BRK42.js";
 
 // src/components/format-number/format-number.ts
 var format_number_default = CwFormatNumber;

package/cdn/chunks/{chunk.PWK3CNVW.js → chunk.454DLRAB.js}

@@ -1,6 +1,6 @@
 import {
   CwDivider
-} from "./chunk.KHOADYAA.js";
+} from "./chunk.VGZACMVS.js";
 
 // src/components/divider/divider.ts
 var divider_default = CwDivider;

package/cdn/chunks/{chunk.ZJ5MSA5V.js → chunk.4FOMW3EY.js}

@@ -1,6 +1,6 @@
 import {
   CwInput
-} from "./chunk.DN7B4ZTX.js";
+} from "./chunk.PWDUNF72.js";
 
 // src/react/input/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.SZQXKHVQ.js → chunk.4OV6VPEK.js}

@@ -13,7 +13,7 @@ import {
 } from "./chunk.LD4M4QGE.js";
 import {
   CwIconButton
-} from "./chunk.EFEK2W42.js";
+} from "./chunk.5YUYCGQ7.js";
 import {
   getAnimation,
   setDefaultAnimation
@@ -47,7 +47,7 @@ import {
   CwElement,
   e as e2,
   n
-} from "./chunk.XVXHFMZV.js";
+} from "./chunk.IJV5TSMJ.js";
 import {
   b
 } from "./chunk.6A2LG33L.js";

package/cdn/chunks/{chunk.6DMW4GCT.js → chunk.4R6BRK42.js}

@@ -4,7 +4,7 @@ import {
 import {
   CwElement,
   n
-} from "./chunk.XVXHFMZV.js";
+} from "./chunk.IJV5TSMJ.js";
 import {
   __decorateClass
 } from "./chunk.QIOX6AG5.js";

package/cdn/chunks/chunk.57GIFBAS.js

@@ -0,0 +1,341 @@
+import {
+  i
+} from "./chunk.6A2LG33L.js";
+
+// src/components/combobox/combobox.styles.ts
+var combobox_styles_default = i`
+  :host {
+    display: block;
+  }
+
+  /** The popup */
+  .combobox {
+    flex: 1 1 auto;
+    display: inline-flex;
+    width: 100%;
+    position: relative;
+    vertical-align: middle;
+  }
+
+  .combobox::part(popup) {
+    z-index: var(--cw-z-index-dropdown);
+  }
+
+  .combobox[data-current-placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .combobox[data-current-placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  /* Combobox control */
+  .combobox__control {
+    flex: 1;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    position: relative;
+    align-items: center;
+    justify-content: start;
+    flex-wrap: wrap;
+    font-family: var(--cw-input-font-family);
+    font-weight: var(--cw-input-font-weight);
+    letter-spacing: var(--cw-input-letter-spacing);
+    vertical-align: middle;
+    overflow: hidden;
+    cursor: text;
+    transition:
+      var(--cw-transition-fast) color,
+      var(--cw-transition-fast) border,
+      var(--cw-transition-fast) box-shadow,
+      var(--cw-transition-fast) background-color;
+  }
+
+  .combobox__display-input {
+    position: relative;
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 4ch;
+    font: inherit;
+    border: none;
+    background: none;
+    color: var(--cw-input-color);
+    cursor: inherit;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none;
+  }
+
+  .combobox__display-input::placeholder {
+    color: var(--cw-input-placeholder-color);
+  }
+
+  .combobox:not(.combobox--disabled):hover .combobox__display-input {
+    color: var(--cw-input-color-hover);
+  }
+
+  .combobox__display-input:focus {
+    outline: none;
+  }
+
+  .combobox__value-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: -1;
+  }
+
+  .combobox__tags {
+    display: flex;
+    flex: 0 1 auto;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-inline-end: var(--cw-spacing-2x-small);
+  }
+
+  .combobox__tags::slotted(cw-tag) {
+    cursor: pointer !important;
+  }
+
+  .combobox--disabled .combobox__tags,
+  .combobox--disabled .combobox__tags::slotted(cw-tag) {
+    cursor: not-allowed !important;
+  }
+
+  /* Standard comboboxes */
+  .combobox--standard .combobox__control {
+    background-color: var(--cw-input-background-color);
+    border: solid var(--cw-input-border-width) var(--cw-input-border-color);
+  }
+
+  .combobox--standard.combobox--disabled .combobox__control {
+    background-color: var(--cw-input-background-color-disabled);
+    border-color: var(--cw-input-border-color-disabled);
+    color: var(--cw-input-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+    outline: none;
+  }
+
+  .combobox--standard:not(.combobox--disabled).combobox--open .combobox__control,
+  .combobox--standard:not(.combobox--disabled).combobox--focused .combobox__control {
+    background-color: var(--cw-input-background-color-focus);
+    border-color: var(--cw-input-border-color-focus);
+    box-shadow: 0 0 0 var(--cw-focus-ring-width) var(--cw-input-focus-ring-color);
+  }
+
+  /* Filled comboboxes */
+  .combobox--filled .combobox__control {
+    border: none;
+    background-color: var(--cw-input-filled-background-color);
+    color: var(--cw-input-color);
+  }
+
+  .combobox--filled:hover:not(.combobox--disabled) .combobox__control {
+    background-color: var(--cw-input-filled-background-color-hover);
+  }
+
+  .combobox--filled.combobox--disabled .combobox__control {
+    background-color: var(--cw-input-filled-background-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .combobox--filled:not(.combobox--disabled).combobox--open .combobox__control,
+  .combobox--filled:not(.combobox--disabled).combobox--focused .combobox__control {
+    background-color: var(--cw-input-filled-background-color-focus);
+    outline: var(--cw-focus-ring);
+  }
+
+  /* Sizes */
+  .combobox--small .combobox__control {
+    border-radius: var(--cw-input-border-radius-small);
+    font-size: var(--cw-input-font-size-small);
+    min-height: var(--cw-input-height-small);
+    padding-block: 0;
+    padding-inline: var(--cw-input-spacing-small);
+  }
+
+  .combobox--small .combobox__clear {
+    margin-inline-start: var(--cw-input-spacing-small);
+  }
+
+  .combobox--small .combobox__prefix::slotted(*) {
+    margin-inline-end: var(--cw-input-spacing-small);
+  }
+
+  .combobox--small.combobox--multiple .combobox__control {
+    padding-block: 2px;
+  }
+
+  .combobox--small .combobox__tags {
+    gap: 2px;
+  }
+
+  .combobox--medium .combobox__control {
+    border-radius: var(--cw-input-border-radius-medium);
+    font-size: var(--cw-input-font-size-medium);
+    min-height: var(--cw-input-height-medium);
+    padding-block: 0;
+    padding-inline: var(--cw-input-spacing-medium);
+  }
+
+  .combobox--medium .combobox__clear {
+    margin-inline-start: var(--cw-input-spacing-medium);
+  }
+
+  .combobox--medium .combobox__prefix::slotted(*) {
+    margin-inline-end: var(--cw-input-spacing-medium);
+  }
+
+  .combobox--medium.combobox--multiple .combobox__control {
+    padding-block: 3px;
+  }
+
+  .combobox--medium .combobox__tags {
+    gap: 3px;
+  }
+
+  .combobox--large .combobox__control {
+    border-radius: var(--cw-input-border-radius-large);
+    font-size: var(--cw-input-font-size-large);
+    min-height: var(--cw-input-height-large);
+    padding-block: 0;
+    padding-inline: var(--cw-input-spacing-large);
+  }
+
+  .combobox--large .combobox__clear {
+    margin-inline-start: var(--cw-input-spacing-large);
+  }
+
+  .combobox--large .combobox__prefix::slotted(*) {
+    margin-inline-end: var(--cw-input-spacing-large);
+  }
+
+  .combobox--large.combobox--multiple .combobox__control {
+    padding-block: 4px;
+  }
+
+  .combobox--large .combobox__tags {
+    gap: 4px;
+  }
+
+  /* Pills */
+  .combobox--pill.combobox--small .combobox__control {
+    border-radius: var(--cw-input-height-small);
+  }
+
+  .combobox--pill.combobox--medium .combobox__control {
+    border-radius: var(--cw-input-height-medium);
+  }
+
+  .combobox--pill.combobox--large .combobox__control {
+    border-radius: var(--cw-input-height-large);
+  }
+
+  /* Prefix and Suffix */
+  .combobox__prefix,
+  .combobox__suffix {
+    flex: 0;
+    display: inline-flex;
+    align-items: center;
+    color: var(--cw-input-placeholder-color);
+  }
+
+  .combobox__suffix::slotted(*) {
+    margin-inline-start: var(--cw-spacing-small);
+  }
+
+  /* Clear button */
+  .combobox__clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    color: var(--cw-input-icon-color);
+    border: none;
+    background: none;
+    padding: 0;
+    transition: var(--cw-transition-fast) color;
+    cursor: pointer;
+  }
+
+  .combobox__clear:hover {
+    color: var(--cw-input-icon-color-hover);
+  }
+
+  .combobox__clear:focus {
+    outline: none;
+  }
+
+  /* Expand icon */
+  .combobox__expand-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    transition: var(--cw-transition-medium) rotate ease;
+    rotate: 0;
+    margin-inline-start: var(--cw-spacing-small);
+  }
+
+  .combobox--open .combobox__expand-icon {
+    rotate: -180deg;
+  }
+
+  /* Listbox */
+  .combobox__listbox {
+    display: block;
+    position: relative;
+    font-family: var(--cw-font-sans);
+    font-size: var(--cw-font-size-medium);
+    font-weight: var(--cw-font-weight-normal);
+    box-shadow: var(--cw-shadow-large);
+    background: var(--cw-panel-background-color);
+    border: solid var(--cw-panel-border-width) var(--cw-panel-border-color);
+    border-radius: var(--cw-border-radius-medium);
+    padding-block: var(--cw-spacing-x-small);
+    padding-inline: 0;
+    overflow: auto;
+    overscroll-behavior: none;
+
+    /* Make sure it adheres to the popup's auto size */
+    max-width: var(--auto-size-available-width);
+    max-height: var(--auto-size-available-height);
+  }
+
+  .combobox__listbox ::slotted(cw-divider) {
+    --spacing: var(--cw-spacing-x-small);
+  }
+
+  .combobox__listbox ::slotted(small) {
+    display: block;
+    font-size: var(--cw-font-size-small);
+    font-weight: var(--cw-font-weight-semibold);
+    color: var(--cw-color-neutral-500);
+    padding-block: var(--cw-spacing-2x-small);
+    padding-inline: var(--cw-spacing-x-large);
+  }
+
+  /* No options / loading */
+  .combobox__no-options,
+  .combobox__loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--cw-font-size-small);
+    color: var(--cw-color-neutral-500);
+    padding-block: var(--cw-spacing-x-small);
+    padding-inline: var(--cw-spacing-x-large);
+  }
+`;
+
+export {
+  combobox_styles_default
+};

package/cdn/chunks/{chunk.YVSFO245.js → chunk.5BZAHCJF.js}

@@ -1,6 +1,6 @@
 import {
   CwInclude
-} from "./chunk.3IW2ULOI.js";
+} from "./chunk.GAFXEGCL.js";
 
 // src/react/include/index.ts
 import * as React from "react";

package/{dist/chunks/chunk.SUZGOFVF.js → cdn/chunks/chunk.5CNMIFJF.js}

@@ -1,6 +1,6 @@
 import {
   CwBreadcrumb
-} from "./chunk.UIEHFFBV.js";
+} from "./chunk.7J4YZAP7.js";
 
 // src/react/breadcrumb/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.V2JYMFH6.js → chunk.5DTXWFT4.js}

@@ -21,7 +21,7 @@ import {
 } from "./chunk.VBR4VS53.js";
 import {
   CwIcon
-} from "./chunk.ANTTHUGO.js";
+} from "./chunk.5QU7YOU6.js";
 import {
   watch
 } from "./chunk.RB5L7E7Z.js";
@@ -34,7 +34,7 @@ import {
   n,
   r,
   t
-} from "./chunk.XVXHFMZV.js";
+} from "./chunk.IJV5TSMJ.js";
 import {
   b
 } from "./chunk.6A2LG33L.js";

package/cdn/chunks/{chunk.O36Y23HB.js → chunk.5I7XA6M5.js}

@@ -1,6 +1,6 @@
 import {
   CwRadio
-} from "./chunk.Q53KF64A.js";
+} from "./chunk.ACNV6AUB.js";
 
 // src/components/radio/radio.ts
 var radio_default = CwRadio;

package/cdn/chunks/{chunk.ZP2NEQKH.js → chunk.5JUMTF32.js}

@@ -1,6 +1,6 @@
 import {
   CwIcon
-} from "./chunk.ANTTHUGO.js";
+} from "./chunk.5QU7YOU6.js";
 
 // src/react/icon/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.ANTTHUGO.js → chunk.5QU7YOU6.js}

@@ -1,14 +1,14 @@
 import {
   l
 } from "./chunk.H5L5Y6Q5.js";
+import {
+  icon_styles_default
+} from "./chunk.WEEMHBZO.js";
 import {
   getIconLibrary,
   unwatchIcon,
   watchIcon
 } from "./chunk.C4QY7KGQ.js";
-import {
-  icon_styles_default
-} from "./chunk.WEEMHBZO.js";
 import {
   watch
 } from "./chunk.RB5L7E7Z.js";
@@ -19,7 +19,7 @@ import {
   CwElement,
   n,
   r
-} from "./chunk.XVXHFMZV.js";
+} from "./chunk.IJV5TSMJ.js";
 import {
   b
 } from "./chunk.6A2LG33L.js";

package/cdn/chunks/{chunk.YYO5EZ2O.js → chunk.5U7RICDJ.js}

@@ -1,6 +1,6 @@
 import {
   CwSkeleton
-} from "./chunk.TSOJ2LSG.js";
+} from "./chunk.RQTACNRD.js";
 
 // src/components/skeleton/skeleton.ts
 var skeleton_default = CwSkeleton;

package/cdn/chunks/{chunk.EFEK2W42.js → chunk.5YUYCGQ7.js}

@@ -13,7 +13,7 @@ import {
 } from "./chunk.VBR4VS53.js";
 import {
   CwIcon
-} from "./chunk.ANTTHUGO.js";
+} from "./chunk.5QU7YOU6.js";
 import {
   component_styles_default
 } from "./chunk.NJIHXHXI.js";
@@ -22,7 +22,7 @@ import {
   e as e2,
   n,
   r
-} from "./chunk.XVXHFMZV.js";
+} from "./chunk.IJV5TSMJ.js";
 import {
   __decorateClass
 } from "./chunk.QIOX6AG5.js";