@visitwonders/assembly 0.1.0

package/dist/status/badge.css

@@ -0,0 +1,218 @@
+/* ===================================
+ * Badge Component
+ * =================================== */
+
+.badge {
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-1);
+
+  /* Typography */
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+
+  /* Shape */
+  border-radius: var(--radius-md);
+
+  /* Transitions */
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+/* ===================================
+ * Sizes
+ * =================================== */
+
+.badge[data-size="sm"] {
+  height: 20px;
+  padding: 0 var(--spacing-2);
+  font-size: var(--font-size-xs);
+}
+
+.badge[data-size="md"] {
+  height: 24px;
+  padding: 0 var(--spacing-2-5);
+  font-size: var(--font-size-sm);
+}
+
+/* Count mode - pill shape */
+.badge[data-count="true"] {
+  border-radius: var(--radius-full);
+  min-width: 20px;
+}
+
+.badge[data-count="true"][data-size="sm"] {
+  min-width: 18px;
+  padding: 0 var(--spacing-1-5);
+}
+
+.badge[data-count="true"][data-size="md"] {
+  min-width: 22px;
+  padding: 0 var(--spacing-2);
+}
+
+/* ===================================
+ * Dot Indicator
+ * =================================== */
+
+.badge[data-dot="true"]::before {
+  content: "";
+  display: block;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background-color: currentColor;
+  flex-shrink: 0;
+}
+
+.badge[data-dot="true"][data-size="sm"]::before {
+  width: 5px;
+  height: 5px;
+}
+
+/* ===================================
+ * Default Variant (Solid)
+ * =================================== */
+
+/* Neutral */
+.badge[data-variant="default"][data-tone="neutral"] {
+  background: var(--color-bg-fill-neutral);
+  color: var(--color-text-on-neutral);
+}
+
+/* Primary */
+.badge[data-variant="default"][data-tone="primary"] {
+  background: var(--color-bg-fill-primary);
+  color: var(--color-text-on-primary);
+}
+
+/* Success */
+.badge[data-variant="default"][data-tone="success"] {
+  background: var(--color-bg-fill-success);
+  color: var(--color-text-on-success);
+}
+
+/* Warning */
+.badge[data-variant="default"][data-tone="warning"] {
+  background: var(--color-bg-fill-warning);
+  color: var(--color-text-on-warning);
+}
+
+/* Critical */
+.badge[data-variant="default"][data-tone="critical"] {
+  background: var(--color-bg-fill-critical);
+  color: var(--color-text-on-critical);
+}
+
+/* Info */
+.badge[data-variant="default"][data-tone="info"] {
+  background: var(--color-bg-fill-info);
+  color: var(--color-text-on-info);
+}
+
+/* ===================================
+ * Subtle Variant
+ * =================================== */
+
+/* Neutral */
+.badge[data-variant="subtle"][data-tone="neutral"] {
+  background: var(--color-bg-neutral-subtle);
+  color: var(--color-text);
+}
+
+/* Primary */
+.badge[data-variant="subtle"][data-tone="primary"] {
+  background: var(--color-bg-primary-subtle);
+  color: var(--color-text-primary);
+}
+
+/* Success */
+.badge[data-variant="subtle"][data-tone="success"] {
+  background: var(--color-bg-success-subtle);
+  color: var(--color-text-success);
+}
+
+/* Warning */
+.badge[data-variant="subtle"][data-tone="warning"] {
+  background: var(--color-bg-warning-subtle);
+  color: var(--color-text-warning);
+}
+
+/* Critical */
+.badge[data-variant="subtle"][data-tone="critical"] {
+  background: var(--color-bg-critical-subtle);
+  color: var(--color-text-critical);
+}
+
+/* Info */
+.badge[data-variant="subtle"][data-tone="info"] {
+  background: var(--color-bg-info-subtle);
+  color: var(--color-text-info);
+}
+
+/* ===================================
+ * Outline Variant
+ * =================================== */
+
+/* Neutral */
+.badge[data-variant="outline"][data-tone="neutral"] {
+  background: transparent;
+  border: 1px solid var(--color-border-neutral);
+  color: var(--color-text);
+}
+
+/* Primary */
+.badge[data-variant="outline"][data-tone="primary"] {
+  background: transparent;
+  border: 1px solid var(--color-border-primary);
+  color: var(--color-text-primary);
+}
+
+/* Success */
+.badge[data-variant="outline"][data-tone="success"] {
+  background: transparent;
+  border: 1px solid var(--color-border-success);
+  color: var(--color-text-success);
+}
+
+/* Warning */
+.badge[data-variant="outline"][data-tone="warning"] {
+  background: transparent;
+  border: 1px solid var(--color-border-warning);
+  color: var(--color-text-warning);
+}
+
+/* Critical */
+.badge[data-variant="outline"][data-tone="critical"] {
+  background: transparent;
+  border: 1px solid var(--color-border-critical);
+  color: var(--color-text-critical);
+}
+
+/* Info */
+.badge[data-variant="outline"][data-tone="info"] {
+  background: transparent;
+  border: 1px solid var(--color-border-info);
+  color: var(--color-text-info);
+}
+
+/* ===================================
+ * Inner Elements
+ * =================================== */
+
+.badge-prefix,
+.badge-suffix {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.badge-content {
+  flex: 1 1 auto;
+  text-align: center;
+}

package/dist/status/badge.js

@@ -0,0 +1,38 @@
+import "./badge.css"
+import Component from '@glimmer/component';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+;
+
+class Badge extends Component {
+  get tone() {
+    return this.args.tone ?? 'neutral';
+  }
+  get variant() {
+    return this.args.variant ?? 'default';
+  }
+  get size() {
+    return this.args.size ?? 'md';
+  }
+  get max() {
+    return this.args.max ?? 99;
+  }
+  get isCountMode() {
+    return this.args.count !== undefined;
+  }
+  get displayCount() {
+    const count = this.args.count;
+    if (count === undefined) return '';
+    if (count > this.max) return `${this.max}+`;
+    return String(count);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<span class=\"badge\" aria-label={{@aria-label}} data-tone={{this.tone}} data-variant={{this.variant}} data-size={{this.size}} data-dot={{if @dot \"true\"}} data-count={{if this.isCountMode \"true\"}} data-test-badge ...attributes>\n  {{#if (has-block \"prefix\")}}\n    <span class=\"badge-prefix\" data-test-badge-prefix>\n      {{yield to=\"prefix\"}}\n    </span>\n  {{/if}}\n  <span class=\"badge-content\">\n    {{#if this.isCountMode}}\n      {{this.displayCount}}\n    {{else}}\n      {{yield}}\n    {{/if}}\n  </span>\n  {{#if (has-block \"suffix\")}}\n    <span class=\"badge-suffix\" data-test-badge-suffix>\n      {{yield to=\"suffix\"}}\n    </span>\n  {{/if}}\n</span>", {
+      strictMode: true
+    }), this);
+  }
+}
+
+export { Badge as default };
+//# sourceMappingURL=badge.js.map

package/dist/status/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/status/index.js

@@ -0,0 +1,8 @@
+export { default as Badge } from './badge.js';
+export { default as Tag } from './tag.js';
+export { default as Skeleton } from './skeleton.js';
+export { default as SkeletonText } from './skeleton-text.js';
+export { default as SkeletonAvatar } from './skeleton-avatar.js';
+export { default as SkeletonButton } from './skeleton-button.js';
+export { default as SkeletonImage } from './skeleton-image.js';
+//# sourceMappingURL=index.js.map

package/dist/status/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/status/skeleton-avatar.js

@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import '../skeleton-CL5Pcwrk.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+class SkeletonAvatar extends Component {
+  get size() {
+    return this.args.size ?? 'md';
+  }
+  get animation() {
+    return this.args.animation ?? 'wave';
+  }
+  get hasCustomSize() {
+    return this.args.customSize !== undefined;
+  }
+  get style() {
+    if (!this.hasCustomSize) return undefined;
+    const size = `${this.args.customSize}px`;
+    return `width: ${size}; height: ${size}`;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"skeleton skeleton-avatar\" role=\"presentation\" aria-hidden=\"true\" data-variant=\"circular\" data-animation={{this.animation}} data-size={{unless this.hasCustomSize this.size}} style={{this.style}} data-test-skeleton-avatar ...attributes></div>", {
+      strictMode: true
+    }), this);
+  }
+}
+
+export { SkeletonAvatar as default };
+//# sourceMappingURL=skeleton-avatar.js.map

package/dist/status/skeleton-avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-avatar.js","sources":["../../src/status/skeleton-avatar.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport type { SkeletonAnimation } from './skeleton.gts';\nimport './skeleton.css';\n\nexport type SkeletonAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface SkeletonAvatarSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Avatar size */\n    size?: SkeletonAvatarSize;\n\n    /** Custom size in pixels (overrides size prop) */\n    customSize?: number;\n\n    /** Animation style */\n    animation?: SkeletonAnimation;\n  };\n}\n\nexport default class SkeletonAvatar extends Component<SkeletonAvatarSignature> {\n  get size(): SkeletonAvatarSize {\n    return this.args.size ?? 'md';\n  }\n\n  get animation(): SkeletonAnimation {\n    return this.args.animation ?? 'wave';\n  }\n\n  get hasCustomSize(): boolean {\n    return this.args.customSize !== undefined;\n  }\n\n  get style(): string | undefined {\n    if (!this.hasCustomSize) return undefined;\n    const size = `${this.args.customSize}px`;\n    return `width: ${size}; height: ${size}`;\n  }\n\n  <template>\n    <div\n      class=\"skeleton skeleton-avatar\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      data-variant=\"circular\"\n      data-animation={{this.animation}}\n      data-size={{unless this.hasCustomSize this.size}}\n      style={{this.style}}\n      data-test-skeleton-avatar\n      ...attributes\n    ></div>\n  </template>\n}\n"],"names":["SkeletonAvatar","Component","size","args","animation","hasCustomSize","customSize","undefined","style","setComponentTemplate","precompileTemplate","strictMode"],"mappings":";;;;;AAoBe,MAAMA,uBAAuBC,SAAA,CAAU;EACpD,IAAIC,OAA2B;AAC7B,IAAA,OAAO,IAAI,CAACC,IAAI,CAACD,IAAI,IAAI,IAAA;AAC3B,EAAA;EAEA,IAAIE,YAA+B;AACjC,IAAA,OAAO,IAAI,CAACD,IAAI,CAACC,SAAS,IAAI,MAAA;AAChC,EAAA;EAEA,IAAIC,aAAAA,GAAyB;AAC3B,IAAA,OAAO,IAAI,CAACF,IAAI,CAACG,UAAU,KAAKC,SAAA;AAClC,EAAA;EAEA,IAAIC,KAAAA,GAA4B;AAC9B,IAAA,IAAI,CAAC,IAAI,CAACH,aAAa,EAAE,OAAOE,SAAA;IAChC,MAAML,IAAA,GAAO,CAAA,EAAG,IAAI,CAACC,IAAI,CAACG,UAAU,CAAA,EAAA,CAAI;AACxC,IAAA,OAAO,CAAA,OAAA,EAAUJ,iBAAiBA,MAAM;AAC1C,EAAA;AAEA,EAAA;IAAAO,oBAAA,CAAAC,kBAAA,CAAA,sQAAA,EAYA;MAAAC,UAAA,EAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}

package/dist/status/skeleton-button.js

@@ -0,0 +1,25 @@
+import Component from '@glimmer/component';
+import '../skeleton-CL5Pcwrk.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+class SkeletonButton extends Component {
+  get size() {
+    return this.args.size ?? 'md';
+  }
+  get animation() {
+    return this.args.animation ?? 'wave';
+  }
+  get style() {
+    if (!this.args.width) return undefined;
+    return `width: ${this.args.width}`;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"skeleton skeleton-button\" role=\"presentation\" aria-hidden=\"true\" data-variant=\"rectangular\" data-animation={{this.animation}} data-size={{this.size}} style={{this.style}} data-test-skeleton-button ...attributes></div>", {
+      strictMode: true
+    }), this);
+  }
+}
+
+export { SkeletonButton as default };
+//# sourceMappingURL=skeleton-button.js.map

package/dist/status/skeleton-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-button.js","sources":["../../src/status/skeleton-button.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport type { SkeletonAnimation } from './skeleton.gts';\nimport './skeleton.css';\n\nexport type SkeletonButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface SkeletonButtonSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Button size (matches Button component sizes) */\n    size?: SkeletonButtonSize;\n\n    /** Custom width (CSS value) */\n    width?: string;\n\n    /** Animation style */\n    animation?: SkeletonAnimation;\n  };\n}\n\nexport default class SkeletonButton extends Component<SkeletonButtonSignature> {\n  get size(): SkeletonButtonSize {\n    return this.args.size ?? 'md';\n  }\n\n  get animation(): SkeletonAnimation {\n    return this.args.animation ?? 'wave';\n  }\n\n  get style(): string | undefined {\n    if (!this.args.width) return undefined;\n    return `width: ${this.args.width}`;\n  }\n\n  <template>\n    <div\n      class=\"skeleton skeleton-button\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      data-variant=\"rectangular\"\n      data-animation={{this.animation}}\n      data-size={{this.size}}\n      style={{this.style}}\n      data-test-skeleton-button\n      ...attributes\n    ></div>\n  </template>\n}\n"],"names":["SkeletonButton","Component","size","args","animation","style","width","undefined","setComponentTemplate","precompileTemplate","strictMode"],"mappings":";;;;;AAoBe,MAAMA,uBAAuBC,SAAA,CAAU;EACpD,IAAIC,OAA2B;AAC7B,IAAA,OAAO,IAAI,CAACC,IAAI,CAACD,IAAI,IAAI,IAAA;AAC3B,EAAA;EAEA,IAAIE,YAA+B;AACjC,IAAA,OAAO,IAAI,CAACD,IAAI,CAACC,SAAS,IAAI,MAAA;AAChC,EAAA;EAEA,IAAIC,KAAAA,GAA4B;IAC9B,IAAI,CAAC,IAAI,CAACF,IAAI,CAACG,KAAK,EAAE,OAAOC,SAAA;AAC7B,IAAA,OAAO,UAAU,IAAI,CAACJ,IAAI,CAACG,KAAK,CAAA,CAAE;AACpC,EAAA;AAEA,EAAA;IAAAE,oBAAA,CAAAC,kBAAA,CAAA,+OAAA,EAYA;MAAAC,UAAA,EAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}

package/dist/status/skeleton-image.js

@@ -0,0 +1,31 @@
+import Component from '@glimmer/component';
+import '../skeleton-CL5Pcwrk.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+class SkeletonImage extends Component {
+  get animation() {
+    return this.args.animation ?? 'wave';
+  }
+  get style() {
+    const styles = [];
+    if (this.args.width) {
+      styles.push(`width: ${this.args.width}`);
+    }
+    if (this.args.height) {
+      styles.push(`height: ${this.args.height}`);
+    }
+    if (this.args.aspectRatio) {
+      styles.push(`aspect-ratio: ${this.args.aspectRatio}`);
+    }
+    return styles.join('; ');
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"skeleton skeleton-image\" role=\"presentation\" aria-hidden=\"true\" data-variant=\"rectangular\" data-animation={{this.animation}} style={{this.style}} data-test-skeleton-image ...attributes></div>", {
+      strictMode: true
+    }), this);
+  }
+}
+
+export { SkeletonImage as default };
+//# sourceMappingURL=skeleton-image.js.map

package/dist/status/skeleton-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-image.js","sources":["../../src/status/skeleton-image.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport type { SkeletonAnimation } from './skeleton.gts';\nimport './skeleton.css';\n\nexport interface SkeletonImageSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Width of the image skeleton (CSS value) */\n    width?: string;\n\n    /** Height of the image skeleton (CSS value) */\n    height?: string;\n\n    /** Aspect ratio (e.g., \"16/9\", \"4/3\", \"1/1\") */\n    aspectRatio?: string;\n\n    /** Animation style */\n    animation?: SkeletonAnimation;\n  };\n}\n\nexport default class SkeletonImage extends Component<SkeletonImageSignature> {\n  get animation(): SkeletonAnimation {\n    return this.args.animation ?? 'wave';\n  }\n\n  get style(): string {\n    const styles: string[] = [];\n\n    if (this.args.width) {\n      styles.push(`width: ${this.args.width}`);\n    }\n\n    if (this.args.height) {\n      styles.push(`height: ${this.args.height}`);\n    }\n\n    if (this.args.aspectRatio) {\n      styles.push(`aspect-ratio: ${this.args.aspectRatio}`);\n    }\n\n    return styles.join('; ');\n  }\n\n  <template>\n    <div\n      class=\"skeleton skeleton-image\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      data-variant=\"rectangular\"\n      data-animation={{this.animation}}\n      style={{this.style}}\n      data-test-skeleton-image\n      ...attributes\n    ></div>\n  </template>\n}\n"],"names":["SkeletonImage","Component","animation","args","style","styles","width","push","height","aspectRatio","join","setComponentTemplate","precompileTemplate","strictMode"],"mappings":";;;;;AAqBe,MAAMA,sBAAsBC,SAAA,CAAU;EACnD,IAAIC,YAA+B;AACjC,IAAA,OAAO,IAAI,CAACC,IAAI,CAACD,SAAS,IAAI,MAAA;AAChC,EAAA;EAEA,IAAIE,KAAAA,GAAgB;IAClB,MAAMC,MAAc,GAAK,EAAE;AAE3B,IAAA,IAAI,IAAI,CAACF,IAAI,CAACG,KAAK,EAAE;MACnBD,MAAA,CAAOE,IAAI,CAAC,CAAA,OAAA,EAAU,IAAI,CAACJ,IAAI,CAACG,KAAK,CAAA,CAAE,CAAA;AACzC,IAAA;AAEA,IAAA,IAAI,IAAI,CAACH,IAAI,CAACK,MAAM,EAAE;MACpBH,MAAA,CAAOE,IAAI,CAAC,CAAA,QAAA,EAAW,IAAI,CAACJ,IAAI,CAACK,MAAM,CAAA,CAAE,CAAA;AAC3C,IAAA;AAEA,IAAA,IAAI,IAAI,CAACL,IAAI,CAACM,WAAW,EAAE;MACzBJ,MAAA,CAAOE,IAAI,CAAC,CAAA,cAAA,EAAiB,IAAI,CAACJ,IAAI,CAACM,WAAW,CAAA,CAAE,CAAA;AACtD,IAAA;AAEA,IAAA,OAAOJ,MAAA,CAAOK,IAAI,CAAC,IAAA,CAAA;AACrB,EAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,qNAAA,EAWA;MAAAC,UAAA,EAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}

package/dist/status/skeleton-text.js

@@ -0,0 +1,41 @@
+import Component from '@glimmer/component';
+import Skeleton from './skeleton.js';
+import '../skeleton-CL5Pcwrk.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+class SkeletonText extends Component {
+  get lines() {
+    return this.args.lines ?? 3;
+  }
+  get gap() {
+    return this.args.gap ?? 'var(--spacing-2)';
+  }
+  get animation() {
+    return this.args.animation ?? 'wave';
+  }
+  get lineNumbers() {
+    return Array.from({
+      length: this.lines
+    }, (_, i) => i);
+  }
+  get style() {
+    const styles = [];
+    styles.push(`gap: ${this.gap}`);
+    if (this.args.lastLineWidth) {
+      styles.push(`--skeleton-text-last-width: ${this.args.lastLineWidth}`);
+    }
+    return styles.join('; ');
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"skeleton-text\" role=\"presentation\" aria-hidden=\"true\" style={{this.style}} data-test-skeleton-text ...attributes>\n  {{#each this.lineNumbers as |index|}}\n    <Skeleton @variant=\"text\" @animation={{this.animation}} data-line={{index}} />\n  {{/each}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        Skeleton
+      })
+    }), this);
+  }
+}
+
+export { SkeletonText as default };
+//# sourceMappingURL=skeleton-text.js.map

package/dist/status/skeleton-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-text.js","sources":["../../src/status/skeleton-text.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport Skeleton from './skeleton.gts';\nimport type { SkeletonAnimation } from './skeleton.gts';\nimport './skeleton.css';\n\nexport interface SkeletonTextSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Number of text lines to render */\n    lines?: number;\n\n    /** Gap between lines (CSS value) */\n    gap?: string;\n\n    /** Width of the last line (CSS value or percentage) */\n    lastLineWidth?: string;\n\n    /** Animation style */\n    animation?: SkeletonAnimation;\n  };\n}\n\nexport default class SkeletonText extends Component<SkeletonTextSignature> {\n  get lines(): number {\n    return this.args.lines ?? 3;\n  }\n\n  get gap(): string {\n    return this.args.gap ?? 'var(--spacing-2)';\n  }\n\n  get animation(): SkeletonAnimation {\n    return this.args.animation ?? 'wave';\n  }\n\n  get lineNumbers(): number[] {\n    return Array.from({ length: this.lines }, (_, i) => i);\n  }\n\n  get style(): string {\n    const styles: string[] = [];\n\n    styles.push(`gap: ${this.gap}`);\n\n    if (this.args.lastLineWidth) {\n      styles.push(`--skeleton-text-last-width: ${this.args.lastLineWidth}`);\n    }\n\n    return styles.join('; ');\n  }\n\n  <template>\n    <div\n      class=\"skeleton-text\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      style={{this.style}}\n      data-test-skeleton-text\n      ...attributes\n    >\n      {{#each this.lineNumbers as |index|}}\n        <Skeleton\n          @variant=\"text\"\n          @animation={{this.animation}}\n          data-line={{index}}\n        />\n      {{/each}}\n    </div>\n  </template>\n}\n"],"names":["SkeletonText","Component","lines","args","gap","animation","lineNumbers","Array","from","length","_","i","style","styles","push","lastLineWidth","join","setComponentTemplate","precompileTemplate","strictMode","scope","Skeleton"],"mappings":";;;;;;AAsBe,MAAMA,qBAAqBC,SAAA,CAAU;EAClD,IAAIC,KAAAA,GAAgB;AAClB,IAAA,OAAO,IAAI,CAACC,IAAI,CAACD,KAAK,IAAI,CAAA;AAC5B,EAAA;EAEA,IAAIE,GAAAA,GAAc;AAChB,IAAA,OAAO,IAAI,CAACD,IAAI,CAACC,GAAG,IAAI,kBAAA;AAC1B,EAAA;EAEA,IAAIC,YAA+B;AACjC,IAAA,OAAO,IAAI,CAACF,IAAI,CAACE,SAAS,IAAI,MAAA;AAChC,EAAA;EAEA,IAAIC,WAAAA,GAAwB;IAC1B,OAAOC,KAAA,CAAMC,IAAI,CAAC;MAAEC,MAAA,EAAQ,IAAI,CAACP;AAAM,KAAA,EAAG,CAACQ,GAAGC,CAAA,KAAMA,CAAA,CAAA;AACtD,EAAA;EAEA,IAAIC,KAAAA,GAAgB;IAClB,MAAMC,MAAc,GAAK,EAAE;IAE3BA,MAAA,CAAOC,IAAI,CAAC,CAAA,KAAA,EAAQ,IAAI,CAACV,GAAG,EAAE,CAAA;AAE9B,IAAA,IAAI,IAAI,CAACD,IAAI,CAACY,aAAa,EAAE;MAC3BF,MAAA,CAAOC,IAAI,CAAC,CAAA,4BAAA,EAA+B,IAAI,CAACX,IAAI,CAACY,aAAa,CAAA,CAAE,CAAA;AACtE,IAAA;AAEA,IAAA,OAAOF,MAAA,CAAOG,IAAI,CAAC,IAAA,CAAA;AACrB,EAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,yRAAA,EAiBA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}

package/dist/status/skeleton.css

@@ -0,0 +1,185 @@
+/* ===================================
+ * Skeleton Component
+ * =================================== */
+
+.skeleton {
+  /* Layout */
+  display: block;
+
+  /* Default size */
+  width: 100%;
+  height: 1em;
+
+  /* Appearance */
+  background: linear-gradient(
+    90deg,
+    var(--color-bg-neutral-subtle) 25%,
+    var(--color-bg-neutral-subtle-hover) 50%,
+    var(--color-bg-neutral-subtle) 75%
+  );
+  background-size: 200% 100%;
+}
+
+/* ===================================
+ * Variants
+ * =================================== */
+
+/* Text - thin rectangle for text lines */
+.skeleton[data-variant="text"] {
+  border-radius: var(--radius-sm);
+}
+
+/* Rectangular - for cards, images, etc. */
+.skeleton[data-variant="rectangular"] {
+  border-radius: var(--radius-md);
+}
+
+/* Circular - for avatars, icons */
+.skeleton[data-variant="circular"] {
+  border-radius: var(--radius-full);
+}
+
+/* ===================================
+ * Radius Overrides
+ * =================================== */
+
+.skeleton[data-radius="none"] {
+  border-radius: 0;
+}
+
+.skeleton[data-radius="sm"] {
+  border-radius: var(--radius-sm);
+}
+
+.skeleton[data-radius="md"] {
+  border-radius: var(--radius-md);
+}
+
+.skeleton[data-radius="lg"] {
+  border-radius: var(--radius-lg);
+}
+
+.skeleton[data-radius="full"] {
+  border-radius: var(--radius-full);
+}
+
+/* ===================================
+ * Animations
+ * =================================== */
+
+/* Pulse - fades in and out using the global skeleton animation */
+.skeleton[data-animation="pulse"] {
+  animation: var(--skeleton-animation);
+}
+
+/* Wave - shimmer effect */
+@keyframes skeleton-wave {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.skeleton[data-animation="wave"] {
+  animation: skeleton-wave 1.6s linear infinite;
+}
+
+/* None - static */
+.skeleton[data-animation="none"] {
+  animation: none;
+}
+
+/* ===================================
+ * Reduced Motion
+ * =================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton {
+    animation: none;
+  }
+}
+
+/* ===================================
+ * Skeleton Text (multi-line)
+ * =================================== */
+
+.skeleton-text {
+  display: flex;
+  flex-direction: column;
+}
+
+.skeleton-text .skeleton {
+  width: 100%;
+}
+
+.skeleton-text .skeleton:last-child {
+  width: var(--skeleton-text-last-width, 60%);
+}
+
+/* ===================================
+ * Skeleton Avatar
+ * =================================== */
+
+.skeleton-avatar {
+  flex-shrink: 0;
+}
+
+.skeleton-avatar[data-size="xs"] {
+  width: var(--spacing-5); /* 20px */
+  height: var(--spacing-5);
+}
+
+.skeleton-avatar[data-size="sm"] {
+  width: var(--spacing-6); /* 24px */
+  height: var(--spacing-6);
+}
+
+.skeleton-avatar[data-size="md"] {
+  width: var(--spacing-8); /* 32px */
+  height: var(--spacing-8);
+}
+
+.skeleton-avatar[data-size="lg"] {
+  width: var(--spacing-10); /* 40px */
+  height: var(--spacing-10);
+}
+
+.skeleton-avatar[data-size="xl"] {
+  width: var(--spacing-12); /* 48px */
+  height: var(--spacing-12);
+}
+
+/* ===================================
+ * Skeleton Button
+ * =================================== */
+
+.skeleton-button {
+  display: inline-block;
+}
+
+.skeleton-button[data-size="sm"] {
+  height: var(--button-height-sm);
+  width: 80px;
+}
+
+.skeleton-button[data-size="md"] {
+  height: var(--button-height-md);
+  width: 100px;
+}
+
+.skeleton-button[data-size="lg"] {
+  height: var(--button-height-lg);
+  width: 120px;
+}
+
+/* ===================================
+ * Skeleton Image
+ * =================================== */
+
+.skeleton-image {
+  display: block;
+  width: 100%;
+  height: auto; /* Allow aspect-ratio to control height */
+}

package/dist/status/skeleton.js

@@ -0,0 +1,44 @@
+import Component from '@glimmer/component';
+import '../skeleton-CL5Pcwrk.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+function formatDimension(value) {
+  if (value === undefined) return undefined;
+  if (typeof value === 'number') return `${value}px`;
+  return value;
+}
+class Skeleton extends Component {
+  get variant() {
+    return this.args.variant ?? 'text';
+  }
+  get animation() {
+    return this.args.animation ?? 'wave';
+  }
+  get radius() {
+    return this.args.radius;
+  }
+  get isLoading() {
+    return this.args.loading !== false;
+  }
+  get style() {
+    const styles = [];
+    const width = formatDimension(this.args.width);
+    const height = formatDimension(this.args.height);
+    if (width) {
+      styles.push(`width: ${width}`);
+    }
+    if (height) {
+      styles.push(`height: ${height}`);
+    }
+    return styles.join('; ');
+  }
+  static {
+    setComponentTemplate(precompileTemplate("{{#if this.isLoading}}\n  <div class=\"skeleton\" role=\"presentation\" aria-hidden=\"true\" data-variant={{this.variant}} data-animation={{this.animation}} data-radius={{this.radius}} style={{this.style}} data-test-skeleton ...attributes></div>\n{{else}}\n  {{yield}}\n{{/if}}", {
+      strictMode: true
+    }), this);
+  }
+}
+
+export { Skeleton as default };
+//# sourceMappingURL=skeleton.js.map

package/dist/status/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sources":["../../src/status/skeleton.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport './skeleton.css';\n\nexport type SkeletonVariant = 'text' | 'rectangular' | 'circular';\nexport type SkeletonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';\nexport type SkeletonAnimation = 'pulse' | 'wave' | 'none';\n\nexport interface SkeletonSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Width of the skeleton (CSS value or number for pixels) */\n    width?: string | number;\n\n    /** Height of the skeleton (CSS value or number for pixels) */\n    height?: string | number;\n\n    /** Shape variant */\n    variant?: SkeletonVariant;\n\n    /** Border radius override */\n    radius?: SkeletonRadius;\n\n    /** Animation style */\n    animation?: SkeletonAnimation;\n\n    /** When false, renders children instead of skeleton */\n    loading?: boolean;\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nfunction formatDimension(\n  value: string | number | undefined,\n): string | undefined {\n  if (value === undefined) return undefined;\n  if (typeof value === 'number') return `${value}px`;\n  return value;\n}\n\nexport default class Skeleton extends Component<SkeletonSignature> {\n  get variant(): SkeletonVariant {\n    return this.args.variant ?? 'text';\n  }\n\n  get animation(): SkeletonAnimation {\n    return this.args.animation ?? 'wave';\n  }\n\n  get radius(): SkeletonRadius | undefined {\n    return this.args.radius;\n  }\n\n  get isLoading(): boolean {\n    return this.args.loading !== false;\n  }\n\n  get style(): string {\n    const styles: string[] = [];\n\n    const width = formatDimension(this.args.width);\n    const height = formatDimension(this.args.height);\n\n    if (width) {\n      styles.push(`width: ${width}`);\n    }\n    if (height) {\n      styles.push(`height: ${height}`);\n    }\n\n    return styles.join('; ');\n  }\n\n  <template>\n    {{#if this.isLoading}}\n      <div\n        class=\"skeleton\"\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        data-variant={{this.variant}}\n        data-animation={{this.animation}}\n        data-radius={{this.radius}}\n        style={{this.style}}\n        data-test-skeleton\n        ...attributes\n      ></div>\n    {{else}}\n      {{yield}}\n    {{/if}}\n  </template>\n}\n"],"names":["formatDimension","value","undefined","Skeleton","Component","variant","args","animation","radius","isLoading","loading","style","styles","width","height","push","join","setComponentTemplate","precompileTemplate","strictMode"],"mappings":";;;;;AAiCA,SAASA,eAAAA,CACPC,KAAkC,EACf;AACnB,EAAA,IAAIA,KAAA,KAAUC,WAAW,OAAOA,SAAA;EAChC,IAAI,OAAOD,UAAU,QAAA,EAAU,OAAO,CAAA,EAAGA,KAAA,CAAA,EAAA,CAAS;AAClD,EAAA,OAAOA,KAAA;AACT;AAEe,MAAME,iBAAiBC,SAAA,CAAU;EAC9C,IAAIC,UAA2B;AAC7B,IAAA,OAAO,IAAI,CAACC,IAAI,CAACD,OAAO,IAAI,MAAA;AAC9B,EAAA;EAEA,IAAIE,YAA+B;AACjC,IAAA,OAAO,IAAI,CAACD,IAAI,CAACC,SAAS,IAAI,MAAA;AAChC,EAAA;EAEA,IAAIC,MAAAA,GAAqC;AACvC,IAAA,OAAO,IAAI,CAACF,IAAI,CAACE,MAAM;AACzB,EAAA;EAEA,IAAIC,SAAAA,GAAqB;AACvB,IAAA,OAAO,IAAI,CAACH,IAAI,CAACI,OAAO,KAAK,KAAA;AAC/B,EAAA;EAEA,IAAIC,KAAAA,GAAgB;IAClB,MAAMC,MAAc,GAAK,EAAE;IAE3B,MAAMC,QAAQb,eAAA,CAAgB,IAAI,CAACM,IAAI,CAACO,KAAK,CAAA;IAC7C,MAAMC,SAASd,eAAA,CAAgB,IAAI,CAACM,IAAI,CAACQ,MAAM,CAAA;AAE/C,IAAA,IAAID,KAAA,EAAO;AACTD,MAAAA,MAAA,CAAOG,IAAI,CAAC,CAAA,OAAA,EAAUF,OAAO,CAAA;AAC/B,IAAA;AACA,IAAA,IAAIC,MAAA,EAAQ;AACVF,MAAAA,MAAA,CAAOG,IAAI,CAAC,CAAA,QAAA,EAAWD,QAAQ,CAAA;AACjC,IAAA;AAEA,IAAA,OAAOF,MAAA,CAAOI,IAAI,CAAC,IAAA,CAAA;AACrB,EAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,uRAAA,EAgBA;MAAAC,UAAA,EAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}