@editora/ui-core 0.1.9 → 0.1.10

package/dist/transfer-list.esm.js

@@ -0,0 +1,969 @@
+import { E as D } from "./ElementBase-909688f3.mjs";
+const q = `
+  :host {
+    --ui-transfer-accent: var(--ui-color-primary, #2563eb);
+    --ui-transfer-text: var(--ui-color-text, #0f172a);
+    --ui-transfer-muted: var(--ui-color-muted, #64748b);
+    --ui-transfer-shell-bg: transparent;
+    --ui-transfer-shell-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 84%, transparent);
+    --ui-transfer-shell-border: 1px solid var(--ui-transfer-shell-border-color);
+    --ui-transfer-shell-shadow: none;
+    --ui-transfer-shell-backdrop: none;
+    --ui-transfer-panel-bg: var(--ui-color-surface, #ffffff);
+    --ui-transfer-panel-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-transfer-panel-border: 1px solid var(--ui-transfer-panel-border-color);
+    --ui-transfer-panel-shadow: none;
+    --ui-transfer-panel-backdrop: none;
+    --ui-transfer-item-bg: color-mix(in srgb, var(--ui-transfer-panel-bg) 96%, transparent);
+    --ui-transfer-item-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
+    --ui-transfer-item-border: 1px solid var(--ui-transfer-item-border-color);
+    --ui-transfer-item-hover-bg: color-mix(in srgb, var(--ui-transfer-accent) 6%, var(--ui-transfer-panel-bg));
+    --ui-transfer-item-hover-border-color: color-mix(in srgb, var(--ui-transfer-accent) 12%, var(--ui-transfer-item-border-color));
+    --ui-transfer-item-selected-bg: color-mix(in srgb, var(--ui-transfer-accent) 11%, var(--ui-transfer-panel-bg));
+    --ui-transfer-item-selected-border-color: color-mix(in srgb, var(--ui-transfer-accent) 28%, var(--ui-transfer-item-border-color));
+    --ui-transfer-item-selected-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-transfer-accent) 10%, transparent);
+    --ui-transfer-action-bg: color-mix(in srgb, var(--ui-transfer-accent) 8%, var(--ui-transfer-panel-bg));
+    --ui-transfer-action-color: var(--ui-transfer-text);
+    --ui-transfer-action-border-color: color-mix(in srgb, var(--ui-transfer-accent) 18%, var(--ui-color-border, #cbd5e1));
+    --ui-transfer-action-border: 1px solid var(--ui-transfer-action-border-color);
+    --ui-transfer-action-shadow: none;
+    --ui-transfer-action-hover-bg: color-mix(in srgb, var(--ui-transfer-accent) 14%, var(--ui-transfer-panel-bg));
+    --ui-transfer-action-disabled-bg: color-mix(in srgb, var(--ui-transfer-panel-bg) 96%, transparent);
+    --ui-transfer-action-disabled-color: color-mix(in srgb, var(--ui-transfer-muted) 72%, transparent);
+    --ui-transfer-check-accent: var(--ui-transfer-accent);
+    --ui-transfer-indicator-size: 18px;
+    --ui-transfer-gap: 16px;
+    --ui-transfer-shell-padding: 16px;
+    --ui-transfer-panel-padding: 12px;
+    --ui-transfer-panel-gap: 10px;
+    --ui-transfer-panel-radius: 20px;
+    --ui-transfer-shell-radius: calc(var(--ui-transfer-panel-radius) + 8px);
+    --ui-transfer-item-radius: 14px;
+    --ui-transfer-action-radius: 14px;
+    --ui-transfer-label-size: 14px;
+    --ui-transfer-label-line-height: 20px;
+    --ui-transfer-description-size: 13px;
+    --ui-transfer-description-line-height: 18px;
+    --ui-transfer-title-size: 13px;
+    --ui-transfer-title-line-height: 18px;
+    --ui-transfer-summary-size: 12px;
+    --ui-transfer-summary-line-height: 16px;
+    --ui-transfer-item-title-size: 14px;
+    --ui-transfer-item-title-line-height: 20px;
+    --ui-transfer-item-description-size: 12px;
+    --ui-transfer-item-description-line-height: 16px;
+    --ui-transfer-button-size: 13px;
+    --ui-transfer-button-line-height: 18px;
+    --ui-transfer-icon-size: 18px;
+    --ui-transfer-action-gap: 2px;
+    --ui-transfer-action-padding-block: 10px;
+    --ui-transfer-action-padding-inline: 14px;
+    --ui-transfer-action-min-inline-size: 104px;
+    --ui-transfer-action-compact-inline-size: 56px;
+    --ui-transfer-action-min-block-size: 54px;
+    --ui-transfer-action-icon-box-size: 20px;
+    --ui-transfer-item-padding: 12px;
+    --ui-transfer-item-gap: 12px;
+    --ui-transfer-panel-min-height: 320px;
+    display: block;
+    min-inline-size: 0;
+    box-sizing: border-box;
+    color: var(--ui-transfer-text);
+    color-scheme: light dark;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    contain: layout style paint;
+    content-visibility: auto;
+    contain-intrinsic-size: 760px;
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-transfer-gap: 12px;
+    --ui-transfer-shell-padding: 12px;
+    --ui-transfer-panel-padding: 10px;
+    --ui-transfer-panel-gap: 8px;
+    --ui-transfer-panel-radius: 16px;
+    --ui-transfer-item-radius: 12px;
+    --ui-transfer-action-radius: 12px;
+    --ui-transfer-label-size: 13px;
+    --ui-transfer-label-line-height: 18px;
+    --ui-transfer-description-size: 12px;
+    --ui-transfer-description-line-height: 16px;
+    --ui-transfer-title-size: 12px;
+    --ui-transfer-title-line-height: 16px;
+    --ui-transfer-summary-size: 11px;
+    --ui-transfer-summary-line-height: 15px;
+    --ui-transfer-item-title-size: 13px;
+    --ui-transfer-item-title-line-height: 18px;
+    --ui-transfer-item-description-size: 11px;
+    --ui-transfer-item-description-line-height: 15px;
+    --ui-transfer-button-size: 12px;
+    --ui-transfer-button-line-height: 16px;
+    --ui-transfer-icon-size: 16px;
+    --ui-transfer-action-gap: 2px;
+    --ui-transfer-action-padding-block: 8px;
+    --ui-transfer-action-padding-inline: 12px;
+    --ui-transfer-action-min-inline-size: 92px;
+    --ui-transfer-action-compact-inline-size: 44px;
+    --ui-transfer-action-min-block-size: 44px;
+    --ui-transfer-action-icon-box-size: 18px;
+    --ui-transfer-item-padding: 10px;
+    --ui-transfer-item-gap: 10px;
+    --ui-transfer-panel-min-height: 280px;
+  }
+
+  :host([size="md"]),
+  :host([size="2"]) {
+    --ui-transfer-gap: 16px;
+    --ui-transfer-shell-padding: 16px;
+    --ui-transfer-panel-padding: 12px;
+    --ui-transfer-panel-gap: 10px;
+    --ui-transfer-panel-radius: 20px;
+    --ui-transfer-item-radius: 14px;
+    --ui-transfer-action-radius: 14px;
+    --ui-transfer-label-size: 14px;
+    --ui-transfer-label-line-height: 20px;
+    --ui-transfer-description-size: 13px;
+    --ui-transfer-description-line-height: 18px;
+    --ui-transfer-title-size: 13px;
+    --ui-transfer-title-line-height: 18px;
+    --ui-transfer-summary-size: 12px;
+    --ui-transfer-summary-line-height: 16px;
+    --ui-transfer-item-title-size: 14px;
+    --ui-transfer-item-title-line-height: 20px;
+    --ui-transfer-item-description-size: 12px;
+    --ui-transfer-item-description-line-height: 16px;
+    --ui-transfer-button-size: 13px;
+    --ui-transfer-button-line-height: 18px;
+    --ui-transfer-icon-size: 18px;
+    --ui-transfer-action-gap: 2px;
+    --ui-transfer-action-padding-block: 10px;
+    --ui-transfer-action-padding-inline: 14px;
+    --ui-transfer-action-min-inline-size: 104px;
+    --ui-transfer-action-compact-inline-size: 56px;
+    --ui-transfer-action-min-block-size: 54px;
+    --ui-transfer-action-icon-box-size: 20px;
+    --ui-transfer-item-padding: 12px;
+    --ui-transfer-item-gap: 12px;
+    --ui-transfer-panel-min-height: 320px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-transfer-gap: 18px;
+    --ui-transfer-shell-padding: 18px;
+    --ui-transfer-panel-padding: 14px;
+    --ui-transfer-panel-gap: 12px;
+    --ui-transfer-panel-radius: 24px;
+    --ui-transfer-item-radius: 16px;
+    --ui-transfer-action-radius: 16px;
+    --ui-transfer-label-size: 15px;
+    --ui-transfer-label-line-height: 22px;
+    --ui-transfer-description-size: 14px;
+    --ui-transfer-description-line-height: 20px;
+    --ui-transfer-title-size: 14px;
+    --ui-transfer-title-line-height: 20px;
+    --ui-transfer-summary-size: 13px;
+    --ui-transfer-summary-line-height: 18px;
+    --ui-transfer-item-title-size: 15px;
+    --ui-transfer-item-title-line-height: 22px;
+    --ui-transfer-item-description-size: 13px;
+    --ui-transfer-item-description-line-height: 18px;
+    --ui-transfer-button-size: 14px;
+    --ui-transfer-button-line-height: 18px;
+    --ui-transfer-icon-size: 20px;
+    --ui-transfer-action-gap: 4px;
+    --ui-transfer-action-padding-block: 12px;
+    --ui-transfer-action-padding-inline: 16px;
+    --ui-transfer-action-min-inline-size: 118px;
+    --ui-transfer-action-compact-inline-size: 64px;
+    --ui-transfer-action-min-block-size: 62px;
+    --ui-transfer-action-icon-box-size: 24px;
+    --ui-transfer-item-padding: 14px;
+    --ui-transfer-item-gap: 14px;
+    --ui-transfer-panel-min-height: 360px;
+  }
+
+  :host([tone="neutral"]) {
+    --ui-transfer-accent: #334155;
+  }
+
+  :host([tone="brand"]),
+  :host([tone="info"]) {
+    --ui-transfer-accent: var(--ui-color-primary, #2563eb);
+  }
+
+  :host([tone="success"]) {
+    --ui-transfer-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-transfer-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-transfer-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([variant="soft"]) {
+    --ui-transfer-shell-bg: color-mix(in srgb, var(--ui-transfer-accent) 4%, transparent);
+    --ui-transfer-panel-bg: color-mix(in srgb, var(--ui-transfer-accent) 5%, var(--ui-color-surface, #ffffff));
+    --ui-transfer-panel-border-color: color-mix(in srgb, var(--ui-transfer-accent) 16%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="solid"]) {
+    --ui-transfer-shell-bg: color-mix(in srgb, var(--ui-transfer-accent) 8%, transparent);
+    --ui-transfer-shell-border-color: color-mix(in srgb, var(--ui-transfer-accent) 18%, var(--ui-color-border, #cbd5e1));
+    --ui-transfer-panel-bg: color-mix(in srgb, var(--ui-transfer-accent) 12%, var(--ui-color-surface, #ffffff));
+    --ui-transfer-panel-border-color: color-mix(in srgb, var(--ui-transfer-accent) 24%, var(--ui-color-border, #cbd5e1));
+    --ui-transfer-panel-shadow:
+      0 1px 3px rgba(15, 23, 42, 0.05),
+      0 18px 36px color-mix(in srgb, var(--ui-transfer-accent) 8%, rgba(15, 23, 42, 0.06));
+    --ui-transfer-action-bg: color-mix(in srgb, var(--ui-transfer-accent) 18%, var(--ui-transfer-panel-bg));
+    --ui-transfer-action-hover-bg: color-mix(in srgb, var(--ui-transfer-accent) 24%, var(--ui-transfer-panel-bg));
+  }
+
+  :host([variant="glass"]) {
+    --ui-transfer-shell-bg: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 82%, #ffffff 18%),
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 94%, transparent)
+    );
+    --ui-transfer-shell-backdrop: blur(18px);
+    --ui-transfer-panel-bg: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 88%, #ffffff 12%),
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent)
+    );
+    --ui-transfer-panel-backdrop: blur(12px);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-transfer-text: #f8fafc;
+    --ui-transfer-muted: rgba(226, 232, 240, 0.82);
+    --ui-transfer-shell-bg: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--ui-transfer-accent) 18%, #0f172a 82%),
+      color-mix(in srgb, var(--ui-transfer-accent) 10%, #020617 90%)
+    );
+    --ui-transfer-shell-border-color: color-mix(in srgb, var(--ui-transfer-accent) 28%, rgba(248, 250, 252, 0.24));
+    --ui-transfer-shell-shadow: 0 24px 54px rgba(2, 6, 23, 0.36);
+    --ui-transfer-panel-bg: color-mix(in srgb, rgba(15, 23, 42, 0.92) 86%, var(--ui-transfer-accent) 14%);
+    --ui-transfer-panel-border-color: color-mix(in srgb, var(--ui-transfer-accent) 20%, rgba(248, 250, 252, 0.16));
+    --ui-transfer-item-bg: color-mix(in srgb, rgba(15, 23, 42, 0.74) 88%, transparent);
+    --ui-transfer-item-border-color: rgba(148, 163, 184, 0.18);
+    --ui-transfer-item-hover-bg: color-mix(in srgb, var(--ui-transfer-accent) 18%, rgba(15, 23, 42, 0.86));
+    --ui-transfer-item-selected-bg: color-mix(in srgb, var(--ui-transfer-accent) 26%, rgba(15, 23, 42, 0.9));
+    --ui-transfer-action-bg: color-mix(in srgb, var(--ui-transfer-accent) 24%, rgba(15, 23, 42, 0.92));
+    --ui-transfer-action-color: #f8fafc;
+    --ui-transfer-action-border-color: color-mix(in srgb, var(--ui-transfer-accent) 26%, rgba(248, 250, 252, 0.22));
+    --ui-transfer-action-hover-bg: color-mix(in srgb, var(--ui-transfer-accent) 34%, rgba(15, 23, 42, 0.94));
+    --ui-transfer-action-disabled-bg: rgba(15, 23, 42, 0.76);
+    --ui-transfer-action-disabled-color: rgba(148, 163, 184, 0.74);
+  }
+
+  :host([variant="minimal"]) {
+    --ui-transfer-shell-bg: transparent;
+    --ui-transfer-shell-border: none;
+    --ui-transfer-shell-shadow: none;
+    --ui-transfer-panel-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 94%, transparent);
+    --ui-transfer-panel-border-color: color-mix(in srgb, var(--ui-transfer-accent) 10%, transparent);
+    --ui-transfer-panel-shadow: none;
+    --ui-transfer-action-bg: transparent;
+    --ui-transfer-action-border-color: color-mix(in srgb, var(--ui-transfer-accent) 16%, var(--ui-color-border, #cbd5e1));
+    --ui-transfer-action-hover-bg: color-mix(in srgb, var(--ui-transfer-accent) 10%, transparent);
+  }
+
+  :host([elevation="none"]) {
+    --ui-transfer-shell-shadow: none;
+    --ui-transfer-panel-shadow: none;
+    --ui-transfer-action-shadow: none;
+  }
+
+  :host([elevation="low"]) {
+    --ui-transfer-shell-shadow:
+      0 1px 2px rgba(15, 23, 42, 0.05),
+      0 10px 20px rgba(15, 23, 42, 0.06);
+    --ui-transfer-panel-shadow:
+      0 1px 2px rgba(15, 23, 42, 0.05),
+      0 10px 24px rgba(15, 23, 42, 0.08);
+    --ui-transfer-action-shadow: 0 8px 18px color-mix(in srgb, var(--ui-transfer-accent) 8%, rgba(15, 23, 42, 0.08));
+  }
+
+  :host([elevation="high"]) {
+    --ui-transfer-shell-shadow:
+      0 2px 10px rgba(15, 23, 42, 0.08),
+      0 24px 54px rgba(15, 23, 42, 0.14);
+    --ui-transfer-panel-shadow:
+      0 2px 10px rgba(15, 23, 42, 0.08),
+      0 28px 60px rgba(15, 23, 42, 0.16);
+    --ui-transfer-action-shadow: 0 14px 28px color-mix(in srgb, var(--ui-transfer-accent) 12%, rgba(15, 23, 42, 0.1));
+  }
+
+  :host([disabled]) {
+    opacity: 0.68;
+  }
+
+  .root {
+    display: grid;
+    gap: 10px;
+    min-inline-size: 0;
+  }
+
+  .label,
+  .description,
+  .error {
+    margin: 0;
+  }
+
+  .label {
+    font-size: var(--ui-transfer-label-size);
+    line-height: var(--ui-transfer-label-line-height);
+    font-weight: 700;
+    color: var(--ui-transfer-text);
+  }
+
+  .description,
+  .error {
+    font-size: var(--ui-transfer-description-size);
+    line-height: var(--ui-transfer-description-line-height);
+    color: var(--ui-transfer-muted);
+  }
+
+  .error {
+    color: var(--ui-color-danger, #dc2626);
+    font-weight: 600;
+  }
+
+  .shell {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    gap: var(--ui-transfer-gap);
+    align-items: stretch;
+    padding: var(--ui-transfer-shell-padding);
+    border: var(--ui-transfer-shell-border);
+    border-radius: var(--ui-transfer-shell-radius);
+    background: var(--ui-transfer-shell-bg);
+    box-shadow: var(--ui-transfer-shell-shadow);
+    backdrop-filter: var(--ui-transfer-shell-backdrop);
+    min-inline-size: 0;
+  }
+
+  .panel {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    gap: var(--ui-transfer-panel-gap);
+    min-block-size: var(--ui-transfer-panel-min-height);
+    min-inline-size: 0;
+    padding: var(--ui-transfer-panel-padding);
+    border: var(--ui-transfer-panel-border);
+    border-radius: var(--ui-transfer-panel-radius);
+    background: var(--ui-transfer-panel-bg);
+    box-shadow: var(--ui-transfer-panel-shadow);
+    backdrop-filter: var(--ui-transfer-panel-backdrop);
+  }
+
+  .panel-header {
+    display: grid;
+    gap: 6px;
+    min-inline-size: 0;
+  }
+
+  .panel-heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    min-inline-size: 0;
+  }
+
+  .panel-title {
+    min-inline-size: 0;
+    font-size: var(--ui-transfer-title-size);
+    line-height: var(--ui-transfer-title-line-height);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--ui-transfer-muted);
+  }
+
+  .panel-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: 28px;
+    min-block-size: 24px;
+    padding-inline: 8px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--ui-transfer-accent) 12%, transparent);
+    color: color-mix(in srgb, var(--ui-transfer-accent) 76%, var(--ui-transfer-text));
+    font-size: var(--ui-transfer-summary-size);
+    line-height: 1;
+    font-weight: 700;
+  }
+
+  .panel-help,
+  .summary,
+  .empty {
+    font-size: var(--ui-transfer-summary-size);
+    line-height: var(--ui-transfer-summary-line-height);
+    color: var(--ui-transfer-muted);
+  }
+
+  .list {
+    display: grid;
+    align-content: start;
+    gap: 6px;
+    overflow: auto;
+    min-block-size: 0;
+    min-inline-size: 0;
+  }
+
+  .item {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: var(--ui-transfer-item-gap);
+    align-items: center;
+    min-inline-size: 0;
+    padding: var(--ui-transfer-item-padding);
+    border: var(--ui-transfer-item-border);
+    border-radius: var(--ui-transfer-item-radius);
+    background: var(--ui-transfer-item-bg);
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background 160ms ease,
+      border-color 160ms ease,
+      box-shadow 160ms ease,
+      transform 160ms ease;
+  }
+
+  .item:hover {
+    background: var(--ui-transfer-item-hover-bg);
+    border-color: var(--ui-transfer-item-hover-border-color);
+  }
+
+  .item:focus-visible {
+    outline: none;
+    border-color: color-mix(in srgb, var(--ui-transfer-accent) 26%, var(--ui-transfer-item-border-color));
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-transfer-accent) 14%, transparent),
+      var(--ui-transfer-item-selected-shadow);
+  }
+
+  .item[data-selected="true"] {
+    background: var(--ui-transfer-item-selected-bg);
+    border-color: var(--ui-transfer-item-selected-border-color);
+    box-shadow: var(--ui-transfer-item-selected-shadow);
+  }
+
+  .item[aria-disabled="true"] {
+    opacity: 0.54;
+    pointer-events: none;
+  }
+
+  .indicator {
+    display: inline-grid;
+    place-items: center;
+    inline-size: var(--ui-transfer-indicator-size);
+    block-size: var(--ui-transfer-indicator-size);
+    align-self: center;
+    justify-self: center;
+    flex-shrink: 0;
+  }
+
+  .indicator-box {
+    display: inline-grid;
+    place-items: center;
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: 6px;
+    border: 1.5px solid color-mix(in srgb, var(--ui-transfer-check-accent) 24%, var(--ui-color-border, #cbd5e1));
+    background: color-mix(in srgb, var(--ui-transfer-panel-bg) 96%, transparent);
+    transition:
+      background 160ms ease,
+      border-color 160ms ease,
+      box-shadow 160ms ease;
+  }
+
+  .indicator-mark {
+    font-size: 12px;
+    line-height: 1;
+    font-weight: 800;
+    color: color-mix(in srgb, var(--ui-transfer-check-accent) 86%, var(--ui-transfer-text));
+    opacity: 0;
+    transform: scale(0.85);
+    transition:
+      opacity 140ms ease,
+      transform 140ms ease;
+  }
+
+  .item[data-selected="true"] .indicator-box {
+    background: color-mix(in srgb, var(--ui-transfer-check-accent) 16%, var(--ui-transfer-panel-bg));
+    border-color: color-mix(in srgb, var(--ui-transfer-check-accent) 42%, var(--ui-color-border, #cbd5e1));
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-transfer-check-accent) 10%, transparent);
+  }
+
+  .item[data-selected="true"] .indicator-mark {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  :host([selection-indicator="tick"]) .indicator-box {
+    border: none;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  :host([selection-indicator="tick"]) .indicator-mark {
+    font-size: 15px;
+    color: color-mix(in srgb, var(--ui-transfer-check-accent) 88%, var(--ui-transfer-text));
+  }
+
+  :host([selection-indicator="tick"]) .item[data-selected="false"] .indicator-mark {
+    opacity: 0.2;
+    transform: scale(0.9);
+  }
+
+  :host([selection-indicator="none"]) .item {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  :host([selection-indicator="none"]) .indicator {
+    display: none;
+  }
+
+  .item-copy {
+    min-inline-size: 0;
+    align-self: center;
+  }
+
+  .item-title {
+    display: block;
+    min-inline-size: 0;
+    font-size: var(--ui-transfer-item-title-size);
+    line-height: var(--ui-transfer-item-title-line-height);
+    font-weight: 600;
+    color: var(--ui-transfer-text);
+  }
+
+  .item-description {
+    display: block;
+    margin-top: 3px;
+    min-inline-size: 0;
+    font-size: var(--ui-transfer-item-description-size);
+    line-height: var(--ui-transfer-item-description-line-height);
+    color: var(--ui-transfer-muted);
+  }
+
+  .actions {
+    display: grid;
+    align-content: center;
+    gap: 10px;
+  }
+
+  .move-btn {
+    appearance: none;
+    display: inline-grid;
+    justify-items: center;
+    align-content: center;
+    justify-content: center;
+    place-items: center;
+    text-align: center;
+    gap: var(--ui-transfer-action-gap);
+    min-inline-size: var(--ui-transfer-action-min-inline-size);
+    min-block-size: var(--ui-transfer-action-min-block-size);
+    padding: var(--ui-transfer-action-padding-block) var(--ui-transfer-action-padding-inline);
+    border: var(--ui-transfer-action-border);
+    border-radius: var(--ui-transfer-action-radius);
+    background: var(--ui-transfer-action-bg);
+    color: var(--ui-transfer-action-color);
+    box-shadow: var(--ui-transfer-action-shadow);
+    cursor: pointer;
+    transition:
+      background 160ms ease,
+      border-color 160ms ease,
+      transform 160ms ease,
+      box-shadow 160ms ease;
+  }
+
+  .move-btn[data-compact="true"] {
+    min-inline-size: var(--ui-transfer-action-compact-inline-size);
+    padding-inline: max(10px, calc(var(--ui-transfer-action-padding-inline) - 2px));
+  }
+
+  .move-btn:hover:not(:disabled) {
+    background: var(--ui-transfer-action-hover-bg);
+    transform: translateY(-1px);
+  }
+
+  .move-btn:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-transfer-accent) 16%, transparent),
+      var(--ui-transfer-action-shadow);
+  }
+
+  .move-btn:disabled {
+    background: var(--ui-transfer-action-disabled-bg);
+    color: var(--ui-transfer-action-disabled-color);
+    border-color: color-mix(in srgb, var(--ui-transfer-action-border-color) 68%, transparent);
+    box-shadow: none;
+    cursor: not-allowed;
+  }
+
+  .move-btn-icon {
+    display: inline-grid;
+    place-items: center;
+    inline-size: var(--ui-transfer-action-icon-box-size);
+    block-size: var(--ui-transfer-action-icon-box-size);
+    line-height: 0;
+  }
+
+  .move-btn-icon svg {
+    inline-size: var(--ui-transfer-icon-size);
+    block-size: var(--ui-transfer-icon-size);
+    display: block;
+  }
+
+  .move-btn-text {
+    font-size: var(--ui-transfer-button-size);
+    line-height: var(--ui-transfer-button-line-height);
+    font-weight: 700;
+  }
+
+  .move-btn-count {
+    font-size: var(--ui-transfer-summary-size);
+    line-height: 1;
+    opacity: 0.78;
+  }
+
+  :host([disabled]) .item,
+  :host([disabled]) .move-btn {
+    pointer-events: none;
+  }
+
+  @media (max-width: 760px) {
+    .shell {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .actions {
+      grid-auto-flow: column;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .move-btn {
+      min-inline-size: 0;
+    }
+  }
+`;
+function l(n) {
+  return n.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function y(n) {
+  if (!n)
+    return [];
+  try {
+    const r = JSON.parse(n);
+    if (!Array.isArray(r))
+      return [];
+    const t = [];
+    return r.forEach((e) => {
+      if (!e || typeof e != "object")
+        return;
+      const a = {
+        value: String(e.value ?? ""),
+        label: String(e.label ?? e.value ?? ""),
+        disabled: !!e.disabled
+      };
+      e.description && (a.description = String(e.description)), a.value && t.push(a);
+    }), t;
+  } catch {
+    return [];
+  }
+}
+function _(n) {
+  if (!n)
+    return [];
+  try {
+    const r = JSON.parse(n);
+    return Array.isArray(r) ? r.map((t) => String(t)) : [];
+  } catch {
+    return [];
+  }
+}
+function k(n, r) {
+  return new Set(Array.from(n).filter((t) => r.has(t)));
+}
+function R(n) {
+  return n === "tick" || n === "none" ? n : "checkbox";
+}
+function h(n, r) {
+  return n == null ? r : n === "" || n === "true" || n === "1" || n === "yes" ? !0 : n === "false" || n === "0" || n === "no" ? !1 : r;
+}
+function w(n) {
+  return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="${n === "right" ? "M9 6l6 6-6 6" : "M15 6l-6 6 6 6"}"/></svg>`;
+}
+class U extends D {
+  constructor() {
+    super(...arguments), this._options = [], this._value = [], this._selectedAvailable = /* @__PURE__ */ new Set(), this._selectedChosen = /* @__PURE__ */ new Set(), this._formUnregister = null, this._suppressValueAttr = !1, this._delegatedListenersAttached = !1, this._handleRootClick = (r) => {
+      const t = r.target;
+      if (!t)
+        return;
+      const e = t.closest(".move-btn");
+      if (e && this.root.contains(e)) {
+        this._move(e.getAttribute("data-action"));
+        return;
+      }
+      const a = t.closest(".item");
+      a && this.root.contains(a) && this._toggleItem(a);
+    }, this._handleRootKeyDown = (r) => {
+      const t = r.target;
+      if (!t)
+        return;
+      const e = t.closest(".item");
+      e && this.root.contains(e) && this._onItemKeyDown(r, e);
+    };
+  }
+  static get observedAttributes() {
+    return [
+      "options",
+      "value",
+      "label",
+      "description",
+      "error",
+      "name",
+      "disabled",
+      "variant",
+      "tone",
+      "size",
+      "radius",
+      "elevation",
+      "available-label",
+      "selected-label",
+      "available-empty-label",
+      "selected-empty-label",
+      "selection-indicator",
+      "add-action-label",
+      "remove-action-label",
+      "show-action-labels",
+      "show-action-counts",
+      "show-panel-counts"
+    ];
+  }
+  get value() {
+    return [...this._value];
+  }
+  set value(r) {
+    this._applyValue(r, "api");
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._attachDelegatedListeners(), this._registerWithForm();
+  }
+  disconnectedCallback() {
+    this._formUnregister && this._formUnregister(), this._detachDelegatedListeners(), super.disconnectedCallback();
+  }
+  attributeChangedCallback(r, t, e) {
+    t !== e && (r === "options" && (this._options = y(e)), r === "value" && !this._suppressValueAttr && (this._value = _(e)), r === "name" && this.isConnected && this._registerWithForm(), r === "disabled" && (this._selectedAvailable.clear(), this._selectedChosen.clear()), this.isConnected && this.requestRender());
+  }
+  render() {
+    this._options.length || (this._options = y(this.getAttribute("options"))), !this._value.length && this.getAttribute("value") && (this._value = _(this.getAttribute("value")));
+    const r = new Set(this._value), t = this._options.filter((i) => !r.has(i.value)), e = this._options.filter((i) => r.has(i.value)), a = new Set(t.map((i) => i.value)), o = new Set(e.map((i) => i.value));
+    this._selectedAvailable = k(this._selectedAvailable, a), this._selectedChosen = k(this._selectedChosen, o);
+    const s = this.getAttribute("label") || "", c = this.getAttribute("description") || "", u = this.getAttribute("error") || "", d = this.getAttribute("available-label") || "Available", f = this.getAttribute("selected-label") || "Selected", A = this.getAttribute("available-empty-label") || "No items available to add.", $ = this.getAttribute("selected-empty-label") || "No items selected yet.", C = R(this.getAttribute("selection-indicator")), S = this.getAttribute("add-action-label") || "Add selected", L = this.getAttribute("remove-action-label") || "Remove selected", p = h(this.getAttribute("show-action-labels"), !0), b = h(this.getAttribute("show-action-counts"), !0), m = h(this.getAttribute("show-panel-counts"), !0), g = this.getAttribute("radius"), E = g ? ` style="--ui-transfer-panel-radius:${l(g)};"` : "", v = () => C === "none" ? "" : '<span class="indicator" part="indicator" aria-hidden="true"><span class="indicator-box"><span class="indicator-mark">✓</span></span></span>', x = (i) => p ? `<span class="move-btn-text">${l(i)}</span>` : "", z = (i) => b ? `<span class="move-btn-count">${i}</span>` : "", I = t.length ? t.map(
+      (i) => `<div
+              class="item"
+              part="item available-item"
+              role="option"
+              data-side="available"
+              data-value="${l(i.value)}"
+              data-selected="${this._selectedAvailable.has(i.value)}"
+              aria-selected="${this._selectedAvailable.has(i.value) ? "true" : "false"}"
+              aria-disabled="${i.disabled ? "true" : "false"}"
+              tabindex="${i.disabled ? "-1" : "0"}"
+            >
+              ${v()}
+              <div class="item-copy">
+                <span class="item-title">${l(i.label)}</span>
+                ${i.description ? `<span class="item-description">${l(i.description)}</span>` : ""}
+              </div>
+            </div>`
+    ).join("") : `<div class="empty" part="empty">${l(A)}</div>`, V = e.length ? e.map(
+      (i) => `<div
+              class="item"
+              part="item selected-item"
+              role="option"
+              data-side="chosen"
+              data-value="${l(i.value)}"
+              data-selected="${this._selectedChosen.has(i.value)}"
+              aria-selected="${this._selectedChosen.has(i.value) ? "true" : "false"}"
+              aria-disabled="${i.disabled ? "true" : "false"}"
+              tabindex="${i.disabled ? "-1" : "0"}"
+            >
+              ${v()}
+              <div class="item-copy">
+                <span class="item-title">${l(i.label)}</span>
+                ${i.description ? `<span class="item-description">${l(i.description)}</span>` : ""}
+              </div>
+            </div>`
+    ).join("") : `<div class="empty" part="empty">${l($)}</div>`;
+    this.setContent(`
+      <style>${q}</style>
+      <div class="root"${E} part="root">
+        ${s ? `<p class="label" part="label">${l(s)}</p>` : ""}
+        ${c ? `<p class="description" part="description">${l(c)}</p>` : ""}
+        <div class="shell" part="shell">
+          <section class="panel" part="panel panel-available">
+            <div class="panel-header" part="panel-header">
+              <div class="panel-heading">
+                <div class="panel-title">${l(d)}</div>
+                ${m ? `<span class="panel-count" part="count">${t.length}</span>` : ""}
+              </div>
+              <div class="panel-help">Choose entries to move into the selected list.</div>
+            </div>
+            <div class="list" part="list available-list" data-list="available" role="listbox" aria-multiselectable="true">${I}</div>
+            <div class="summary" part="summary">${t.length} available</div>
+          </section>
+          <div class="actions" part="actions">
+            <button class="move-btn" part="action-button action-add" data-compact="${!p && !b}" data-action="add" type="button"${this._selectedAvailable.size ? "" : " disabled"}>
+              <span class="move-btn-icon" aria-hidden="true">${w("right")}</span>
+              ${x(S)}
+              ${z(this._selectedAvailable.size || 0)}
+            </button>
+            <button class="move-btn" part="action-button action-remove" data-compact="${!p && !b}" data-action="remove" type="button"${this._selectedChosen.size ? "" : " disabled"}>
+              <span class="move-btn-icon" aria-hidden="true">${w("left")}</span>
+              ${x(L)}
+              ${z(this._selectedChosen.size || 0)}
+            </button>
+          </div>
+          <section class="panel" part="panel panel-selected">
+            <div class="panel-header" part="panel-header">
+              <div class="panel-heading">
+                <div class="panel-title">${l(f)}</div>
+                ${m ? `<span class="panel-count" part="count">${e.length}</span>` : ""}
+              </div>
+              <div class="panel-help">Use the remove action to send items back.</div>
+            </div>
+            <div class="list" part="list selected-list" data-list="chosen" role="listbox" aria-multiselectable="true">${V}</div>
+            <div class="summary" part="summary">${e.length} selected</div>
+          </section>
+        </div>
+        ${u ? `<p class="error" part="error">${l(u)}</p>` : ""}
+      </div>
+    `);
+  }
+  _toggleItem(r) {
+    if (this.hasAttribute("disabled"))
+      return;
+    const t = r.getAttribute("data-side"), e = r.getAttribute("data-value") || "";
+    if (!e)
+      return;
+    const a = t === "chosen" ? this._selectedChosen : this._selectedAvailable;
+    a.has(e) ? a.delete(e) : a.add(e), r.setAttribute("data-selected", a.has(e) ? "true" : "false"), r.setAttribute("aria-selected", a.has(e) ? "true" : "false"), this._syncActionButtons();
+  }
+  _onItemKeyDown(r, t) {
+    var u, d, f;
+    const e = t.getAttribute("data-side");
+    if (!e)
+      return;
+    if (r.key === "Enter" || r.key === " ") {
+      r.preventDefault(), this._toggleItem(t);
+      return;
+    }
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(r.key))
+      return;
+    r.preventDefault();
+    const a = this.root.querySelector(`[data-list="${e}"]`), o = Array.from((a == null ? void 0 : a.querySelectorAll('.item[tabindex="0"]')) || []);
+    if (!o.length)
+      return;
+    const s = o.indexOf(t);
+    if (r.key === "Home") {
+      (u = o[0]) == null || u.focus();
+      return;
+    }
+    if (r.key === "End") {
+      (d = o[o.length - 1]) == null || d.focus();
+      return;
+    }
+    const c = r.key === "ArrowDown" ? Math.min(o.length - 1, s + 1) : Math.max(0, s - 1);
+    (f = o[c]) == null || f.focus();
+  }
+  _move(r) {
+    if (!this.hasAttribute("disabled")) {
+      if (r === "add") {
+        const t = [...this._value, ...Array.from(this._selectedAvailable).filter((e) => !this._value.includes(e))];
+        this._selectedAvailable.clear(), this._applyValue(t, "transfer-right");
+        return;
+      }
+      if (r === "remove") {
+        const t = new Set(this._selectedChosen), e = this._value.filter((a) => !t.has(a));
+        this._selectedChosen.clear(), this._applyValue(e, "transfer-left");
+      }
+    }
+  }
+  _attachDelegatedListeners() {
+    this._delegatedListenersAttached || (this.root.addEventListener("click", this._handleRootClick), this.root.addEventListener("keydown", this._handleRootKeyDown), this._delegatedListenersAttached = !0);
+  }
+  _detachDelegatedListeners() {
+    this._delegatedListenersAttached && (this.root.removeEventListener("click", this._handleRootClick), this.root.removeEventListener("keydown", this._handleRootKeyDown), this._delegatedListenersAttached = !1);
+  }
+  _applyValue(r, t) {
+    const e = new Set(this._options.map((s) => s.value)), a = Array.from(new Set(r.filter((s) => s && (e.size === 0 || e.has(s))))), o = [...this._value];
+    this._value = a, this._suppressValueAttr = !0;
+    try {
+      a.length ? this.setAttribute("value", JSON.stringify(a)) : this.removeAttribute("value");
+    } finally {
+      this._suppressValueAttr = !1;
+    }
+    a.length > 0 && this.removeAttribute("invalid"), this.requestRender(), this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: {
+          value: [...this._value],
+          previousValue: o,
+          selectedItems: this._options.filter((s) => this._value.includes(s.value)),
+          source: t
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _syncActionButtons() {
+    const r = this.root.querySelector('[data-action="add"]'), t = this.root.querySelector('[data-action="remove"]');
+    if (r) {
+      r.disabled = this._selectedAvailable.size === 0;
+      const e = r.querySelector(".move-btn-count");
+      e && (e.textContent = String(this._selectedAvailable.size));
+    }
+    if (t) {
+      t.disabled = this._selectedChosen.size === 0;
+      const e = t.querySelector(".move-btn-count");
+      e && (e.textContent = String(this._selectedChosen.size));
+    }
+  }
+  _registerWithForm() {
+    var r;
+    this._formUnregister && (this._formUnregister(), this._formUnregister = null);
+    try {
+      const e = this.getRootNode().host, o = ((r = e == null ? void 0 : e.closest) == null ? void 0 : r.call(e, "ui-form")) || null || this.closest("ui-form"), s = this.getAttribute("name");
+      o && typeof o.registerField == "function" && s && (this._formUnregister = o.registerField(s, {
+        name: s,
+        getValue: () => [...this._value],
+        setValue: (c) => {
+          const u = Array.isArray(c) ? c.map((d) => String(d)) : [];
+          this._applyValue(u, "api");
+        },
+        validate: async () => ({ valid: !this.hasAttribute("required") || this._value.length > 0, message: "Select at least one item." }),
+        setError: (c) => {
+          c ? (this.setAttribute("error", c), this.setAttribute("invalid", "")) : (this.removeAttribute("error"), this.removeAttribute("invalid")), this.requestRender();
+        }
+      }));
+    } catch {
+    }
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-transfer-list") && customElements.define("ui-transfer-list", U);
+export {
+  U as UITransferList
+};