@zeyos/zx 4.1.1 → 4.3.0

package/src/components/dropdown/dropdown.js

@@ -1,5 +1,6 @@
 import { Component } from '../../core/component.js';
 import { h, resolveElement } from '../../core/dom.js';
+import { overlayHost } from '../../core/overlay-host.js';
 import { position } from '../../core/position.js';
 import { uid } from '../../core/util.js';
 
@@ -14,6 +15,7 @@ const HANDLE_ESCAPE_DISMISS = Symbol('zxDropdownEscapeDismiss');
  * @property {boolean} [matchWidth=false] Whether the panel matches the anchor width.
  * @property {'click'|'manual'} [openOn='click'] Trigger behavior.
  * @property {boolean} [closeOnSelect=false] Whether a click within the panel closes it.
+ * @property {Element|string|null} [scope=null] Element whose nearest Zx theme scope owns the panel; defaults to the anchor.
  * @property {(event: CustomEvent<Record<string, never>>) => void} [onopen] Open event listener.
  * @property {(event: CustomEvent<Record<string, never>>) => void} [onclose] Close event listener.
  */
@@ -34,7 +36,8 @@ export class Dropdown extends Component {
     offset: 4,
     matchWidth: false,
     openOn: 'click',
-    closeOnSelect: false
+    closeOnSelect: false,
+    scope: null
   };
 
   /** @type {Element} */
@@ -55,6 +58,7 @@ export class Dropdown extends Component {
     if (!resolved) throw new TypeError('Dropdown anchor could not be resolved');
     super(null, options);
     this.#anchor = resolved;
+    overlayHost(this.options.scope ?? resolved).append(this.el);
     this.#rememberAnchorAttribute('aria-expanded');
     this.#rememberAnchorAttribute('aria-controls');
     this.#anchor.setAttribute('aria-expanded', 'false');
@@ -79,7 +83,6 @@ export class Dropdown extends Component {
       popover: 'manual'
     });
     panel.dataset.state = 'closed';
-    document.body.append(panel);
     return panel;
   }
 
@@ -90,6 +93,8 @@ export class Dropdown extends Component {
    */
   open() {
     if (this.isOpen() || this.#destroyed) return this;
+    const host = overlayHost(this.options.scope ?? this.#anchor);
+    if (this.el.parentElement !== host) host.append(this.el);
     this.#position = position(this.#anchor, this.el, {
       placement: this.options.placement,
       offset: Number(this.options.offset),

package/src/components/kanban-view/kanban-view.css

@@ -0,0 +1,216 @@
+.zx-kanban-view {
+  inline-size: 100%;
+  min-inline-size: 0;
+  container-type: inline-size;
+}
+
+.zx-kanban-view__toolbar:empty {
+  display: none;
+}
+
+.zx-kanban-view__board {
+  min-inline-size: 0;
+  overflow: auto;
+  overscroll-behavior-inline: contain;
+  border: 1px solid var(--zx-color-border);
+  border-radius: var(--zx-radius-lg);
+  background: var(--zx-color-bg-muted);
+  padding: var(--zx-space-3);
+  scrollbar-gutter: stable;
+}
+
+.zx-kanban-view__lane + .zx-kanban-view__lane {
+  margin-block-start: var(--zx-space-4);
+  border-block-start: 1px solid var(--zx-color-border);
+  padding-block-start: var(--zx-space-3);
+}
+
+.zx-kanban-view__lane-heading,
+.zx-kanban-view__column-heading {
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+  margin: 0;
+  color: var(--zx-color-text);
+  font-size: var(--zx-text-md);
+  font-weight: var(--zx-control-font-weight);
+  line-height: 1.3;
+}
+
+.zx-kanban-view__lane-heading {
+  margin-block-end: var(--zx-space-2);
+}
+
+.zx-kanban-view__columns {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(260px, min(82vw, 340px));
+  align-items: start;
+  gap: var(--zx-space-3);
+  min-inline-size: max-content;
+}
+
+.zx-kanban-view__column {
+  display: grid;
+  grid-template-rows: auto minmax(64px, auto);
+  gap: var(--zx-space-2);
+  min-inline-size: 0;
+  border: 1px solid var(--zx-color-border);
+  border-radius: var(--zx-radius-md);
+  background: var(--zx-color-bg-surface);
+  padding: var(--zx-space-2);
+}
+
+.zx-kanban-view__column[data-collapsed="true"] {
+  grid-template-rows: auto;
+}
+
+.zx-kanban-view__column-label {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.zx-kanban-view__collapse,
+.zx-kanban-view__move-handle {
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-items: center;
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+  background: transparent;
+  color: var(--zx-color-text-muted);
+  cursor: pointer;
+}
+
+.zx-kanban-view__collapse {
+  inline-size: 26px;
+  block-size: 26px;
+}
+
+.zx-kanban-view__move-handle {
+  inline-size: 28px;
+  block-size: 28px;
+  cursor: grab;
+  touch-action: none;
+}
+
+.zx-kanban-view__move-handle[aria-pressed="true"] {
+  background: var(--zx-color-accent-subtle);
+  color: var(--zx-color-accent);
+  cursor: grabbing;
+}
+
+.zx-kanban-view__collapse:hover,
+.zx-kanban-view__move-handle:hover {
+  background: var(--zx-color-bg-hover);
+  color: var(--zx-color-text);
+}
+
+.zx-kanban-view__collapse:focus-visible,
+.zx-kanban-view__move-handle:focus-visible,
+.zx-kanban-view .zx-record-card:focus-visible {
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
+}
+
+.zx-kanban-view__count {
+  flex: 0 0 auto;
+  margin-inline-start: auto;
+  border-radius: var(--zx-radius-sm);
+  background: var(--zx-color-bg-muted);
+  padding: var(--zx-space-1) var(--zx-space-2);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-control-font-size);
+  font-weight: var(--zx-control-font-weight);
+  white-space: nowrap;
+}
+
+.zx-kanban-view__column[data-wip="limit"] .zx-kanban-view__count {
+  background: var(--zx-color-warning-bg);
+  color: var(--zx-color-warning);
+}
+
+.zx-kanban-view__column[data-wip="exceeded"] .zx-kanban-view__count {
+  background: var(--zx-color-danger-bg);
+  color: var(--zx-color-danger);
+}
+
+.zx-kanban-view__cards {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--zx-space-2);
+  min-block-size: 64px;
+  margin: 0;
+  border-radius: var(--zx-radius-sm);
+  padding: var(--zx-space-1);
+  list-style: none;
+}
+
+.zx-kanban-view__cards > .zx-record-card {
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.zx-kanban-view__cards[data-drop="append"],
+.zx-kanban-view__cards[data-keyboard-target="append"] {
+  box-shadow: inset 0 -3px 0 var(--zx-color-accent);
+}
+
+.zx-kanban-view .zx-record-card[data-drop="before"],
+.zx-kanban-view .zx-record-card[data-keyboard-target="before"] {
+  box-shadow: 0 -3px 0 var(--zx-color-accent);
+}
+
+.zx-kanban-view .zx-record-card[data-drop="after"] {
+  box-shadow: 0 3px 0 var(--zx-color-accent);
+}
+
+.zx-kanban-view .zx-record-card[data-dragging="true"] {
+  opacity: .5;
+}
+
+.zx-kanban-view .zx-record-card[data-grabbed="true"] {
+  outline: 2px solid var(--zx-color-accent);
+  outline-offset: 2px;
+}
+
+.zx-kanban-view__empty {
+  display: grid;
+  place-items: center;
+  min-block-size: 160px;
+  color: var(--zx-color-text-muted);
+  text-align: center;
+}
+
+.zx-kanban-view__live {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.zx-kanban-view[data-loading="true"] .zx-kanban-view__board {
+  pointer-events: none;
+}
+
+@container (max-width: 420px) {
+  .zx-kanban-view__columns {
+    grid-auto-columns: minmax(240px, 88vw);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .zx-kanban-view__collapse,
+  .zx-kanban-view__move-handle,
+  .zx-kanban-view .zx-record-card {
+    transition: color var(--zx-dur-fast) var(--zx-ease),
+      background var(--zx-dur-fast) var(--zx-ease),
+      box-shadow var(--zx-dur-fast) var(--zx-ease),
+      opacity var(--zx-dur-fast) var(--zx-ease);
+  }
+}