@zeyos/zx 3.0.0 → 4.1.0

package/src/components/app-icon/app-icon.css

@@ -0,0 +1,105 @@
+.zx-app-icon {
+  --zx-app-icon-size: 36px;
+  --zx-app-icon-glyph-size: 52%;
+  --zx-app-icon-color: var(--zx-color-accent);
+  position: relative;
+  isolation: isolate;
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  inline-size: var(--zx-app-icon-size);
+  block-size: var(--zx-app-icon-size);
+  overflow: hidden;
+  border: 1px solid var(--zx-color-glass-border);
+  border-radius: max(var(--zx-radius-md), calc(var(--zx-app-icon-size) * .22));
+  background: var(--zx-app-icon-color);
+  box-shadow: var(--zx-app-icon-shadow);
+  color: var(--zx-app-icon-glyph, var(--zx-color-text-invert));
+  font-size: var(--zx-app-icon-size);
+  vertical-align: middle;
+}
+
+.zx-app-icon[data-glass="subtle"],
+.zx-app-icon[data-glass="strong"] {
+  background:
+    linear-gradient(145deg, var(--zx-color-glass-highlight), transparent 44%),
+    color-mix(in srgb, var(--zx-app-icon-color) var(--zx-glass-color-strength), transparent);
+}
+
+.zx-app-icon[data-glass="strong"] {
+  backdrop-filter: blur(var(--zx-glass-blur)) saturate(var(--zx-glass-saturation));
+}
+
+.zx-app-icon[data-glass="none"] {
+  border-color: var(--zx-color-border);
+  box-shadow: none;
+}
+
+.zx-app-icon[data-glass="none"] .zx-app-icon__shine { display: none; }
+
+.zx-app-icon[data-selected] {
+  outline: 2px solid var(--zx-color-bg-page);
+  box-shadow: 0 0 0 3px var(--zx-color-ring), var(--zx-overlay-shadow);
+}
+
+.zx-app-icon__shine {
+  position: absolute;
+  z-index: -1;
+  inset: 1px 12% auto;
+  block-size: 42%;
+  border-radius: 999px;
+  background: linear-gradient(to bottom, var(--zx-color-glass-highlight-strong), transparent);
+  filter: blur(2px);
+  pointer-events: none;
+}
+
+.zx-app-icon__glyph {
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--zx-app-icon-glyph-size);
+  block-size: var(--zx-app-icon-glyph-size);
+  font-size: var(--zx-app-icon-glyph-size);
+  line-height: 1;
+  filter: drop-shadow(var(--zx-glass-glyph-shadow));
+}
+
+.zx-app-icon__glyph > .zx-icon,
+.zx-app-icon__glyph > svg,
+.zx-app-icon__glyph > i {
+  inline-size: 1em;
+  block-size: 1em;
+}
+
+.zx-app-icon__badge {
+  position: absolute;
+  inset-block-end: 1px;
+  inset-inline-end: 1px;
+  display: grid;
+  place-items: center;
+  min-inline-size: 14px;
+  block-size: 14px;
+  padding-inline: 3px;
+  border: 1px solid var(--zx-color-bg-raised);
+  border-radius: var(--zx-radius-full);
+  background: var(--zx-color-danger);
+  color: var(--zx-color-text-invert);
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .zx-app-icon[data-glass="strong"] {
+    background: var(--zx-app-icon-color);
+    backdrop-filter: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .zx-app-icon {
+    border-color: ButtonText;
+    background: ButtonFace;
+    color: ButtonText;
+    box-shadow: none;
+  }
+}

package/src/components/app-icon/app-icon.js

@@ -0,0 +1,134 @@
+import { Component } from '../../core/component.js';
+import { h, restoreTarget, snapshotTarget } from '../../core/dom.js';
+import { icon as renderIcon } from '../../core/icons.js';
+import { isCssColor } from '../../core/util.js';
+
+/**
+ * @typedef {Object} AppIconOptions
+ * @property {string|Node|(()=>string|Node)|null} [icon=null] Icon name, node, or lazy renderer.
+ * @property {string|null} [color=null] Identity colour; falls back to the accent colour.
+ * @property {number|string} [size=36] Edge length in pixels or any CSS length.
+ * @property {number|string} [iconSize='52%'] Glyph size.
+ * @property {string|null} [label=null] Accessible image label; null makes the icon decorative.
+ * @property {string|number|null} [badge=null] Optional corner badge.
+ * @property {boolean} [selected=false] Whether the icon represents the active application.
+ * @property {false|'subtle'|'strong'} [glass='subtle'] CSS-first glass treatment.
+ * @property {string|string[]} [class] Additional class names.
+ */
+
+/**
+ * Stable application-identity tile with progressive CSS glass treatment.
+ * @extends {Component<AppIconOptions>}
+ */
+export class AppIcon extends Component {
+  static cssName = 'app-icon';
+
+  /** @type {Readonly<AppIconOptions>} */
+  static defaults = {
+    icon: null,
+    color: null,
+    size: 36,
+    iconSize: '52%',
+    label: null,
+    badge: null,
+    selected: false,
+    glass: 'subtle',
+    class: []
+  };
+
+  /** @returns {HTMLElement} */
+  render() {
+    this._createdRoot = this.el === null;
+    const root = /** @type {HTMLElement} */ (this.el ?? h('span'));
+    this.el = root;
+    this._snapshot = this._createdRoot ? null : snapshotTarget(root);
+    this._state = { ...this.options };
+    this._appliedClasses = [];
+    this._sync();
+    return root;
+  }
+
+  /** Updates identity or presentation without replacing the root. @param {Partial<AppIconOptions>} values @returns {this} */
+  set(values = {}) {
+    if (!values || typeof values !== 'object') return this;
+    Object.assign(this._state, values);
+    this._sync();
+    return this;
+  }
+
+  /** Restores an enhanced target. @returns {void} */
+  destroy() {
+    const root = this.el;
+    const snapshot = this._snapshot;
+    super.destroy();
+    if (!this._createdRoot && root) restoreTarget(root, snapshot);
+  }
+
+  /** @returns {void} */
+  _sync() {
+    const state = this._state;
+    this.el.classList.remove(...this._appliedClasses);
+    this._appliedClasses = [state.class].flat()
+      .flatMap((value) => String(value ?? '').split(/\s+/)).filter(Boolean);
+    this.el.classList.add(...this._appliedClasses);
+    const size = cssLength(state.size, '36px');
+    const glyphSize = cssLength(state.iconSize, '52%');
+    this.el.style.setProperty('--zx-app-icon-size', size);
+    this.el.style.setProperty('--zx-app-icon-glyph-size', glyphSize);
+    if (isCssColor(state.color)) this.el.style.setProperty('--zx-app-icon-color', String(state.color));
+    else this.el.style.removeProperty('--zx-app-icon-color');
+    this.el.dataset.glass = normalizeGlass(state.glass);
+    this.el.toggleAttribute('data-selected', Boolean(state.selected));
+
+    const label = state.label == null ? '' : String(state.label).trim();
+    if (label) {
+      this.el.setAttribute('role', 'img');
+      this.el.setAttribute('aria-label', label);
+      this.el.removeAttribute('aria-hidden');
+    } else {
+      this.el.removeAttribute('role');
+      this.el.removeAttribute('aria-label');
+      this.el.setAttribute('aria-hidden', 'true');
+    }
+
+    const visual = resolveVisual(state.icon);
+    const badge = state.badge == null || state.badge === '' ? null : h('span', {
+      class: 'zx-app-icon__badge', ariaHidden: 'true'
+    }, String(state.badge));
+    this.el.replaceChildren(
+      h('span', { class: 'zx-app-icon__shine', ariaHidden: 'true' }),
+      h('span', { class: 'zx-app-icon__glyph', ariaHidden: 'true' }, visual),
+      badge
+    );
+  }
+}
+
+/**
+ * Creates an AppIcon element without retaining a component lifecycle handle.
+ * @param {AppIconOptions} [options={}] Icon options.
+ * @returns {HTMLElement}
+ */
+export function appIcon(options = {}) {
+  return new AppIcon(null, options).toElement();
+}
+
+/** @param {AppIconOptions['icon']} value @returns {Node|string|null} */
+function resolveVisual(value) {
+  const resolved = typeof value === 'function' ? value() : value;
+  if (typeof resolved === 'string') return renderIcon(resolved, { size: '1em' });
+  return resolved && typeof resolved === 'object' && typeof resolved.nodeType === 'number'
+    ? /** @type {Node} */ (resolved) : null;
+}
+
+/** @param {unknown} value @param {string} fallback @returns {string} */
+function cssLength(value, fallback) {
+  if (typeof value === 'number' && Number.isFinite(value)) return `${Math.max(1, value)}px`;
+  const text = String(value ?? '').trim();
+  return text && !/[;{}]/.test(text) ? text : fallback;
+}
+
+/** @param {unknown} value @returns {'none'|'subtle'|'strong'} */
+function normalizeGlass(value) {
+  if (value === false || value === 'none') return 'none';
+  return value === 'strong' ? 'strong' : 'subtle';
+}

package/src/components/app-sidebar/app-sidebar.css

@@ -6,6 +6,18 @@
   color: var(--zx-color-text);
 }
 
+.zx-app-sidebar[data-orientation="horizontal"] {
+  inline-size: 100%;
+}
+
+.zx-app-sidebar[data-orientation="horizontal"] > .zx-app-sidebar__rail {
+  inline-size: 100%;
+}
+
+.zx-app-sidebar__rail.zx-app-rail {
+  border: 0;
+}
+
 .zx-app-sidebar__expanded {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;