@ccslabs/xtend 0.1.0-rc.1

package/components/xcalendar.js

@@ -0,0 +1,338 @@
+import { xstate } from './xstate.js';
+import './xicon.js';
+
+class XCalendar extends HTMLElement {
+  static formAssociated = true;
+
+  static get xtendComponentContract() {
+    return {
+      schema: 'xtend.component.contract.v2',
+      tag: 'x-calendar',
+      maturity: 'stable',
+      source: {
+        strategy: 'xtend.legacy-js-with-enterprise-profile.v1',
+        state: 'js-runtime-profiled',
+        sourcePath: 'components/xcalendar.js'
+      },
+      runtime: {
+        format: 'esm',
+        artifact: 'components/xcalendar.js',
+        declaration: 'components/xcalendar.d.ts',
+        localOnly: true,
+        cdnAllowed: false
+      },
+      rmt: {
+        adapter: 'xtend.component',
+        kernelBoundary: 'no-rmt-kernel-import-of-xtend-types'
+      },
+      fabric: {
+        api: '@xtend-fabric',
+        defaultLane: 'user-blocking'
+      }
+    };
+  }
+
+  static get xtendRmtMetadata() {
+    return {
+      schema: 'xtend.rmt.component-contract.v1',
+      adapter: 'xtend.component',
+      tag: 'x-calendar',
+      schedules: ['component.visible.mount', 'component.idle.hydrate', 'ui.user-blocking.input', 'a11y.announce', 'diagnostics.snapshot'],
+      hydration: { policy: 'visible', lane: 'user-blocking' },
+      kernelBoundary: 'no-rmt-kernel-import-of-xtend-types'
+    };
+  }
+
+  static get xtendScaffoldA11yProfile() {
+    return {
+      schema: 'xtend.a11y.profile.v1',
+      componentRef: 'x-calendar',
+      role: 'grid',
+      accessibleName: 'required',
+      focusStrategy: 'managed-grid-focus',
+      keyboard: ['Tab', 'Enter', 'ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'],
+      screenreader: { signals: ['date-select', 'month-change'] },
+      motionContrast: { reducedMotion: 'required', forcedColors: 'required' }
+    };
+  }
+
+  static get xtendScaffoldPerformanceProfile() {
+    return {
+      schema: 'xtend.performance.component-profile.v1',
+      componentRef: 'x-calendar',
+      budgetClass: 'interactive-medium',
+      lane: 'user-blocking',
+      hydrationPolicy: 'visible',
+      criticalMeasurements: ['mount', 'render', 'event'],
+      cleanup: ['xstate-subscription']
+    };
+  }
+
+  static get xtendFormControlUxProfile() {
+    return {
+      schema: 'xtend.component.form-control-ux-profile.v1',
+      componentRef: 'x-calendar',
+      family: 'date-entry',
+      role: 'grid',
+      valueMode: 'iso-date',
+      slots: ['label', 'hint', 'error'],
+      parts: ['root', 'control', 'label', 'helper', 'error'],
+      events: ['date-select'],
+      commands: ['focus', 'reset', 'set-value', 'snapshot'],
+      stateKey: 'xcalendar-state-<id>',
+      schedule: 'ui.user-blocking.input',
+      fabric: { lane: 'user-blocking', a11yLane: 'a11y' },
+      rmt: XCalendar.xtendRmtMetadata,
+      validation: { valueMode: 'iso-date', errorRegion: 'role=alert aria-live=assertive' }
+    };
+  }
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals?.();
+    this.attachShadow({ mode: 'open' });
+    this._selected = null;
+    this._viewDate = new Date();
+    this._unsubscribeState = null;
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-block;
+          font-family: sans-serif;
+        }
+        .calendar {
+          border: 1px solid var(--xtend-control-border, var(--border-color, #ccc));
+          border-radius: var(--xtend-control-radius, var(--border-radius, 6px));
+          padding: 1em;
+          width: 280px;
+          background: var(--xtend-control-bg, var(--background-color, #fff));
+          color: var(--xtend-control-color, var(--text-color, #000));
+        }
+        .header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 0.5em;
+        }
+        .header button {
+          background: none;
+          border: none;
+          cursor: pointer;
+          color: var(--text-color, #000);
+          inline-size: 2rem;
+          block-size: 2rem;
+          display: inline-grid;
+          place-items: center;
+          padding: 0;
+        }
+        .header button x-icon {
+          pointer-events: none;
+        }
+        .grid {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          gap: 0.25em;
+        }
+        .day, .dow {
+          text-align: center;
+          padding: 0.5em;
+        }
+        .dow {
+          font-weight: bold;
+          color: var(--text-muted, #666);
+        }
+        .day {
+          cursor: pointer;
+          border-radius: 4px;
+          background: var(--day-bg, transparent);
+          color: var(--text-color, #000);
+        }
+        .day:hover {
+          background: var(--hover-bg, #f0f0f0);
+        }
+        .selected {
+          background: var(--primary-color, #007bff);
+          color: var(--selected-text-color, #fff);
+        }
+        .today {
+          border: 1px solid var(--primary-color, #007bff);
+        }
+      </style>
+      <div class="calendar" role="grid">
+        <div class="header">
+          <button id="prev" part="previous control" aria-label="Previous Month">
+            <x-icon name="chevron-left" part="previous-icon control icon" decorative size="1rem"></x-icon>
+          </button>
+          <div id="monthLabel"></div>
+          <button id="next" part="next control" aria-label="Next Month">
+            <x-icon name="chevron-right" part="next-icon control icon" decorative size="1rem"></x-icon>
+          </button>
+        </div>
+        <div class="grid" id="days"></div>
+      </div>
+    `;
+
+    this._elements = {
+      monthLabel: this.shadowRoot.querySelector('#monthLabel'),
+      daysGrid: this.shadowRoot.querySelector('#days'),
+      prevBtn: this.shadowRoot.querySelector('#prev'),
+      nextBtn: this.shadowRoot.querySelector('#next'),
+    };
+
+    this._elements.prevBtn.addEventListener('click', () => {
+      this._viewDate.setMonth(this._viewDate.getMonth() - 1);
+      this._render();
+      this._updateState();
+    });
+
+    this._elements.nextBtn.addEventListener('click', () => {
+      this._viewDate.setMonth(this._viewDate.getMonth() + 1);
+      this._render();
+      this._updateState();
+    });
+  }
+
+  connectedCallback() {
+    // Eindeutige ID für State-Management
+    if (!this.id) this.id = `xcalendar-${Math.random().toString(36).slice(2, 10)}`;
+
+    this._render();
+
+    // Initialen State setzen
+    this._updateState();
+
+    // State-Änderungen abonnieren (z.B. externes Setzen von Datum oder Ansicht)
+    this._unsubscribeState = xstate.subscribe((key, value) => {
+      if (key === `xcalendar-state-${this.id}` && typeof value === "object" && value !== null) {
+        if (value.selected && value.selected !== this.value) {
+          this.value = value.selected;
+        }
+        if (value.viewDate && value.viewDate !== this._getViewDateString()) {
+          this._viewDate = new Date(value.viewDate);
+          this._render();
+        }
+      }
+    });
+  }
+
+  disconnectedCallback() {
+    if (this._unsubscribeState) this._unsubscribeState();
+  }
+
+  _render() {
+    const year = this._viewDate.getFullYear();
+    const month = this._viewDate.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    const startDay = firstDay.getDay();
+
+    const daysContainer = this._elements.daysGrid;
+    daysContainer.innerHTML = "";
+
+    const monthNames = [
+      'January', 'February', 'March', 'April', 'May', 'June',
+      'July', 'August', 'September', 'October', 'November', 'December'
+    ];
+
+    this._elements.monthLabel.textContent = `${monthNames[month]} ${year}`;
+
+    const dow = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+    for (const d of dow) {
+      const div = document.createElement('div');
+      div.className = 'dow';
+      div.textContent = d;
+      daysContainer.appendChild(div);
+    }
+
+    let start = (startDay + 6) % 7;
+    for (let i = 0; i < start; i++) {
+      daysContainer.appendChild(document.createElement('div'));
+    }
+
+    const today = new Date();
+    for (let d = 1; d <= lastDay.getDate(); d++) {
+      const date = new Date(year, month, d);
+      const dayEl = document.createElement('div');
+      dayEl.className = 'day';
+      dayEl.tabIndex = this._selected && date.toDateString() === this._selected.toDateString() ? 0 : -1;
+      dayEl.textContent = d;
+      dayEl.setAttribute("role", "gridcell");
+
+      if (date.toDateString() === today.toDateString()) {
+        dayEl.classList.add('today');
+      }
+
+      if (this._selected && date.toDateString() === this._selected.toDateString()) {
+        dayEl.classList.add('selected');
+        dayEl.setAttribute("aria-selected", "true");
+      } else {
+        dayEl.setAttribute("aria-selected", "false");
+      }
+
+      dayEl.addEventListener('click', () => {
+        this._selected = date;
+        this._internals?.setFormValue(date.toISOString().split("T")[0]);
+        this._render();
+        this._updateState();
+        this.dispatchEvent(new CustomEvent("date-select", {
+          detail: { value: this.value, date, source: "x-calendar" },
+          bubbles: true,
+          composed: true
+        }));
+      });
+
+      daysContainer.appendChild(dayEl);
+    }
+  }
+
+  _updateState() {
+    if (this.id) {
+      xstate.set(`xcalendar-state-${this.id}`, {
+        selected: this.value,
+        viewDate: this._getViewDateString()
+      });
+    }
+  }
+
+  _getViewDateString() {
+    return this._viewDate.toISOString().split("T")[0];
+  }
+
+  get value() {
+    return this._selected?.toISOString().split("T")[0] || "";
+  }
+
+  set value(dateStr) {
+    const d = new Date(dateStr);
+    if (!isNaN(d)) {
+      this._selected = d;
+      this._viewDate = new Date(d);
+      this._render();
+      this._updateState();
+    }
+  }
+
+  checkValidity() {
+    return true;
+  }
+
+  reportValidity() {
+    return this.checkValidity();
+  }
+
+  reset() {
+    this._selected = null;
+    this._internals?.setFormValue("");
+    this._render();
+    this._updateState();
+  }
+
+  focus() {
+    const selected = this.shadowRoot.querySelector('.day[aria-selected="true"]');
+    const firstDay = this.shadowRoot.querySelector('.day');
+    (selected || firstDay || this._elements.prevBtn).focus();
+  }
+}
+
+customElements.define("x-calendar", XCalendar);

package/components/xcards.d.ts

@@ -0,0 +1,34 @@
+import type { XtendCustomEventMap, XtendLayoutDisplayMediaUxProfile, XtendPublicEventContract } from './xtend-public-types';
+
+export type XCardsAttributeName = 'columns' | 'gap';
+export type XCardsEventName = 'cards-layout';
+export type XCardsLayoutDisplayMediaUxProfile = XtendLayoutDisplayMediaUxProfile<'x-cards'>;
+
+export interface XCardsSnapshot {
+  schema: 'xtend.component.layout-display-media-snapshot.v1';
+  componentRef: 'x-cards';
+  stateKey: string;
+  schedule: 'layout.reflow.commit';
+  columns: string;
+  gap: string;
+}
+
+export interface XCardsEventDetailMap {
+  'cards-layout': XCardsSnapshot;
+}
+
+export type XCardsEventMap = XtendCustomEventMap<XCardsEventDetailMap>;
+export type XCardsPublicEventContract = XtendPublicEventContract<XCardsEventName, XCardsSnapshot>;
+
+export interface XCardsElement extends HTMLElement {
+  snapshot(): XCardsSnapshot;
+  addEventListener<K extends keyof XCardsEventMap>(type: K, listener: (event: XCardsEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'x-cards': XCardsElement;
+  }
+}
+
+export {};

package/components/xcards.js

@@ -0,0 +1,253 @@
+import { xstate } from './xstate.js';
+
+class XCards extends HTMLElement {
+  static get observedAttributes() {
+    return ["columns", "gap"];
+  }
+
+  static get xtendComponentContract() {
+    return {
+      schema: "xtend.component.contract.v2",
+      tag: "x-cards",
+      profiles: ["display"],
+      maturity: "ux-ready"
+    };
+  }
+
+  static get xtendRmtMetadata() {
+    return {
+      schema: "xtend.rmt.component-contract.v1",
+      adapter: "xtend.component",
+      schedule: "layout.reflow.commit",
+      kernelBoundary: "no-rmt-kernel-import-of-xtend-types"
+    };
+  }
+
+  static get xtendScaffoldA11yProfile() {
+    return {
+      schema: "xtend.a11y.screenreader-signals.v1",
+      role: "list",
+      accessibleName: "Cards grid",
+      focusStrategy: "slotted-card-focus"
+    };
+  }
+
+  static get xtendScaffoldPerformanceProfile() {
+    return {
+      schema: "xtend.performance.component-profile.v1",
+      performanceProfile: "display",
+      budgetClass: "display-layout",
+      lane: "visible",
+      hydrationPolicy: "visible",
+      criticalMeasurements: ["xtend.layout.measure", "xtend.layout.reflow"],
+      idleOrBackgroundAllowed: true
+    };
+  }
+
+  static get xtendLayoutDisplayMediaUxProfile() {
+    return {
+      schema: "xtend.component.layout-display-media-ux-profile.v1",
+      componentRef: "x-cards",
+      family: "layout-cards",
+      role: "list",
+      contentKind: "card-grid",
+      responsiveStrategy: "auto-collapse-grid",
+      lazyPolicy: "visible-hydrate",
+      overflowPolicy: "no-page-overflow",
+      aspectRatio: "card-content-driven",
+      signatureDesign: {
+        note: "Distinct enterprise card rhythm with tokenized glass, border, spacing and elevation instead of a generic SaaS card grid.",
+        tokenStrategy: "layout tokens feed grid width, gap, card surface, text, radius, typography, media radius, focus and hover elevation.",
+        themeExpectation: "external themes can flatten, sharpen, densify or rebrand the cards without component code changes."
+      },
+      events: ["cards-layout"],
+      commands: ["render", "measure", "layout", "snapshot"],
+      stateKey: "xcards-state-<id>",
+      schedule: "layout.reflow.commit",
+      fabric: { lane: "visible", diagnosticsLane: "diagnostics", api: "@xtend-fabric" },
+      rmt: { adapter: "xtend.component", kernelBoundary: "no-rmt-kernel-import-of-xtend-types" }
+    };
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._unsubscribeState = null;
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          --card-columns: 3;
+          --card-gap: var(--xtend-layout-gap, 2.2rem);
+          --card-max-width: var(--xtend-layout-content-max, 1200px);
+          --xtend-layout-grid-min: minmax(min(100%, 16rem), 1fr);
+          /* margin und width entfernt, damit kein Overflow entsteht */
+        }
+        .grid {
+          display: grid;
+          grid-template-columns: repeat(var(--card-columns), minmax(0, 1fr));
+          gap: var(--card-gap);
+          max-width: var(--card-max-width);
+          width: 100%;
+          margin: 0 auto;
+          box-sizing: border-box;
+          min-width: 0;
+          overflow-wrap: anywhere;
+        }
+        @media (max-width: 1024px) {
+          .grid { grid-template-columns: repeat(2, 1fr); }
+        }
+        @media (max-width: 768px) {
+          .grid {
+            grid-template-columns: 1fr;
+            max-width: 100vw;
+            padding-left: 0.5rem;
+            padding-right: 0.5rem;
+          }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .grid { scroll-behavior: auto; }
+        }
+        @media (forced-colors: active) {
+          .grid { border: 1px solid CanvasText; }
+        }
+      </style>
+      <div class="grid" part="root grid" role="list">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  connectedCallback() {
+    // Eindeutige ID für State-Management
+    if (!this.id) this.id = `xcards-${Math.random().toString(36).slice(2, 10)}`;
+
+    // Initialen State setzen
+    xstate.set(`xcards-state-${this.id}`, {
+      columns: this.getAttribute("columns") || "3",
+      gap: this.getAttribute("gap") || "1.5rem"
+    });
+
+    // State-Änderungen abonnieren (z.B. externes Setzen von columns/gap)
+    this._unsubscribeState = xstate.subscribe((key, value) => {
+      if (key === `xcards-state-${this.id}` && typeof value === "object") {
+        if (typeof value.columns === "string" && value.columns !== this.getAttribute("columns")) {
+          this.setAttribute("columns", value.columns);
+        }
+        if (typeof value.gap === "string" && value.gap !== this.getAttribute("gap")) {
+          this.setAttribute("gap", value.gap);
+        }
+      }
+    });
+
+    this.dispatchEvent(new CustomEvent("cards-layout", {
+      detail: this.snapshot(),
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  disconnectedCallback() {
+    if (this._unsubscribeState) this._unsubscribeState();
+  }
+
+  attributeChangedCallback(name, _, newValue) {
+    if (name === "columns") {
+      this.style.setProperty("--card-columns", newValue);
+    }
+    if (name === "gap") {
+      this.style.setProperty("--card-gap", newValue);
+    }
+    // State aktualisieren
+    if (this.id) {
+      xstate.set(`xcards-state-${this.id}`, {
+        columns: this.getAttribute("columns") || "3",
+        gap: this.getAttribute("gap") || "1.5rem"
+      });
+    }
+  }
+
+  snapshot() {
+    return {
+      schema: "xtend.component.layout-display-media-snapshot.v1",
+      componentRef: "x-cards",
+      stateKey: `xcards-state-${this.id}`,
+      schedule: "layout.reflow.commit",
+      columns: this.getAttribute("columns") || "3",
+      gap: this.getAttribute("gap") || "1.5rem"
+    };
+  }
+}
+
+customElements.define("x-cards", XCards);
+
+class XCard extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          background: var(--card-bg, var(--xtend-layout-surface, rgba(40,60,120,0.18)));
+          border: var(--card-border, 1px solid var(--xtend-layout-border-color, rgba(255,255,255,0.14)));
+          border-radius: var(--card-radius, var(--xtend-layout-radius, 1.2em));
+          box-shadow: var(--card-shadow, var(--xtend-layout-elevation, 0 4px 24px 0 rgba(40,60,120,0.10), 0 1.5px 6px 0 rgba(40,60,120,0.08)));
+          backdrop-filter: var(--card-backdrop-filter, blur(14px));
+          padding: var(--card-padding, var(--xtend-layout-spacing, 2.2rem 2rem 2rem 2rem));
+          transition: box-shadow 0.22s, transform 0.22s, background 0.22s;
+          color: var(--card-fg, var(--xtend-layout-text, #fff));
+          font-family: var(--card-font-family, var(--xtend-layout-font-family, inherit));
+          font-size: var(--card-text-font-size, var(--xtend-layout-font-size, 1rem));
+          overflow: hidden;
+          min-width: 0;
+          overflow-wrap: anywhere;
+        }
+        :host(:hover), :host(:focus-within) {
+          box-shadow: var(--card-hover-shadow, var(--xtend-layout-elevation-hover, 0 8px 32px 0 rgba(31,38,135,0.18)));
+          background: var(--card-hover-bg, rgba(79,195,247,0.13));
+          transform: translateY(-6px) scale(1.012);
+        }
+        :host(:focus-within) {
+          outline: var(--xtend-layout-focus-ring, 2.5px solid var(--xtend-color-primary, #4fc3f7));
+          outline-offset: 2px;
+        }
+        ::slotted(h3) {
+          margin-top: 0;
+          font-size: var(--card-title-font-size, var(--xtend-layout-heading-font-size, 1.35rem));
+          color: var(--card-title-color, var(--card-fg, var(--xtend-layout-text, #fff)));
+          letter-spacing: 0;
+          overflow-wrap: anywhere;
+        }
+        ::slotted(p) {
+          font-size: var(--card-text-font-size, var(--xtend-layout-font-size, 1.05rem));
+          color: var(--card-text-color, var(--xtend-layout-muted-text, #e3e9f0));
+          overflow-wrap: anywhere;
+        }
+        ::slotted(a), ::slotted(button) {
+          margin-top: 1.2em;
+        }
+        ::slotted(img),
+        ::slotted(video) {
+          border-radius: var(--card-media-radius, var(--xtend-layout-media-radius, var(--card-radius, 1.2em)));
+          max-width: 100%;
+        }
+        @media (prefers-reduced-motion: reduce) {
+          :host { transition: none !important; }
+        }
+        @media (forced-colors: active) {
+          :host {
+            border: 1px solid CanvasText;
+            box-shadow: none;
+            forced-color-adjust: auto;
+          }
+        }
+      </style>
+      <div part="item" role="listitem" tabindex="0">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define("x-card", XCard);

package/components/xcheckbox.d.ts

@@ -0,0 +1,48 @@
+import type { XtendCustomEventMap, XtendFormControlUxProfile, XtendPublicEventContract } from './xtend-public-types';
+
+export type XCheckboxAttributeName = 'name' | 'value' | 'checked' | 'disabled' | 'required' | 'indeterminate' | 'label';
+export type XCheckboxEventName = 'checkbox-changed' | 'checkbox-invalid';
+
+export interface XCheckboxChangedEventDetail {
+  checked: boolean;
+  value: string;
+  source: 'x-checkbox';
+}
+
+export interface XCheckboxInvalidEventDetail {
+  checked: boolean;
+  value: string;
+  message: string;
+  source?: 'x-checkbox';
+}
+
+export interface XCheckboxEventDetailMap {
+  'checkbox-changed': XCheckboxChangedEventDetail;
+  'checkbox-invalid': XCheckboxInvalidEventDetail;
+}
+
+export type XCheckboxEventDetail = XCheckboxChangedEventDetail | XCheckboxInvalidEventDetail;
+export type XCheckboxEventMap = XtendCustomEventMap<XCheckboxEventDetailMap>;
+export type XCheckboxFormControlUxProfile = XtendFormControlUxProfile<'x-checkbox'>;
+export type XCheckboxPublicEventContract = XtendPublicEventContract<XCheckboxEventName, XCheckboxEventDetail>;
+
+export interface XCheckboxElement extends HTMLElement {
+  checked: boolean;
+  value: string;
+  indeterminate: boolean;
+  checkValidity(): boolean;
+  reportValidity(): boolean;
+  validate(): boolean;
+  toggle(): void;
+  reset(): void;
+  focus(): void;
+  addEventListener<K extends keyof XCheckboxEventMap>(type: K, listener: (event: XCheckboxEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'x-checkbox': XCheckboxElement;
+  }
+}
+
+export {};