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

package/dist/chunks/chunk.EYA3B3XL.js

@@ -0,0 +1,292 @@
+// src/components/time-picker/time-picker.styles.ts
+import { css } from "lit";
+var time_picker_styles_default = css`
+  :host {
+    display: block;
+  }
+
+  /* The popup */
+  .time-picker {
+    flex: 1 1 auto;
+    display: inline-flex;
+    width: 100%;
+    position: relative;
+    vertical-align: middle;
+  }
+
+  .time-picker::part(popup) {
+    z-index: var(--cw-z-index-dropdown);
+  }
+
+  .time-picker[data-current-placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .time-picker[data-current-placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  /* Combobox */
+  .time-picker__combobox {
+    flex: 1;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    position: relative;
+    align-items: center;
+    justify-content: start;
+    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: pointer;
+    transition:
+      var(--cw-transition-fast) color,
+      var(--cw-transition-fast) border,
+      var(--cw-transition-fast) box-shadow,
+      var(--cw-transition-fast) background-color;
+  }
+
+  .time-picker__display-input {
+    position: relative;
+    width: 100%;
+    font: inherit;
+    border: none;
+    background: none;
+    color: var(--cw-input-color);
+    cursor: inherit;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none;
+  }
+
+  .time-picker__display-input::placeholder {
+    color: var(--cw-input-placeholder-color);
+  }
+
+  .time-picker:not(.time-picker--disabled):hover .time-picker__display-input {
+    color: var(--cw-input-color-hover);
+  }
+
+  .time-picker__display-input:focus {
+    outline: none;
+  }
+
+  .time-picker__value-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: -1;
+  }
+
+  /* Standard time pickers */
+  .time-picker--standard .time-picker__combobox {
+    background-color: var(--cw-input-background-color);
+    border: solid var(--cw-input-border-width) var(--cw-input-border-color);
+  }
+
+  .time-picker--standard.time-picker--disabled .time-picker__combobox {
+    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;
+  }
+
+  .time-picker--standard:not(.time-picker--disabled).time-picker--open .time-picker__combobox,
+  .time-picker--standard:not(.time-picker--disabled).time-picker--focused .time-picker__combobox {
+    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 time pickers */
+  .time-picker--filled .time-picker__combobox {
+    border: none;
+    background-color: var(--cw-input-filled-background-color);
+    color: var(--cw-input-color);
+  }
+
+  .time-picker--filled:hover:not(.time-picker--disabled) .time-picker__combobox {
+    background-color: var(--cw-input-filled-background-color-hover);
+  }
+
+  .time-picker--filled.time-picker--disabled .time-picker__combobox {
+    background-color: var(--cw-input-filled-background-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .time-picker--filled:not(.time-picker--disabled).time-picker--open .time-picker__combobox,
+  .time-picker--filled:not(.time-picker--disabled).time-picker--focused .time-picker__combobox {
+    background-color: var(--cw-input-filled-background-color-focus);
+    outline: var(--cw-focus-ring);
+  }
+
+  /* Sizes */
+  .time-picker--small .time-picker__combobox {
+    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);
+  }
+
+  .time-picker--small .time-picker__clear {
+    margin-inline-start: var(--cw-input-spacing-small);
+  }
+
+  .time-picker--small .time-picker__prefix::slotted(*) {
+    margin-inline-end: var(--cw-input-spacing-small);
+  }
+
+  .time-picker--medium .time-picker__combobox {
+    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);
+  }
+
+  .time-picker--medium .time-picker__clear {
+    margin-inline-start: var(--cw-input-spacing-medium);
+  }
+
+  .time-picker--medium .time-picker__prefix::slotted(*) {
+    margin-inline-end: var(--cw-input-spacing-medium);
+  }
+
+  .time-picker--large .time-picker__combobox {
+    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);
+  }
+
+  .time-picker--large .time-picker__clear {
+    margin-inline-start: var(--cw-input-spacing-large);
+  }
+
+  .time-picker--large .time-picker__prefix::slotted(*) {
+    margin-inline-end: var(--cw-input-spacing-large);
+  }
+
+  /* Pills */
+  .time-picker--pill.time-picker--small .time-picker__combobox {
+    border-radius: var(--cw-input-height-small);
+  }
+
+  .time-picker--pill.time-picker--medium .time-picker__combobox {
+    border-radius: var(--cw-input-height-medium);
+  }
+
+  .time-picker--pill.time-picker--large .time-picker__combobox {
+    border-radius: var(--cw-input-height-large);
+  }
+
+  /* Prefix and suffix */
+  .time-picker__prefix,
+  .time-picker__suffix {
+    flex: 0;
+    display: inline-flex;
+    align-items: center;
+    color: var(--cw-input-placeholder-color);
+  }
+
+  .time-picker__suffix::slotted(*) {
+    margin-inline-start: var(--cw-spacing-small);
+  }
+
+  /* Clear button */
+  .time-picker__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;
+  }
+
+  .time-picker__clear:hover {
+    color: var(--cw-input-icon-color-hover);
+  }
+
+  .time-picker__clear:focus {
+    outline: none;
+  }
+
+  /* Expand icon */
+  .time-picker__expand-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    margin-inline-start: var(--cw-spacing-small);
+  }
+
+  /* Listbox */
+  .time-picker__listbox {
+    display: flex;
+    position: relative;
+    align-items: stretch;
+    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);
+    overflow: hidden;
+    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);
+  }
+
+  /* Columns */
+  .time-picker__column {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    min-width: 3.5rem;
+    max-height: 15rem;
+    padding-block: var(--cw-spacing-x-small);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scroll-snap-type: y proximity;
+  }
+
+  .time-picker__column:not(:last-of-type) {
+    border-inline-end: solid var(--cw-panel-border-width) var(--cw-panel-border-color);
+  }
+
+  .time-picker__column cw-option {
+    scroll-snap-align: center;
+  }
+
+  .time-picker__column cw-option::part(base) {
+    justify-content: center;
+    padding-inline: var(--cw-spacing-small);
+  }
+
+  .time-picker__column cw-option::part(checked-icon) {
+    display: none;
+  }
+`;
+
+export {
+  time_picker_styles_default
+};

package/dist/chunks/{chunk.AVRTUBBV.js → chunk.F3UWUW33.js}

@@ -1,6 +1,6 @@
 import {
   CwDrawer
-} from "./chunk.EBQIFLA3.js";
+} from "./chunk.OLONTGZ5.js";
 
 // src/components/drawer/drawer.ts
 var drawer_default = CwDrawer;

package/dist/chunks/{chunk.UKRLMHI6.js → chunk.FDEPR7NF.js}

@@ -1,6 +1,6 @@
 import {
   CwAlert
-} from "./chunk.45UF2NV7.js";
+} from "./chunk.P4KUS7LP.js";
 
 // src/components/alert/alert.ts
 var alert_default = CwAlert;

package/dist/chunks/chunk.FLTRGITF.js

@@ -0,0 +1,11 @@
+import {
+  CwDatePicker
+} from "./chunk.5HCLCB4W.js";
+
+// src/components/date-picker/date-picker.ts
+var date_picker_default = CwDatePicker;
+CwDatePicker.define("cw-date-picker");
+
+export {
+  date_picker_default
+};

package/dist/chunks/{chunk.ZQVN5QDH.js → chunk.FOGOODLI.js}

@@ -1,6 +1,6 @@
 import {
   CwFormatDate
-} from "./chunk.2IO5RPED.js";
+} from "./chunk.DBU6HHIU.js";
 
 // src/components/format-date/format-date.ts
 var format_date_default = CwFormatDate;

package/dist/chunks/{chunk.XTZWIN4P.js → chunk.FSZKL46I.js}

@@ -1,6 +1,6 @@
 import {
   CwResizeObserver
-} from "./chunk.JMQ7CTGW.js";
+} from "./chunk.ATUH245H.js";
 
 // src/react/resize-observer/index.ts
 import * as React from "react";

package/dist/chunks/chunk.GB5ZNIFK.js

@@ -0,0 +1,115 @@
+// src/components/pagination/pagination.styles.ts
+import { css } from "lit";
+var pagination_styles_default = css`
+  :host {
+    display: inline-block;
+  }
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    gap: var(--cw-spacing-x-small);
+    font-family: var(--cw-font-sans);
+    font-weight: var(--cw-font-weight-normal);
+  }
+
+  .pagination--disabled {
+    cursor: not-allowed;
+  }
+
+  .pagination__pages {
+    display: flex;
+    align-items: center;
+    gap: var(--cw-spacing-2x-small);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .pagination__item {
+    display: flex;
+  }
+
+  .pagination__page,
+  .pagination__ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 2em;
+    height: 2em;
+    padding-inline: var(--cw-spacing-2x-small);
+    border-radius: var(--cw-border-radius-medium);
+  }
+
+  .pagination__page {
+    border: solid 1px transparent;
+    background-color: transparent;
+    color: var(--cw-color-neutral-700);
+    font: inherit;
+    cursor: pointer;
+    transition:
+      var(--cw-transition-fast) color,
+      var(--cw-transition-fast) background-color,
+      var(--cw-transition-fast) border-color;
+  }
+
+  .pagination__page:hover:not(:disabled):not(.pagination__page--active) {
+    background-color: var(--cw-color-neutral-100);
+  }
+
+  .pagination__page:focus-visible {
+    outline: var(--cw-focus-ring);
+    outline-offset: 1px;
+  }
+
+  .pagination__page--active {
+    font-weight: var(--cw-font-weight-bold);
+    color: var(--cw-color-neutral-1000);
+    box-shadow: inset 0 0 0 1px var(--cw-color-primary-600);
+  }
+
+  .pagination__page:disabled {
+    color: var(--cw-color-neutral-400);
+    cursor: not-allowed;
+  }
+
+  .pagination__ellipsis {
+    color: var(--cw-color-neutral-500);
+  }
+
+  /* Sizes */
+  .pagination--small {
+    font-size: var(--cw-button-font-size-small);
+  }
+
+  .pagination--small .pagination__page,
+  .pagination--small .pagination__ellipsis {
+    min-width: var(--cw-input-height-small);
+    height: var(--cw-input-height-small);
+  }
+
+  .pagination--medium {
+    font-size: var(--cw-button-font-size-medium);
+  }
+
+  .pagination--medium .pagination__page,
+  .pagination--medium .pagination__ellipsis {
+    min-width: var(--cw-input-height-medium);
+    height: var(--cw-input-height-medium);
+  }
+
+  .pagination--large {
+    font-size: var(--cw-button-font-size-large);
+  }
+
+  .pagination--large .pagination__page,
+  .pagination--large .pagination__ellipsis {
+    min-width: var(--cw-input-height-large);
+    height: var(--cw-input-height-large);
+  }
+`;
+
+export {
+  pagination_styles_default
+};

package/dist/chunks/{chunk.HFKJXCTI.js → chunk.GBVCKNWJ.js}

@@ -9,10 +9,10 @@ import {
 } from "./chunk.HF7GESMZ.js";
 import {
   LocalizeController
-} from "./chunk.IDPNXIPQ.js";
+} from "./chunk.2H4HZOD6.js";
 import {
   CwIcon
-} from "./chunk.W2VPO4VE.js";
+} from "./chunk.ZOBVW4QZ.js";
 import {
   watch
 } from "./chunk.GQZ7EGMM.js";
@@ -21,7 +21,7 @@ import {
 } from "./chunk.TUVJKY7S.js";
 import {
   CwElement
-} from "./chunk.567JN6DK.js";
+} from "./chunk.EFVXMX3N.js";
 import {
   __decorateClass
 } from "./chunk.Q44EX5TP.js";

package/dist/chunks/{chunk.ZON7Z32S.js → chunk.GGOALJFK.js}

@@ -1,6 +1,6 @@
 import {
   CwButtonGroup
-} from "./chunk.LKYPNZHC.js";
+} from "./chunk.6X3F5ROP.js";
 
 // src/react/button-group/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.GULR3V5I.js → chunk.GLSMIUKJ.js}

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

package/dist/chunks/{chunk.MDNPNMFX.js → chunk.GRWRE5EI.js}

@@ -1,6 +1,6 @@
 import {
   CwTreeItem
-} from "./chunk.52M7YFL5.js";
+} from "./chunk.6HRTIF22.js";
 import {
   tree_styles_default
 } from "./chunk.U4A4EIV4.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.HF7GESMZ.js";
 import {
   LocalizeController
-} from "./chunk.IDPNXIPQ.js";
+} from "./chunk.2H4HZOD6.js";
 import {
   watch
 } from "./chunk.GQZ7EGMM.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.TUVJKY7S.js";
 import {
   CwElement
-} from "./chunk.567JN6DK.js";
+} from "./chunk.EFVXMX3N.js";
 import {
   __decorateClass
 } from "./chunk.Q44EX5TP.js";

package/dist/chunks/chunk.HQ3ZDFJJ.js

@@ -0,0 +1,33 @@
+import {
+  CwDatePicker
+} from "./chunk.5HCLCB4W.js";
+
+// src/react/date-picker/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-date-picker";
+CwDatePicker.define("cw-date-picker");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwDatePicker,
+  react: React,
+  events: {
+    onCwChange: "cw-change",
+    onCwClear: "cw-clear",
+    onCwInput: "cw-input",
+    onCwFocus: "cw-focus",
+    onCwBlur: "cw-blur",
+    onCwShow: "cw-show",
+    onCwAfterShow: "cw-after-show",
+    onCwHide: "cw-hide",
+    onCwAfterHide: "cw-after-hide",
+    onCwInvalid: "cw-invalid"
+  },
+  displayName: "CwDatePicker"
+});
+var date_picker_default = reactWrapper;
+
+export {
+  date_picker_default
+};

package/dist/chunks/{chunk.GA7G5JW4.js → chunk.HQA7RR42.js}

@@ -3,16 +3,16 @@ import {
 } from "./chunk.T4SZVEJD.js";
 import {
   CwIconButton
-} from "./chunk.DM5MBJXC.js";
+} from "./chunk.OVQBZ4VN.js";
 import {
   LocalizeController
-} from "./chunk.IDPNXIPQ.js";
+} from "./chunk.2H4HZOD6.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";
 import {
   CwElement
-} from "./chunk.567JN6DK.js";
+} from "./chunk.EFVXMX3N.js";
 import {
   __decorateClass
 } from "./chunk.Q44EX5TP.js";

package/{cdn/chunks/chunk.APMZOTIL.js → dist/chunks/chunk.HTHWQW5C.js}

@@ -1,6 +1,6 @@
 import {
   CwSkeleton
-} from "./chunk.RQTACNRD.js";
+} from "./chunk.T7DZOP3H.js";
 
 // src/react/skeleton/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.KIDIHVHM.js → chunk.I5NTDUIV.js}

@@ -1,6 +1,6 @@
 import {
   CwRelativeTime
-} from "./chunk.J7MTCPEZ.js";
+} from "./chunk.UQYF4O5Y.js";
 
 // src/react/relative-time/index.ts
 import * as React from "react";

package/dist/chunks/chunk.IMOV5MQ7.js

@@ -0,0 +1,11 @@
+import {
+  CwTimePicker
+} from "./chunk.45Y6QCMK.js";
+
+// src/components/time-picker/time-picker.ts
+var time_picker_default = CwTimePicker;
+CwTimePicker.define("cw-time-picker");
+
+export {
+  time_picker_default
+};

package/dist/chunks/{chunk.LE7AQJCB.js → chunk.IN7VGCN2.js}

@@ -1,6 +1,6 @@
 import {
   CwRange
-} from "./chunk.44QRCJ3U.js";
+} from "./chunk.J7PCKDMA.js";
 
 // src/react/range/index.ts
 import * as React from "react";

package/{cdn/chunks/chunk.BBY4XHBV.js → dist/chunks/chunk.J2YBP2NC.js}

@@ -1,6 +1,6 @@
 import {
   CwMenu
-} from "./chunk.XDHHJ5CI.js";
+} from "./chunk.D5E5555N.js";
 
 // src/react/menu/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.44QRCJ3U.js → chunk.J7PCKDMA.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.PH2VNONO.js";
 import {
   LocalizeController
-} from "./chunk.IDPNXIPQ.js";
+} from "./chunk.2H4HZOD6.js";
 import {
   HasSlotController
 } from "./chunk.BVGZUUCX.js";
@@ -24,7 +24,7 @@ import {
 } from "./chunk.TUVJKY7S.js";
 import {
   CwElement
-} from "./chunk.567JN6DK.js";
+} from "./chunk.EFVXMX3N.js";
 import {
   __decorateClass
 } from "./chunk.Q44EX5TP.js";

package/dist/chunks/{chunk.KBFG6YOY.js → chunk.JIEFUD4K.js}

@@ -3,16 +3,16 @@ import {
 } from "./chunk.4WNB7WDT.js";
 import {
   CwResizeObserver
-} from "./chunk.JMQ7CTGW.js";
+} from "./chunk.ATUH245H.js";
 import {
   scrollIntoView
 } from "./chunk.PH2N3MLE.js";
 import {
   CwIconButton
-} from "./chunk.DM5MBJXC.js";
+} from "./chunk.OVQBZ4VN.js";
 import {
   LocalizeController
-} from "./chunk.IDPNXIPQ.js";
+} from "./chunk.2H4HZOD6.js";
 import {
   watch
 } from "./chunk.GQZ7EGMM.js";
@@ -21,7 +21,7 @@ import {
 } from "./chunk.TUVJKY7S.js";
 import {
   CwElement
-} from "./chunk.567JN6DK.js";
+} from "./chunk.EFVXMX3N.js";
 import {
   __decorateClass,
   __spreadValues

package/dist/chunks/{chunk.RDEJ5UJC.js → chunk.JOR6E2DI.js}

@@ -1,6 +1,6 @@
 import {
   CwButton
-} from "./chunk.VIDPDBD4.js";
+} from "./chunk.PA67CQRA.js";
 
 // src/react/button/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.C7UXSUZS.js → chunk.JWVLU32D.js}

@@ -1,6 +1,6 @@
 import {
   CwIconButton
-} from "./chunk.DM5MBJXC.js";
+} from "./chunk.OVQBZ4VN.js";
 
 // src/components/icon-button/icon-button.ts
 var icon_button_default = CwIconButton;