@cordwainer/cw-elements 1.2.0-alpha.1 → 1.2.2

package/README.md

@@ -2,6 +2,8 @@
 
 A forward-thinking library of web components.
 
+> 🆕 **New since the 1.0 fork:** [`<cw-combobox>`](https://cordwainer.dev/components/combobox) · [`<cw-date-picker>`](https://cordwainer.dev/components/date-picker) · [`<cw-time-picker>`](https://cordwainer.dev/components/time-picker) · [`<cw-pagination>`](https://cordwainer.dev/components/pagination) · [`<cw-data-table>`](https://cordwainer.dev/components/data-table)
+
 - Works with all frameworks 🧩
 - Works with CDNs 🚛
 - Fully customizable with CSS 🎨
@@ -11,10 +13,12 @@ A forward-thinking library of web components.
 
 ---
 
-Documentation: [cw-elements-b0c7e5.gitlab.io](https://cw-elements-b0c7e5.gitlab.io)
+Documentation: [cordwainer.dev](https://cordwainer.dev)
 
 Source: [gitlab.com/cordwainer/cw-elements](https://gitlab.com/cordwainer/cw-elements)
 
+npm: [@cordwainer/cw-elements](https://www.npmjs.com/package/@cordwainer/cw-elements)
+
 ---
 
 ## Cordwainers 🥾

package/cdn/chunks/{chunk.PU7D4HTX.js → chunk.2CXWDKSA.js}

@@ -24,7 +24,7 @@ import {
 } from "./chunk.VBR4VS53.js";
 import {
   CwIcon
-} from "./chunk.I6KB4VW7.js";
+} from "./chunk.W24C4FHM.js";
 import {
   watch
 } from "./chunk.RB5L7E7Z.js";
@@ -37,7 +37,7 @@ import {
   n,
   r,
   t
-} from "./chunk.5GHHWGQ4.js";
+} from "./chunk.FS65H6I7.js";
 import {
   b
 } from "./chunk.6A2LG33L.js";
@@ -435,66 +435,66 @@ var CwCarousel = class extends CwElement {
         </div>
 
         ${this.navigation ? b`
-              <div part="navigation" class="carousel__navigation">
-                <button
-                  part="navigation-button navigation-button--previous"
-                  class="${e({
+                <div part="navigation" class="carousel__navigation">
+                  <button
+                    part="navigation-button navigation-button--previous"
+                    class="${e({
       "carousel__navigation-button": true,
       "carousel__navigation-button--previous": true,
       "carousel__navigation-button--disabled": !prevEnabled
     })}"
-                  aria-label="${this.localize.term("previousSlide")}"
-                  aria-controls="scroll-container"
-                  aria-disabled="${prevEnabled ? "false" : "true"}"
-                  @click=${prevEnabled ? () => this.previous() : null}
-                >
-                  <slot name="previous-icon">
-                    <cw-icon library="system" name="${isLtr ? "chevron-left" : "chevron-right"}"></cw-icon>
-                  </slot>
-                </button>
+                    aria-label="${this.localize.term("previousSlide")}"
+                    aria-controls="scroll-container"
+                    aria-disabled="${prevEnabled ? "false" : "true"}"
+                    @click=${prevEnabled ? () => this.previous() : null}
+                  >
+                    <slot name="previous-icon">
+                      <cw-icon library="system" name="${isLtr ? "chevron-left" : "chevron-right"}"></cw-icon>
+                    </slot>
+                  </button>
 
-                <button
-                  part="navigation-button navigation-button--next"
-                  class=${e({
+                  <button
+                    part="navigation-button navigation-button--next"
+                    class=${e({
       "carousel__navigation-button": true,
       "carousel__navigation-button--next": true,
       "carousel__navigation-button--disabled": !nextEnabled
     })}
-                  aria-label="${this.localize.term("nextSlide")}"
-                  aria-controls="scroll-container"
-                  aria-disabled="${nextEnabled ? "false" : "true"}"
-                  @click=${nextEnabled ? () => this.next() : null}
-                >
-                  <slot name="next-icon">
-                    <cw-icon library="system" name="${isLtr ? "chevron-right" : "chevron-left"}"></cw-icon>
-                  </slot>
-                </button>
-              </div>
-            ` : ""}
+                    aria-label="${this.localize.term("nextSlide")}"
+                    aria-controls="scroll-container"
+                    aria-disabled="${nextEnabled ? "false" : "true"}"
+                    @click=${nextEnabled ? () => this.next() : null}
+                  >
+                    <slot name="next-icon">
+                      <cw-icon library="system" name="${isLtr ? "chevron-right" : "chevron-left"}"></cw-icon>
+                    </slot>
+                  </button>
+                </div>
+              ` : ""}
         ${this.pagination ? b`
-              <div part="pagination" role="tablist" class="carousel__pagination">
-                ${o(o2(pagesCount), (index) => {
+                <div part="pagination" role="tablist" class="carousel__pagination">
+                  ${o(o2(pagesCount), (index) => {
       const isActive = index === currentPage;
       return b`
-                    <button
-                      part="pagination-item ${isActive ? "pagination-item--active" : ""}"
-                      class="${e({
+                      <button
+                        part="pagination-item ${isActive ? "pagination-item--active" : ""}"
+                        class="${e({
         "carousel__pagination-item": true,
         "carousel__pagination-item--active": isActive
       })}"
-                      role="tab"
-                      id="tab-${index + 1}"
-                      aria-controls="slide-${index + 1}"
-                      aria-selected="${isActive ? "true" : "false"}"
-                      aria-label="${isActive ? this.localize.term("slideNum", index + 1) : this.localize.term("goToSlide", index + 1, pagesCount)}"
-                      tabindex=${isActive ? "0" : "-1"}
-                      @click=${() => this.goToSlide(index * slidesPerMove)}
-                      @keydown=${this.handleKeyDown}
-                    ></button>
-                  `;
+                        role="tab"
+                        id="tab-${index + 1}"
+                        aria-controls="slide-${index + 1}"
+                        aria-selected="${isActive ? "true" : "false"}"
+                        aria-label="${isActive ? this.localize.term("slideNum", index + 1) : this.localize.term("goToSlide", index + 1, pagesCount)}"
+                        tabindex=${isActive ? "0" : "-1"}
+                        @click=${() => this.goToSlide(index * slidesPerMove)}
+                        @keydown=${this.handleKeyDown}
+                      ></button>
+                    `;
     })}
-              </div>
-            ` : ""}
+                </div>
+              ` : ""}
       </div>
     `;
   }

package/{dist/chunks/chunk.SDSHJGX3.js → cdn/chunks/chunk.2FYNVS7O.js}

@@ -1,6 +1,6 @@
 import {
   CwAnimatedImage
-} from "./chunk.DUG7FBMO.js";
+} from "./chunk.FVPLQ2TW.js";
 
 // src/react/animated-image/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.VSUUXBP2.js → chunk.2TU23B2P.js}

@@ -1,6 +1,6 @@
 import {
   CwTabGroup
-} from "./chunk.B5OFLT2Z.js";
+} from "./chunk.NFLL4NW4.js";
 
 // src/react/tab-group/index.ts
 import * as React from "react";

package/{dist/chunks/chunk.5HVNCB53.js → cdn/chunks/chunk.2Y47E5NF.js}

@@ -1,6 +1,6 @@
 import {
   CwCheckbox
-} from "./chunk.K6S5S72J.js";
+} from "./chunk.ID5M7VH3.js";
 
 // src/react/checkbox/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.DBI3LACP.js → chunk.2ZM7K5QW.js}

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

package/cdn/chunks/{chunk.2SEIS5FB.js → chunk.33JRP7BH.js}

@@ -10,7 +10,7 @@ import {
 import {
   CwElement,
   n
-} from "./chunk.5GHHWGQ4.js";
+} from "./chunk.FS65H6I7.js";
 import {
   __decorateClass
 } from "./chunk.QIOX6AG5.js";

package/cdn/chunks/{chunk.6CPTI3CT.js → chunk.3EK245BY.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.Y6MNSLG2.js";
 import {
   CwPopup
-} from "./chunk.XFTH7YPI.js";
+} from "./chunk.7DQNE5XY.js";
 import {
   form_control_styles_default
 } from "./chunk.DJVND463.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk.FIVNGT4O.js";
 import {
   CwIconButton
-} from "./chunk.J2XCU3C2.js";
+} from "./chunk.KT66HULB.js";
 import {
   getAnimation,
   setDefaultAnimation
@@ -38,7 +38,7 @@ import {
 } from "./chunk.VBR4VS53.js";
 import {
   CwIcon
-} from "./chunk.I6KB4VW7.js";
+} from "./chunk.W24C4FHM.js";
 import {
   watch
 } from "./chunk.RB5L7E7Z.js";
@@ -50,7 +50,7 @@ import {
   e as e2,
   n,
   r
-} from "./chunk.5GHHWGQ4.js";
+} from "./chunk.FS65H6I7.js";
 import {
   b
 } from "./chunk.6A2LG33L.js";
@@ -750,20 +750,20 @@ var CwDatePicker = class extends CwElement {
               />
 
               ${hasClearIcon ? b`
-                    <button
-                      part="clear-button"
-                      class="date-picker__clear"
-                      type="button"
-                      aria-label=${this.localize.term("clearEntry")}
-                      @mousedown=${this.handleClearMouseDown}
-                      @click=${this.handleClearClick}
-                      tabindex="-1"
-                    >
-                      <slot name="clear-icon">
-                        <cw-icon name="x-circle-fill" library="system"></cw-icon>
-                      </slot>
-                    </button>
-                  ` : ""}
+                      <button
+                        part="clear-button"
+                        class="date-picker__clear"
+                        type="button"
+                        aria-label=${this.localize.term("clearEntry")}
+                        @mousedown=${this.handleClearMouseDown}
+                        @click=${this.handleClearClick}
+                        tabindex="-1"
+                      >
+                        <slot name="clear-icon">
+                          <cw-icon name="x-circle-fill" library="system"></cw-icon>
+                        </slot>
+                      </button>
+                    ` : ""}
 
               <slot name="suffix" part="suffix" class="date-picker__suffix"></slot>
 

package/cdn/chunks/{chunk.QGRWRQ6W.js → chunk.3KZAH5AQ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.7ZIVYTTK.js";
 import {
   CwCheckbox
-} from "./chunk.DO7CY5W4.js";
+} from "./chunk.ID5M7VH3.js";
 import {
   o as o2
 } from "./chunk.3KMJJQ2V.js";
@@ -12,13 +12,13 @@ import {
 } from "./chunk.2XSYSDO3.js";
 import {
   CwSpinner
-} from "./chunk.H56Q4VV7.js";
+} from "./chunk.VKFJNMOV.js";
 import {
   e
 } from "./chunk.VBR4VS53.js";
 import {
   CwIcon
-} from "./chunk.I6KB4VW7.js";
+} from "./chunk.W24C4FHM.js";
 import {
   watch
 } from "./chunk.RB5L7E7Z.js";
@@ -29,7 +29,7 @@ import {
   CwElement,
   n,
   r
-} from "./chunk.5GHHWGQ4.js";
+} from "./chunk.FS65H6I7.js";
 import {
   A,
   b
@@ -230,76 +230,79 @@ var CwDataTable = class extends CwElement {
           aria-busy=${this.loading ? "true" : "false"}
         >
           ${this.caption ? b`<caption class="visually-hidden">
-                ${this.caption}
-              </caption>` : A}
+                  ${this.caption}
+                </caption>` : A}
 
           <thead>
             <tr part="header-row" class="data-table__header-row">
               ${isMultiple ? b`
-                    <th
-                      part="header-cell checkbox-cell"
-                      class="data-table__header-cell data-table__checkbox-cell"
-                      scope="col"
-                    >
-                      <cw-checkbox
-                        size="small"
-                        ?checked=${allSelected}
-                        ?indeterminate=${someSelected && !allSelected}
-                        @cw-change=${(e2) => this.handleSelectAllChange(e2.target.checked)}
-                        ><span style=${srOnly}>Select all rows</span></cw-checkbox
+                      <th
+                        part="header-cell checkbox-cell"
+                        class="data-table__header-cell data-table__checkbox-cell"
+                        scope="col"
                       >
-                    </th>
-                  ` : A}
+                        <cw-checkbox
+                          size="small"
+                          ?checked=${allSelected}
+                          ?indeterminate=${someSelected && !allSelected}
+                          @cw-change=${(e2) => this.handleSelectAllChange(e2.target.checked)}
+                          ><span style=${srOnly}>Select all rows</span></cw-checkbox
+                        >
+                      </th>
+                    ` : A}
               ${o(visibleColumns, (col) => this.renderHeaderCell(col))}
             </tr>
           </thead>
 
           <tbody>
             ${isEmpty ? b`
-                  <tr>
-                    <td colspan=${colCount} class="data-table__empty-cell">
-                      <div part="empty" class="data-table__empty">
-                        <slot name="empty">${this.emptyText}</slot>
-                      </div>
-                    </td>
-                  </tr>
-                ` : o(sortedData, (row, index) => {
+                    <tr>
+                      <td colspan=${colCount} class="data-table__empty-cell">
+                        <div part="empty" class="data-table__empty">
+                          <slot name="empty">${this.emptyText}</slot>
+                        </div>
+                      </td>
+                    </tr>
+                  ` : o(sortedData, (row, index) => {
       const id = this.getRowId(row, index);
       const isSelected = this.selectedIds.has(id);
       return b`
-                    <tr
-                      part="body-row${isSelected ? " body-row--selected" : ""}"
-                      class=${e({
+                      <tr
+                        part="body-row${isSelected ? " body-row--selected" : ""}"
+                        class=${e({
         "data-table__body-row": true,
         "data-table__body-row--selected": isSelected,
         "data-table__body-row--clickable": this.selection === "single"
       })}
-                      aria-selected=${this.selection !== "none" ? isSelected ? "true" : "false" : A}
-                      @click=${() => this.handleRowClick(row, index)}
-                    >
-                      ${isMultiple ? b`
-                            <td part="body-cell checkbox-cell" class="data-table__body-cell data-table__checkbox-cell">
-                              <cw-checkbox
-                                size="small"
-                                ?checked=${isSelected}
-                                @click=${(e2) => e2.stopPropagation()}
-                                @cw-change=${(e2) => this.handleRowCheckboxChange(row, index, e2.target.checked)}
-                                ><span style=${srOnly}>Select row ${index + 1}</span></cw-checkbox
-                              >
-                            </td>
-                          ` : A}
-                      ${o(visibleColumns, (col) => this.renderBodyCell(col, row))}
-                    </tr>
-                  `;
+                        aria-selected=${this.selection !== "none" ? isSelected ? "true" : "false" : A}
+                        @click=${() => this.handleRowClick(row, index)}
+                      >
+                        ${isMultiple ? b`
+                                <td
+                                  part="body-cell checkbox-cell"
+                                  class="data-table__body-cell data-table__checkbox-cell"
+                                >
+                                  <cw-checkbox
+                                    size="small"
+                                    ?checked=${isSelected}
+                                    @click=${(e2) => e2.stopPropagation()}
+                                    @cw-change=${(e2) => this.handleRowCheckboxChange(row, index, e2.target.checked)}
+                                    ><span style=${srOnly}>Select row ${index + 1}</span></cw-checkbox
+                                  >
+                                </td>
+                              ` : A}
+                        ${o(visibleColumns, (col) => this.renderBodyCell(col, row))}
+                      </tr>
+                    `;
     })}
           </tbody>
         </table>
 
         ${this.loading ? b`
-              <div part="loading" class="data-table__loading" aria-hidden="true">
-                <cw-spinner></cw-spinner>
-              </div>
-            ` : A}
+                <div part="loading" class="data-table__loading" aria-hidden="true">
+                  <cw-spinner></cw-spinner>
+                </div>
+              ` : A}
 
         <slot @slotchange=${this.handleSlotChange}></slot>
       </div>

package/cdn/chunks/{chunk.V4Z6IZAC.js → chunk.3M6E3A2W.js}

@@ -13,7 +13,7 @@ import {
 import {
   CwElement,
   n
-} from "./chunk.5GHHWGQ4.js";
+} from "./chunk.FS65H6I7.js";
 import {
   b
 } from "./chunk.6A2LG33L.js";

package/cdn/chunks/{chunk.WUKD2BRG.js → chunk.3NXAD3S6.js}

@@ -1,6 +1,6 @@
 import {
   CwBreadcrumbItem
-} from "./chunk.QCHVJMOM.js";
+} from "./chunk.ITIKVPNE.js";
 
 // src/components/breadcrumb-item/breadcrumb-item.ts
 var breadcrumb_item_default = CwBreadcrumbItem;

package/cdn/chunks/{chunk.UQ4MTWGW.js → chunk.44QYOAXG.js}

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

package/cdn/chunks/{chunk.LZ4L4JF3.js → chunk.4CK7EBFB.js}

@@ -25,7 +25,7 @@ import {
 } from "./chunk.VBR4VS53.js";
 import {
   CwIcon
-} from "./chunk.I6KB4VW7.js";
+} from "./chunk.W24C4FHM.js";
 import {
   watch
 } from "./chunk.RB5L7E7Z.js";
@@ -37,7 +37,7 @@ import {
   e as e2,
   n,
   r
-} from "./chunk.5GHHWGQ4.js";
+} from "./chunk.FS65H6I7.js";
 import {
   b
 } from "./chunk.6A2LG33L.js";
@@ -321,39 +321,39 @@ var CwInput = class extends CwElement {
             />
 
             ${isClearIconVisible ? b`
-                  <button
-                    part="clear-button"
-                    class="input__clear"
-                    type="button"
-                    aria-label=${this.localize.term("clearEntry")}
-                    @click=${this.handleClearClick}
-                    tabindex="-1"
-                  >
-                    <slot name="clear-icon">
-                      <cw-icon name="x-circle-fill" library="system"></cw-icon>
-                    </slot>
-                  </button>
-                ` : ""}
+                    <button
+                      part="clear-button"
+                      class="input__clear"
+                      type="button"
+                      aria-label=${this.localize.term("clearEntry")}
+                      @click=${this.handleClearClick}
+                      tabindex="-1"
+                    >
+                      <slot name="clear-icon">
+                        <cw-icon name="x-circle-fill" library="system"></cw-icon>
+                      </slot>
+                    </button>
+                  ` : ""}
             ${this.passwordToggle && !this.disabled ? b`
-                  <button
-                    part="password-toggle-button"
-                    class="input__password-toggle"
-                    type="button"
-                    aria-label=${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}
-                    @click=${this.handlePasswordToggle}
-                    tabindex="-1"
-                  >
-                    ${this.passwordVisible ? b`
-                          <slot name="show-password-icon">
-                            <cw-icon name="eye-slash" library="system"></cw-icon>
-                          </slot>
-                        ` : b`
-                          <slot name="hide-password-icon">
-                            <cw-icon name="eye" library="system"></cw-icon>
-                          </slot>
-                        `}
-                  </button>
-                ` : ""}
+                    <button
+                      part="password-toggle-button"
+                      class="input__password-toggle"
+                      type="button"
+                      aria-label=${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}
+                      @click=${this.handlePasswordToggle}
+                      tabindex="-1"
+                    >
+                      ${this.passwordVisible ? b`
+                              <slot name="show-password-icon">
+                                <cw-icon name="eye-slash" library="system"></cw-icon>
+                              </slot>
+                            ` : b`
+                              <slot name="hide-password-icon">
+                                <cw-icon name="eye" library="system"></cw-icon>
+                              </slot>
+                            `}
+                    </button>
+                  ` : ""}
 
             <span part="suffix" class="input__suffix">
               <slot name="suffix"></slot>

package/{dist/chunks/chunk.SPSKGYHO.js → cdn/chunks/chunk.4CVPTKYR.js}

@@ -1,6 +1,6 @@
 import {
   CwDetails
-} from "./chunk.3QBNTXFV.js";
+} from "./chunk.TO3KRM5O.js";
 
 // src/react/details/index.ts
 import * as React from "react";

package/{dist/chunks/chunk.U7GRVPCQ.js → cdn/chunks/chunk.5224SMYP.js}

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

package/{dist/chunks/chunk.5VMVEYHS.js → cdn/chunks/chunk.5JP7PD4N.js}

@@ -1,6 +1,6 @@
 import {
   CwSwitch
-} from "./chunk.IJXFT55D.js";
+} from "./chunk.ISGZWPZN.js";
 
 // src/components/switch/switch.ts
 var switch_default = CwSwitch;

package/cdn/chunks/{chunk.LPKUU5RV.js → chunk.5WJMKI5W.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.NJIHXHXI.js";
 import {
   CwElement
-} from "./chunk.5GHHWGQ4.js";
+} from "./chunk.FS65H6I7.js";
 import {
   b
 } from "./chunk.6A2LG33L.js";

package/cdn/chunks/{chunk.ST44F2BR.js → chunk.66LMWXNU.js}

@@ -1,6 +1,6 @@
 import {
   CwTree
-} from "./chunk.LXDWEMYF.js";
+} from "./chunk.RWMU7UUV.js";
 
 // src/components/tree/tree.ts
 var tree_default = CwTree;

package/cdn/chunks/{chunk.HMQ3W6AG.js → chunk.6EFLUST7.js}

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

package/cdn/chunks/{chunk.SKTHN77C.js → chunk.6NQQDAYE.js}

@@ -1,6 +1,6 @@
 import {
   CwDataTable
-} from "./chunk.QGRWRQ6W.js";
+} from "./chunk.3KZAH5AQ.js";
 
 // src/react/data-table/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.75M5F2QG.js → chunk.6ZFYF2WF.js}

@@ -1,6 +1,6 @@
 import {
   CwCopyButton
-} from "./chunk.HYXPW6KP.js";
+} from "./chunk.YAPO4BYB.js";
 
 // src/react/copy-button/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.E5JD6AR2.js → chunk.72BS2G42.js}

@@ -1,6 +1,6 @@
 import {
   CwBreadcrumbItem
-} from "./chunk.QCHVJMOM.js";
+} from "./chunk.ITIKVPNE.js";
 
 // src/react/breadcrumb-item/index.ts
 import * as React from "react";