@editora/ui-core 0.1.9 → 0.1.10

package/dist/transfer-list.cjs.js

@@ -0,0 +1,734 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const q=require("./ElementBase-1b301e7f.js"),U=`
+  :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 A extends q.ElementBase{constructor(){super(...arguments),this._options=[],this._value=[],this._selectedAvailable=new Set,this._selectedChosen=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",$=this.getAttribute("available-empty-label")||"No items available to add.",S=this.getAttribute("selected-empty-label")||"No items selected yet.",C=R(this.getAttribute("selection-indicator")),L=this.getAttribute("add-action-label")||"Add selected",E=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"),I=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>`:"",V=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($)}</div>`,D=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(S)}</div>`;this.setContent(`
+      <style>${U}</style>
+      <div class="root"${I} 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">${V}</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(L)}
+              ${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(E)}
+              ${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">${D}</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",A);exports.UITransferList=A;