@skra/ui 0.4.0 → 0.6.0

package/fesm2022/skra-ui-radio.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"skra-ui-radio.mjs","sources":["../../../../libs/ui/radio/src/lib/radio/radio.ts","../../../../libs/ui/radio/src/skra-ui-radio.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  ViewEncapsulation,\r\n  effect,\r\n  inject,\r\n} from '@angular/core';\r\nimport { SkraFieldContext } from '@skra/ui/field';\r\n\r\n/**\r\n * Wires a native `<input type=\"radio\">` to SkraFieldContext when inside\r\n * `<skra-field>`, or stands alone with no cascade. Per ADR 039/040, Forge ships\r\n * no `<skra-radio>` / `<skra-radio-group>` wrappers — this is a Component-on-\r\n * the-native-host (`<input>` is void → `template: ''`, ADR 040 §2) carrying its\r\n * own `radio.scss` via Emulated encapsulation. Radios are\r\n * grouped via native `<fieldset skraFieldset>` + `<legend skraLegend>`,\r\n * coordination happens through the shared `name` attribute (HTML-native), and\r\n * one-of-N value selection is consumer-owned per ADR 037.\r\n *\r\n *   <fieldset skraFieldset>\r\n *     <legend skraLegend>Choose plan</legend>\r\n *     <skra-field>\r\n *       <input type=\"radio\" skraRadio name=\"plan\" value=\"free\"\r\n *              [checked]=\"plan() === 'free'\" (change)=\"plan.set('free')\" />\r\n *       <label skraLabelFor>Free</label>\r\n *     </skra-field>\r\n *     <skra-field>\r\n *       <input type=\"radio\" skraRadio name=\"plan\" value=\"pro\"\r\n *              [checked]=\"plan() === 'pro'\" (change)=\"plan.set('pro')\" />\r\n *       <label skraLabelFor>Pro</label>\r\n *     </skra-field>\r\n *   </fieldset>\r\n *\r\n * Toggle state (`checked`) is NOT reflected as `data-skra-*` — slice CSS uses\r\n * the native `:checked` pseudo-class. Browser handles `aria-checked` natively.\r\n */\r\n@Component({\r\n  selector: 'input[type=\"radio\"][skraRadio]',\r\n  standalone: true,\r\n  // Void host — no <ng-content>. See ADR 040 §2.\r\n  template: '',\r\n  styleUrl: './radio.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n  host: {\r\n    '[attr.data-skra-disabled]': 'context?.isDisabled() ? \"\" : null',\r\n    '[attr.aria-invalid]': 'context?.hasError() ? \"true\" : null',\r\n    // Readonly is ARIA-only (native `readonly` doesn't apply to radios per HTML\r\n    // spec). No `data-skra-readonly` — dead surface (styling keys off\r\n    // `[aria-readonly]`), removed 2026-05-31 to match select's Q-3 ARIA-only\r\n    // pattern (Batch 5 cleanroom review).\r\n    '[attr.aria-readonly]': 'context?.isReadonly() ? \"true\" : null',\r\n    '[attr.aria-describedby]': 'context?.describedByIds() ?? null',\r\n    '(click)': 'blockWhenReadonly($event)',\r\n    '(keydown)': 'blockKeyWhenReadonly($event)',\r\n  },\r\n})\r\nexport class SkraRadio {\r\n  private readonly el = inject<ElementRef<HTMLInputElement>>(ElementRef);\r\n  readonly context = inject(SkraFieldContext, { optional: true });\r\n\r\n  constructor() {\r\n    if (this.context) {\r\n      const ctx = this.context;\r\n      const el = this.el.nativeElement;\r\n      effect(() => {\r\n        el.id = ctx.fieldId();\r\n      });\r\n      effect(() => {\r\n        el.disabled = ctx.isDisabled();\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Readonly enforcement — native radio has no `[readonly]`, so without this the\r\n   * `aria-readonly` we announce would be a lie (the user could still change the\r\n   * selection). `preventDefault` on `click` blocks the selection change from both\r\n   * pointer and Space/Enter (keyboard activation dispatches a click on form\r\n   * controls). Mirrors the `<select skraSelect>` readonly guard.\r\n   */\r\n  protected blockWhenReadonly(event: Event): void {\r\n    if (this.context?.isReadonly()) event.preventDefault();\r\n  }\r\n\r\n  /**\r\n   * Arrow keys move selection between radios in a `name` group WITHOUT a click,\r\n   * so they need a separate guard. Block every key except `Tab` (focus traversal)\r\n   * when readonly.\r\n   */\r\n  protected blockKeyWhenReadonly(event: KeyboardEvent): void {\r\n    if (this.context?.isReadonly() && event.key !== 'Tab') {\r\n      event.preventDefault();\r\n    }\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BG;MAsBU,SAAS,CAAA;AACH,IAAA,EAAE,GAAG,MAAM,CAA+B,UAAU,CAAC;IAC7D,OAAO,GAAG,MAAM,CAAC,gBAAgB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAE/D,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO;AACxB,YAAA,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa;YAChC,MAAM,CAAC,MAAK;AACV,gBAAA,EAAE,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,EAAE;AACvB,YAAA,CAAC,CAAC;YACF,MAAM,CAAC,MAAK;AACV,gBAAA,EAAE,CAAC,QAAQ,GAAG,GAAG,CAAC,UAAU,EAAE;AAChC,YAAA,CAAC,CAAC;QACJ;IACF;AAEA;;;;;;AAMG;AACO,IAAA,iBAAiB,CAAC,KAAY,EAAA;AACtC,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE;YAAE,KAAK,CAAC,cAAc,EAAE;IACxD;AAEA;;;;AAIG;AACO,IAAA,oBAAoB,CAAC,KAAoB,EAAA;AACjD,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACrD,KAAK,CAAC,cAAc,EAAE;QACxB;IACF;uGArCW,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAT,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,qdAjBV,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,mrEAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAiBD,SAAS,EAAA,UAAA,EAAA,CAAA;kBArBrB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gCAAgC,EAAA,UAAA,EAC9B,IAAI,EAAA,QAAA,EAEN,EAAE,EAAA,eAAA,EAEK,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,QAAQ,EAAA,IAAA,EACnC;AACJ,wBAAA,2BAA2B,EAAE,mCAAmC;AAChE,wBAAA,qBAAqB,EAAE,qCAAqC;;;;;AAK5D,wBAAA,sBAAsB,EAAE,uCAAuC;AAC/D,wBAAA,yBAAyB,EAAE,mCAAmC;AAC9D,wBAAA,SAAS,EAAE,2BAA2B;AACtC,wBAAA,WAAW,EAAE,8BAA8B;AAC5C,qBAAA,EAAA,MAAA,EAAA,CAAA,mrEAAA,CAAA,EAAA;;;ACxDH;;AAEG;;;;"}
+{"version":3,"file":"skra-ui-radio.mjs","sources":["../../../../libs/ui/radio/src/lib/radio/radio.ts","../../../../libs/ui/radio/src/skra-ui-radio.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  effect,\n  inject,\n} from '@angular/core';\nimport { SkraFieldContext } from '@skra/ui/field';\n\n/**\n * Wires a native `<input type=\"radio\">` to SkraFieldContext when inside\n * `<skra-field>`, or stands alone with no cascade. Per ADR 039/040, Forge ships\n * no `<skra-radio>` / `<skra-radio-group>` wrappers — this is a Component-on-\n * the-native-host (`<input>` is void → `template: ''`, ADR 040 §2) carrying its\n * own `radio.scss` via Emulated encapsulation. Radios are\n * grouped via native `<fieldset skraFieldset>` + `<legend skraLegend>`,\n * coordination happens through the shared `name` attribute (HTML-native), and\n * one-of-N value selection is consumer-owned per ADR 037.\n *\n *   <fieldset skraFieldset>\n *     <legend skraLegend>Choose plan</legend>\n *     <skra-field>\n *       <input type=\"radio\" skraRadio name=\"plan\" value=\"free\"\n *              [checked]=\"plan() === 'free'\" (change)=\"plan.set('free')\" />\n *       <label skraLabelFor>Free</label>\n *     </skra-field>\n *     <skra-field>\n *       <input type=\"radio\" skraRadio name=\"plan\" value=\"pro\"\n *              [checked]=\"plan() === 'pro'\" (change)=\"plan.set('pro')\" />\n *       <label skraLabelFor>Pro</label>\n *     </skra-field>\n *   </fieldset>\n *\n * Toggle state (`checked`) is NOT reflected as `data-skra-*` — slice CSS uses\n * the native `:checked` pseudo-class. Browser handles `aria-checked` natively.\n */\n@Component({\n  selector: 'input[type=\"radio\"][skraRadio]',\n  standalone: true,\n  // Void host — no <ng-content>. See ADR 040 §2.\n  template: '',\n  styleUrl: './radio.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    '[attr.data-skra-disabled]': 'context?.isDisabled() ? \"\" : null',\n    '[attr.aria-invalid]': 'context?.hasError() ? \"true\" : null',\n    // Readonly is ARIA-only (native `readonly` doesn't apply to radios per HTML\n    // spec). No `data-skra-readonly` — dead surface (styling keys off\n    // `[aria-readonly]`), removed 2026-05-31 to match select's Q-3 ARIA-only\n    // pattern (Batch 5 cleanroom review).\n    '[attr.aria-readonly]': 'context?.isReadonly() ? \"true\" : null',\n    '[attr.aria-describedby]': 'context?.describedByIds() ?? null',\n    '(click)': 'blockWhenReadonly($event)',\n    '(keydown)': 'blockKeyWhenReadonly($event)',\n  },\n})\nexport class SkraRadio {\n  private readonly el = inject<ElementRef<HTMLInputElement>>(ElementRef);\n  readonly context = inject(SkraFieldContext, { optional: true });\n\n  constructor() {\n    if (this.context) {\n      const ctx = this.context;\n      const el = this.el.nativeElement;\n      effect(() => {\n        el.id = ctx.fieldId();\n      });\n      effect(() => {\n        el.disabled = ctx.isDisabled();\n      });\n    }\n  }\n\n  /**\n   * Readonly enforcement — native radio has no `[readonly]`, so without this the\n   * `aria-readonly` we announce would be a lie (the user could still change the\n   * selection). `preventDefault` on `click` blocks the selection change from both\n   * pointer and Space/Enter (keyboard activation dispatches a click on form\n   * controls). Mirrors the `<select skraSelect>` readonly guard.\n   */\n  protected blockWhenReadonly(event: Event): void {\n    if (this.context?.isReadonly()) event.preventDefault();\n  }\n\n  /**\n   * Arrow keys move selection between radios in a `name` group WITHOUT a click,\n   * so they need a separate guard. Block every key except `Tab` (focus traversal)\n   * when readonly.\n   */\n  protected blockKeyWhenReadonly(event: KeyboardEvent): void {\n    if (this.context?.isReadonly() && event.key !== 'Tab') {\n      event.preventDefault();\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BG;MAsBU,SAAS,CAAA;AACH,IAAA,EAAE,GAAG,MAAM,CAA+B,UAAU,CAAC;IAC7D,OAAO,GAAG,MAAM,CAAC,gBAAgB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAE/D,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO;AACxB,YAAA,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa;YAChC,MAAM,CAAC,MAAK;AACV,gBAAA,EAAE,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,EAAE;AACvB,YAAA,CAAC,CAAC;YACF,MAAM,CAAC,MAAK;AACV,gBAAA,EAAE,CAAC,QAAQ,GAAG,GAAG,CAAC,UAAU,EAAE;AAChC,YAAA,CAAC,CAAC;QACJ;IACF;AAEA;;;;;;AAMG;AACO,IAAA,iBAAiB,CAAC,KAAY,EAAA;AACtC,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE;YAAE,KAAK,CAAC,cAAc,EAAE;IACxD;AAEA;;;;AAIG;AACO,IAAA,oBAAoB,CAAC,KAAoB,EAAA;AACjD,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACrD,KAAK,CAAC,cAAc,EAAE;QACxB;IACF;uGArCW,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAT,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,qdAjBV,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,+yEAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAiBD,SAAS,EAAA,UAAA,EAAA,CAAA;kBArBrB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gCAAgC,EAAA,UAAA,EAC9B,IAAI,EAAA,QAAA,EAEN,EAAE,EAAA,eAAA,EAEK,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,QAAQ,EAAA,IAAA,EACnC;AACJ,wBAAA,2BAA2B,EAAE,mCAAmC;AAChE,wBAAA,qBAAqB,EAAE,qCAAqC;;;;;AAK5D,wBAAA,sBAAsB,EAAE,uCAAuC;AAC/D,wBAAA,yBAAyB,EAAE,mCAAmC;AAC9D,wBAAA,SAAS,EAAE,2BAA2B;AACtC,wBAAA,WAAW,EAAE,8BAA8B;AAC5C,qBAAA,EAAA,MAAA,EAAA,CAAA,+yEAAA,CAAA,EAAA;;;ACxDH;;AAEG;;;;"}

package/fesm2022/skra-ui-rating-display.mjs

@@ -63,7 +63,7 @@ class SkraRatingDisplay {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fillBucket" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraRatingDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SkraRatingDisplay, isStandalone: true, selector: "skra-rating-display", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-skra-fill": "fillBucket()", "attr.data-skra-size": "size()" } }, ngImport: i0, template: "<!--\r\n  Two stacked glyph layers: an empty-stars track that defines the box, and a filled-stars\r\n  overlay clipped to the quantized fill width (the SCSS maps data-skra-fill \u2192 inline-size).\r\n  Both layers are decorative (aria-hidden); the accessible name, when any, is on the host\r\n  (consumer-applied role=\"img\" + aria-label \u2014 ADR 033 Path 3).\r\n-->\r\n<div class=\"skra-rating-display-track\" aria-hidden=\"true\">\r\n  @for (star of stars(); track star) {\r\n  <svg\r\n    class=\"skra-rating-display-glyph\"\r\n    viewBox=\"0 0 24 24\"\r\n    focusable=\"false\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <path\r\n      d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\r\n    />\r\n  </svg>\r\n  }\r\n</div>\r\n<div class=\"skra-rating-display-fill\" aria-hidden=\"true\">\r\n  @for (star of stars(); track star) {\r\n  <svg\r\n    class=\"skra-rating-display-glyph\"\r\n    viewBox=\"0 0 24 24\"\r\n    focusable=\"false\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <path\r\n      d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\r\n    />\r\n  </svg>\r\n  }\r\n</div>\r\n", styles: [":host{margin:0;position:relative;display:inline-flex;line-height:0;--_star-size: var(--skra-comp-star-rating-star-size-md)}:host([data-skra-size=sm]){--_star-size: var(--skra-comp-star-rating-star-size-sm)}:host([data-skra-size=lg]){--_star-size: var(--skra-comp-star-rating-star-size-lg)}.skra-rating-display-track,.skra-rating-display-fill{display:flex;gap:0;line-height:0}.skra-rating-display-fill{position:absolute;inset-block-start:0;inset-inline-start:0;block-size:100%;inline-size:0;overflow:hidden}.skra-rating-display-track .skra-rating-display-glyph{fill:var(--skra-comp-star-rating-star-color-empty)}.skra-rating-display-fill .skra-rating-display-glyph{fill:var(--skra-comp-star-rating-star-color-filled)}.skra-rating-display-glyph{flex:0 0 auto;inline-size:var(--_star-size);block-size:var(--_star-size)}:host([data-skra-fill=\"0\"]) .skra-rating-display-fill{inline-size:0%}:host([data-skra-fill=\"5\"]) .skra-rating-display-fill{inline-size:5%}:host([data-skra-fill=\"10\"]) .skra-rating-display-fill{inline-size:10%}:host([data-skra-fill=\"15\"]) .skra-rating-display-fill{inline-size:15%}:host([data-skra-fill=\"20\"]) .skra-rating-display-fill{inline-size:20%}:host([data-skra-fill=\"25\"]) .skra-rating-display-fill{inline-size:25%}:host([data-skra-fill=\"30\"]) .skra-rating-display-fill{inline-size:30%}:host([data-skra-fill=\"35\"]) .skra-rating-display-fill{inline-size:35%}:host([data-skra-fill=\"40\"]) .skra-rating-display-fill{inline-size:40%}:host([data-skra-fill=\"45\"]) .skra-rating-display-fill{inline-size:45%}:host([data-skra-fill=\"50\"]) .skra-rating-display-fill{inline-size:50%}:host([data-skra-fill=\"55\"]) .skra-rating-display-fill{inline-size:55%}:host([data-skra-fill=\"60\"]) .skra-rating-display-fill{inline-size:60%}:host([data-skra-fill=\"65\"]) .skra-rating-display-fill{inline-size:65%}:host([data-skra-fill=\"70\"]) .skra-rating-display-fill{inline-size:70%}:host([data-skra-fill=\"75\"]) .skra-rating-display-fill{inline-size:75%}:host([data-skra-fill=\"80\"]) .skra-rating-display-fill{inline-size:80%}:host([data-skra-fill=\"85\"]) .skra-rating-display-fill{inline-size:85%}:host([data-skra-fill=\"90\"]) .skra-rating-display-fill{inline-size:90%}:host([data-skra-fill=\"95\"]) .skra-rating-display-fill{inline-size:95%}:host([data-skra-fill=\"100\"]) .skra-rating-display-fill{inline-size:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SkraRatingDisplay, isStandalone: true, selector: "skra-rating-display", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-skra-fill": "fillBucket()", "attr.data-skra-size": "size()" } }, ngImport: i0, template: "<!--\n  Two stacked glyph layers: an empty-stars track that defines the box, and a filled-stars\n  overlay clipped to the quantized fill width (the SCSS maps data-skra-fill \u2192 inline-size).\n  Both layers are decorative (aria-hidden); the accessible name, when any, is on the host\n  (consumer-applied role=\"img\" + aria-label \u2014 ADR 033 Path 3).\n  O-67 \u2014 the track draws OUTLINE stars and the fill draws SOLID ones, so filled vs empty is\n  carried by shape (WCAG 1.4.1). The outline's outer edge is the solid star's, so a filled\n  star covers the ring (bar a faint anti-aliased fringe at the edge \u2014 the pre-O-67 solid\n  track did the same); a partial fill shows solid over outline.\n-->\n<div class=\"skra-rating-display-track\" aria-hidden=\"true\">\n  @for (star of stars(); track star) {\n  <svg\n    class=\"skra-rating-display-glyph\"\n    viewBox=\"0 0 24 24\"\n    focusable=\"false\"\n    aria-hidden=\"true\"\n  >\n    <path\n      fill-rule=\"evenodd\"\n      d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28z\"\n    />\n  </svg>\n  }\n</div>\n<div class=\"skra-rating-display-fill\" aria-hidden=\"true\">\n  @for (star of stars(); track star) {\n  <svg\n    class=\"skra-rating-display-glyph\"\n    viewBox=\"0 0 24 24\"\n    focusable=\"false\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\n    />\n  </svg>\n  }\n</div>\n", styles: [":host{margin:0;position:relative;display:inline-flex;line-height:0;--_star-size: var(--skra-comp-star-rating-star-size-md)}:host([data-skra-size=sm]){--_star-size: var(--skra-comp-star-rating-star-size-sm)}:host([data-skra-size=lg]){--_star-size: var(--skra-comp-star-rating-star-size-lg)}.skra-rating-display-track,.skra-rating-display-fill{display:flex;gap:0;line-height:0}.skra-rating-display-fill{position:absolute;inset-block-start:0;inset-inline-start:0;block-size:100%;inline-size:0;overflow:hidden}.skra-rating-display-track .skra-rating-display-glyph{fill:var(--skra-comp-star-rating-star-color-empty)}.skra-rating-display-fill .skra-rating-display-glyph{fill:var(--skra-comp-star-rating-star-color-filled)}.skra-rating-display-glyph{flex:0 0 auto;inline-size:var(--_star-size);block-size:var(--_star-size)}:host([data-skra-fill=\"0\"]) .skra-rating-display-fill{inline-size:0%}:host([data-skra-fill=\"5\"]) .skra-rating-display-fill{inline-size:5%}:host([data-skra-fill=\"10\"]) .skra-rating-display-fill{inline-size:10%}:host([data-skra-fill=\"15\"]) .skra-rating-display-fill{inline-size:15%}:host([data-skra-fill=\"20\"]) .skra-rating-display-fill{inline-size:20%}:host([data-skra-fill=\"25\"]) .skra-rating-display-fill{inline-size:25%}:host([data-skra-fill=\"30\"]) .skra-rating-display-fill{inline-size:30%}:host([data-skra-fill=\"35\"]) .skra-rating-display-fill{inline-size:35%}:host([data-skra-fill=\"40\"]) .skra-rating-display-fill{inline-size:40%}:host([data-skra-fill=\"45\"]) .skra-rating-display-fill{inline-size:45%}:host([data-skra-fill=\"50\"]) .skra-rating-display-fill{inline-size:50%}:host([data-skra-fill=\"55\"]) .skra-rating-display-fill{inline-size:55%}:host([data-skra-fill=\"60\"]) .skra-rating-display-fill{inline-size:60%}:host([data-skra-fill=\"65\"]) .skra-rating-display-fill{inline-size:65%}:host([data-skra-fill=\"70\"]) .skra-rating-display-fill{inline-size:70%}:host([data-skra-fill=\"75\"]) .skra-rating-display-fill{inline-size:75%}:host([data-skra-fill=\"80\"]) .skra-rating-display-fill{inline-size:80%}:host([data-skra-fill=\"85\"]) .skra-rating-display-fill{inline-size:85%}:host([data-skra-fill=\"90\"]) .skra-rating-display-fill{inline-size:90%}:host([data-skra-fill=\"95\"]) .skra-rating-display-fill{inline-size:95%}:host([data-skra-fill=\"100\"]) .skra-rating-display-fill{inline-size:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraRatingDisplay, decorators: [{
             type: Component,
@@ -72,7 +72,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         '[attr.data-skra-fill]': 'fillBucket()',
                         // Variant Surface size axis (ADR 035) — reuses the family star-size-* tokens.
                         '[attr.data-skra-size]': 'size()',
-                    }, template: "<!--\r\n  Two stacked glyph layers: an empty-stars track that defines the box, and a filled-stars\r\n  overlay clipped to the quantized fill width (the SCSS maps data-skra-fill \u2192 inline-size).\r\n  Both layers are decorative (aria-hidden); the accessible name, when any, is on the host\r\n  (consumer-applied role=\"img\" + aria-label \u2014 ADR 033 Path 3).\r\n-->\r\n<div class=\"skra-rating-display-track\" aria-hidden=\"true\">\r\n  @for (star of stars(); track star) {\r\n  <svg\r\n    class=\"skra-rating-display-glyph\"\r\n    viewBox=\"0 0 24 24\"\r\n    focusable=\"false\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <path\r\n      d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\r\n    />\r\n  </svg>\r\n  }\r\n</div>\r\n<div class=\"skra-rating-display-fill\" aria-hidden=\"true\">\r\n  @for (star of stars(); track star) {\r\n  <svg\r\n    class=\"skra-rating-display-glyph\"\r\n    viewBox=\"0 0 24 24\"\r\n    focusable=\"false\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <path\r\n      d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\r\n    />\r\n  </svg>\r\n  }\r\n</div>\r\n", styles: [":host{margin:0;position:relative;display:inline-flex;line-height:0;--_star-size: var(--skra-comp-star-rating-star-size-md)}:host([data-skra-size=sm]){--_star-size: var(--skra-comp-star-rating-star-size-sm)}:host([data-skra-size=lg]){--_star-size: var(--skra-comp-star-rating-star-size-lg)}.skra-rating-display-track,.skra-rating-display-fill{display:flex;gap:0;line-height:0}.skra-rating-display-fill{position:absolute;inset-block-start:0;inset-inline-start:0;block-size:100%;inline-size:0;overflow:hidden}.skra-rating-display-track .skra-rating-display-glyph{fill:var(--skra-comp-star-rating-star-color-empty)}.skra-rating-display-fill .skra-rating-display-glyph{fill:var(--skra-comp-star-rating-star-color-filled)}.skra-rating-display-glyph{flex:0 0 auto;inline-size:var(--_star-size);block-size:var(--_star-size)}:host([data-skra-fill=\"0\"]) .skra-rating-display-fill{inline-size:0%}:host([data-skra-fill=\"5\"]) .skra-rating-display-fill{inline-size:5%}:host([data-skra-fill=\"10\"]) .skra-rating-display-fill{inline-size:10%}:host([data-skra-fill=\"15\"]) .skra-rating-display-fill{inline-size:15%}:host([data-skra-fill=\"20\"]) .skra-rating-display-fill{inline-size:20%}:host([data-skra-fill=\"25\"]) .skra-rating-display-fill{inline-size:25%}:host([data-skra-fill=\"30\"]) .skra-rating-display-fill{inline-size:30%}:host([data-skra-fill=\"35\"]) .skra-rating-display-fill{inline-size:35%}:host([data-skra-fill=\"40\"]) .skra-rating-display-fill{inline-size:40%}:host([data-skra-fill=\"45\"]) .skra-rating-display-fill{inline-size:45%}:host([data-skra-fill=\"50\"]) .skra-rating-display-fill{inline-size:50%}:host([data-skra-fill=\"55\"]) .skra-rating-display-fill{inline-size:55%}:host([data-skra-fill=\"60\"]) .skra-rating-display-fill{inline-size:60%}:host([data-skra-fill=\"65\"]) .skra-rating-display-fill{inline-size:65%}:host([data-skra-fill=\"70\"]) .skra-rating-display-fill{inline-size:70%}:host([data-skra-fill=\"75\"]) .skra-rating-display-fill{inline-size:75%}:host([data-skra-fill=\"80\"]) .skra-rating-display-fill{inline-size:80%}:host([data-skra-fill=\"85\"]) .skra-rating-display-fill{inline-size:85%}:host([data-skra-fill=\"90\"]) .skra-rating-display-fill{inline-size:90%}:host([data-skra-fill=\"95\"]) .skra-rating-display-fill{inline-size:95%}:host([data-skra-fill=\"100\"]) .skra-rating-display-fill{inline-size:100%}\n"] }]
+                    }, template: "<!--\n  Two stacked glyph layers: an empty-stars track that defines the box, and a filled-stars\n  overlay clipped to the quantized fill width (the SCSS maps data-skra-fill \u2192 inline-size).\n  Both layers are decorative (aria-hidden); the accessible name, when any, is on the host\n  (consumer-applied role=\"img\" + aria-label \u2014 ADR 033 Path 3).\n  O-67 \u2014 the track draws OUTLINE stars and the fill draws SOLID ones, so filled vs empty is\n  carried by shape (WCAG 1.4.1). The outline's outer edge is the solid star's, so a filled\n  star covers the ring (bar a faint anti-aliased fringe at the edge \u2014 the pre-O-67 solid\n  track did the same); a partial fill shows solid over outline.\n-->\n<div class=\"skra-rating-display-track\" aria-hidden=\"true\">\n  @for (star of stars(); track star) {\n  <svg\n    class=\"skra-rating-display-glyph\"\n    viewBox=\"0 0 24 24\"\n    focusable=\"false\"\n    aria-hidden=\"true\"\n  >\n    <path\n      fill-rule=\"evenodd\"\n      d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28z\"\n    />\n  </svg>\n  }\n</div>\n<div class=\"skra-rating-display-fill\" aria-hidden=\"true\">\n  @for (star of stars(); track star) {\n  <svg\n    class=\"skra-rating-display-glyph\"\n    viewBox=\"0 0 24 24\"\n    focusable=\"false\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\n    />\n  </svg>\n  }\n</div>\n", styles: [":host{margin:0;position:relative;display:inline-flex;line-height:0;--_star-size: var(--skra-comp-star-rating-star-size-md)}:host([data-skra-size=sm]){--_star-size: var(--skra-comp-star-rating-star-size-sm)}:host([data-skra-size=lg]){--_star-size: var(--skra-comp-star-rating-star-size-lg)}.skra-rating-display-track,.skra-rating-display-fill{display:flex;gap:0;line-height:0}.skra-rating-display-fill{position:absolute;inset-block-start:0;inset-inline-start:0;block-size:100%;inline-size:0;overflow:hidden}.skra-rating-display-track .skra-rating-display-glyph{fill:var(--skra-comp-star-rating-star-color-empty)}.skra-rating-display-fill .skra-rating-display-glyph{fill:var(--skra-comp-star-rating-star-color-filled)}.skra-rating-display-glyph{flex:0 0 auto;inline-size:var(--_star-size);block-size:var(--_star-size)}:host([data-skra-fill=\"0\"]) .skra-rating-display-fill{inline-size:0%}:host([data-skra-fill=\"5\"]) .skra-rating-display-fill{inline-size:5%}:host([data-skra-fill=\"10\"]) .skra-rating-display-fill{inline-size:10%}:host([data-skra-fill=\"15\"]) .skra-rating-display-fill{inline-size:15%}:host([data-skra-fill=\"20\"]) .skra-rating-display-fill{inline-size:20%}:host([data-skra-fill=\"25\"]) .skra-rating-display-fill{inline-size:25%}:host([data-skra-fill=\"30\"]) .skra-rating-display-fill{inline-size:30%}:host([data-skra-fill=\"35\"]) .skra-rating-display-fill{inline-size:35%}:host([data-skra-fill=\"40\"]) .skra-rating-display-fill{inline-size:40%}:host([data-skra-fill=\"45\"]) .skra-rating-display-fill{inline-size:45%}:host([data-skra-fill=\"50\"]) .skra-rating-display-fill{inline-size:50%}:host([data-skra-fill=\"55\"]) .skra-rating-display-fill{inline-size:55%}:host([data-skra-fill=\"60\"]) .skra-rating-display-fill{inline-size:60%}:host([data-skra-fill=\"65\"]) .skra-rating-display-fill{inline-size:65%}:host([data-skra-fill=\"70\"]) .skra-rating-display-fill{inline-size:70%}:host([data-skra-fill=\"75\"]) .skra-rating-display-fill{inline-size:75%}:host([data-skra-fill=\"80\"]) .skra-rating-display-fill{inline-size:80%}:host([data-skra-fill=\"85\"]) .skra-rating-display-fill{inline-size:85%}:host([data-skra-fill=\"90\"]) .skra-rating-display-fill{inline-size:90%}:host([data-skra-fill=\"95\"]) .skra-rating-display-fill{inline-size:95%}:host([data-skra-fill=\"100\"]) .skra-rating-display-fill{inline-size:100%}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 // Static fractional rating display — read-only counterpart to skra-star-rating

package/fesm2022/skra-ui-rating-display.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"skra-ui-rating-display.mjs","sources":["../../../../libs/ui/rating-display/src/lib/rating-display/rating-display.ts","../../../../libs/ui/rating-display/src/lib/rating-display/rating-display.html","../../../../libs/ui/rating-display/src/index.ts","../../../../libs/ui/rating-display/src/skra-ui-rating-display.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ViewEncapsulation,\r\n  computed,\r\n  input,\r\n} from '@angular/core';\r\n\r\nexport type RatingDisplaySize = 'sm' | 'md' | 'lg';\r\n\r\n/**\r\n * `<skra-rating-display>` — a static, non-interactive **fractional** rating display\r\n * (\"4.3 out of 5 stars\"). The read-only counterpart to `skra-star-rating` (the\r\n * interactive whole-star INPUT in `libs/ui/forms`); a SEPARATE atom by atom-granularity\r\n * (opposite a11y contract `role=\"img\"` vs `radiogroup`; float vs int; no interaction).\r\n * Third resident of `libs/ui/data-display`, beside Avatar + StatusDot. See\r\n * `adr/specs/component-rating-display-spec.md`.\r\n *\r\n * **Element, not a decorated native (ADR 012):** there is no native rating element, like\r\n * StatusDot/Avatar. NOT a Web Component (ADR 000).\r\n *\r\n * **Value consumer-owned (ADR 037):** `value` is a plain `input<number>()` (float). The atom\r\n * owns no value, no `ControlValueAccessor`, no `@angular/forms`.\r\n *\r\n * **Fractional fill is CSP-clean (ADR 021):** the fill is QUANTIZED to a `data-skra-fill`\r\n * bucket reflected on the host (`{0,5,…,100}`); the SCSS maps each bucket to the fill-overlay\r\n * width. Zero `[style.--var]`, zero inline style — a bounded value is quantizable, so no\r\n * geometry exception is taken. State Surface all-N/A (non-focusable display; Badge/StatusDot\r\n * precedent).\r\n *\r\n * **Accessible name (ADR 033 Path 3 — the StatusDot/Avatar contract):** the host carries NO\r\n * default ARIA. The consumer declares semantics:\r\n *   - decorative (Mode A, beside a visible value like \"4.3\") → `aria-hidden=\"true\"`;\r\n *   - meaningful (Mode B, the stars are the sole carrier) → `role=\"img\"` + `aria-label`\r\n *     TOGETHER (e.g. `aria-label=\"Rated 4.3 out of 5\"`).\r\n * The inner star glyphs are always decorative. NO `ariaLabel` input (boundary #8) — the label\r\n * is consumer-owned + localizable (the agnostic doctrine; Forge does not hard-code \"out of N\").\r\n *\r\n * **Look is skin-owned:** glyph colours + sizes come from the shared family surface\r\n * (`comp/star-rating.json`). NO `intent`/`emphasis`/`color`/`variant` look-inputs.\r\n */\r\n@Component({\r\n  selector: 'skra-rating-display',\r\n  standalone: true,\r\n  templateUrl: './rating-display.html',\r\n  styleUrl: './rating-display.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n  host: {\r\n    // Quantized fractional fill (ADR 021 — data-attr, never [style.--var]).\r\n    '[attr.data-skra-fill]': 'fillBucket()',\r\n    // Variant Surface size axis (ADR 035) — reuses the family star-size-* tokens.\r\n    '[attr.data-skra-size]': 'size()',\r\n  },\r\n})\r\nexport class SkraRatingDisplay {\r\n  /** The rating to display — FLOAT (e.g. 4.3). Consumer-owned (ADR 037); clamped to [0, max]. */\r\n  readonly value = input<number>(0);\r\n  /** Number of stars (semantic count). */\r\n  readonly max = input<number>(5);\r\n  /** ADR 035 size axis — the only variant axis. */\r\n  readonly size = input<RatingDisplaySize>('md');\r\n\r\n  /** Star slots [1..max] — both layers render the same count. */\r\n  readonly stars = computed(() => {\r\n    const n = Math.max(0, Math.floor(this.max()));\r\n    return Array.from({ length: n }, (_, i) => i + 1);\r\n  });\r\n\r\n  /**\r\n   * Fill percentage quantized to 5% buckets (`{0,5,…,100}`) — reflected as `data-skra-fill`,\r\n   * mapped to the overlay width by the SCSS. 4.3/5 → 86% → bucket 85 (visually exact-enough).\r\n   * A bounded, quantizable value is exactly what ADR 021 reflection is for — no style exception.\r\n   */\r\n  readonly fillBucket = computed(() => {\r\n    const max = this.max();\r\n    if (max <= 0) return 0;\r\n    const ratio = this.value() / max;\r\n    const clamped = Math.min(1, Math.max(0, ratio));\r\n    return Math.round(clamped * 20) * 5;\r\n  });\r\n}\r\n","<!--\r\n  Two stacked glyph layers: an empty-stars track that defines the box, and a filled-stars\r\n  overlay clipped to the quantized fill width (the SCSS maps data-skra-fill → inline-size).\r\n  Both layers are decorative (aria-hidden); the accessible name, when any, is on the host\r\n  (consumer-applied role=\"img\" + aria-label — ADR 033 Path 3).\r\n-->\r\n<div class=\"skra-rating-display-track\" aria-hidden=\"true\">\r\n  @for (star of stars(); track star) {\r\n  <svg\r\n    class=\"skra-rating-display-glyph\"\r\n    viewBox=\"0 0 24 24\"\r\n    focusable=\"false\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <path\r\n      d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\r\n    />\r\n  </svg>\r\n  }\r\n</div>\r\n<div class=\"skra-rating-display-fill\" aria-hidden=\"true\">\r\n  @for (star of stars(); track star) {\r\n  <svg\r\n    class=\"skra-rating-display-glyph\"\r\n    viewBox=\"0 0 24 24\"\r\n    focusable=\"false\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <path\r\n      d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\r\n    />\r\n  </svg>\r\n  }\r\n</div>\r\n","// Static fractional rating display — read-only counterpart to skra-star-rating\r\n// (@skra/ui/star-rating); shares the family glyph surface (comp/star-rating.json).\r\nexport * from './lib/rating-display/rating-display';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BG;MAeU,iBAAiB,CAAA;;IAEnB,KAAK,GAAG,KAAK,CAAS,CAAC;8EAAC;;IAExB,GAAG,GAAG,KAAK,CAAS,CAAC;4EAAC;;IAEtB,IAAI,GAAG,KAAK,CAAoB,IAAI;6EAAC;;AAGrC,IAAA,KAAK,GAAG,QAAQ,CAAC,MAAK;AAC7B,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QAC7C,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACnD,CAAC;8EAAC;AAEF;;;;AAIG;AACM,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAK;AAClC,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE;QACtB,IAAI,GAAG,IAAI,CAAC;AAAE,YAAA,OAAO,CAAC;QACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG;AAChC,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;QAC/C,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,GAAG,CAAC;IACrC,CAAC;mFAAC;uGAzBS,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,4hBCvD9B,uqCAkCA,EAAA,MAAA,EAAA,CAAA,+yEAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDqBa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAd7B,SAAS;+BACE,qBAAqB,EAAA,UAAA,EACnB,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,QAAQ,EAAA,IAAA,EACnC;;AAEJ,wBAAA,uBAAuB,EAAE,cAAc;;AAEvC,wBAAA,uBAAuB,EAAE,QAAQ;AAClC,qBAAA,EAAA,QAAA,EAAA,uqCAAA,EAAA,MAAA,EAAA,CAAA,+yEAAA,CAAA,EAAA;;;AErDH;AACA;;ACDA;;AAEG;;;;"}
+{"version":3,"file":"skra-ui-rating-display.mjs","sources":["../../../../libs/ui/rating-display/src/lib/rating-display/rating-display.ts","../../../../libs/ui/rating-display/src/lib/rating-display/rating-display.html","../../../../libs/ui/rating-display/src/index.ts","../../../../libs/ui/rating-display/src/skra-ui-rating-display.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n} from '@angular/core';\n\nexport type RatingDisplaySize = 'sm' | 'md' | 'lg';\n\n/**\n * `<skra-rating-display>` — a static, non-interactive **fractional** rating display\n * (\"4.3 out of 5 stars\"). The read-only counterpart to `skra-star-rating` (the\n * interactive whole-star INPUT in `libs/ui/forms`); a SEPARATE atom by atom-granularity\n * (opposite a11y contract `role=\"img\"` vs `radiogroup`; float vs int; no interaction).\n * Third resident of `libs/ui/data-display`, beside Avatar + StatusDot. See\n * `adr/specs/component-rating-display-spec.md`.\n *\n * **Element, not a decorated native (ADR 012):** there is no native rating element, like\n * StatusDot/Avatar. NOT a Web Component (ADR 000).\n *\n * **Value consumer-owned (ADR 037):** `value` is a plain `input<number>()` (float). The atom\n * owns no value, no `ControlValueAccessor`, no `@angular/forms`.\n *\n * **Fractional fill is CSP-clean (ADR 021):** the fill is QUANTIZED to a `data-skra-fill`\n * bucket reflected on the host (`{0,5,…,100}`); the SCSS maps each bucket to the fill-overlay\n * width. Zero `[style.--var]`, zero inline style — a bounded value is quantizable, so no\n * geometry exception is taken. State Surface all-N/A (non-focusable display; Badge/StatusDot\n * precedent).\n *\n * **Accessible name (ADR 033 Path 3 — the StatusDot/Avatar contract):** the host carries NO\n * default ARIA. The consumer declares semantics:\n *   - decorative (Mode A, beside a visible value like \"4.3\") → `aria-hidden=\"true\"`;\n *   - meaningful (Mode B, the stars are the sole carrier) → `role=\"img\"` + `aria-label`\n *     TOGETHER (e.g. `aria-label=\"Rated 4.3 out of 5\"`).\n * The inner star glyphs are always decorative. NO `ariaLabel` input (boundary #8) — the label\n * is consumer-owned + localizable (the agnostic doctrine; Forge does not hard-code \"out of N\").\n *\n * **Look is skin-owned:** glyph colours + sizes come from the shared family surface\n * (`comp/star-rating.json`). NO `intent`/`emphasis`/`color`/`variant` look-inputs.\n */\n@Component({\n  selector: 'skra-rating-display',\n  standalone: true,\n  templateUrl: './rating-display.html',\n  styleUrl: './rating-display.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    // Quantized fractional fill (ADR 021 — data-attr, never [style.--var]).\n    '[attr.data-skra-fill]': 'fillBucket()',\n    // Variant Surface size axis (ADR 035) — reuses the family star-size-* tokens.\n    '[attr.data-skra-size]': 'size()',\n  },\n})\nexport class SkraRatingDisplay {\n  /** The rating to display — FLOAT (e.g. 4.3). Consumer-owned (ADR 037); clamped to [0, max]. */\n  readonly value = input<number>(0);\n  /** Number of stars (semantic count). */\n  readonly max = input<number>(5);\n  /** ADR 035 size axis — the only variant axis. */\n  readonly size = input<RatingDisplaySize>('md');\n\n  /** Star slots [1..max] — both layers render the same count. */\n  readonly stars = computed(() => {\n    const n = Math.max(0, Math.floor(this.max()));\n    return Array.from({ length: n }, (_, i) => i + 1);\n  });\n\n  /**\n   * Fill percentage quantized to 5% buckets (`{0,5,…,100}`) — reflected as `data-skra-fill`,\n   * mapped to the overlay width by the SCSS. 4.3/5 → 86% → bucket 85 (visually exact-enough).\n   * A bounded, quantizable value is exactly what ADR 021 reflection is for — no style exception.\n   */\n  readonly fillBucket = computed(() => {\n    const max = this.max();\n    if (max <= 0) return 0;\n    const ratio = this.value() / max;\n    const clamped = Math.min(1, Math.max(0, ratio));\n    return Math.round(clamped * 20) * 5;\n  });\n}\n","<!--\n  Two stacked glyph layers: an empty-stars track that defines the box, and a filled-stars\n  overlay clipped to the quantized fill width (the SCSS maps data-skra-fill → inline-size).\n  Both layers are decorative (aria-hidden); the accessible name, when any, is on the host\n  (consumer-applied role=\"img\" + aria-label — ADR 033 Path 3).\n  O-67 — the track draws OUTLINE stars and the fill draws SOLID ones, so filled vs empty is\n  carried by shape (WCAG 1.4.1). The outline's outer edge is the solid star's, so a filled\n  star covers the ring (bar a faint anti-aliased fringe at the edge — the pre-O-67 solid\n  track did the same); a partial fill shows solid over outline.\n-->\n<div class=\"skra-rating-display-track\" aria-hidden=\"true\">\n  @for (star of stars(); track star) {\n  <svg\n    class=\"skra-rating-display-glyph\"\n    viewBox=\"0 0 24 24\"\n    focusable=\"false\"\n    aria-hidden=\"true\"\n  >\n    <path\n      fill-rule=\"evenodd\"\n      d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28z\"\n    />\n  </svg>\n  }\n</div>\n<div class=\"skra-rating-display-fill\" aria-hidden=\"true\">\n  @for (star of stars(); track star) {\n  <svg\n    class=\"skra-rating-display-glyph\"\n    viewBox=\"0 0 24 24\"\n    focusable=\"false\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\n    />\n  </svg>\n  }\n</div>\n","// Static fractional rating display — read-only counterpart to skra-star-rating\n// (@skra/ui/star-rating); shares the family glyph surface (comp/star-rating.json).\nexport * from './lib/rating-display/rating-display';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BG;MAeU,iBAAiB,CAAA;;IAEnB,KAAK,GAAG,KAAK,CAAS,CAAC;8EAAC;;IAExB,GAAG,GAAG,KAAK,CAAS,CAAC;4EAAC;;IAEtB,IAAI,GAAG,KAAK,CAAoB,IAAI;6EAAC;;AAGrC,IAAA,KAAK,GAAG,QAAQ,CAAC,MAAK;AAC7B,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QAC7C,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACnD,CAAC;8EAAC;AAEF;;;;AAIG;AACM,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAK;AAClC,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE;QACtB,IAAI,GAAG,IAAI,CAAC;AAAE,YAAA,OAAO,CAAC;QACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG;AAChC,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;QAC/C,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,GAAG,CAAC;IACrC,CAAC;mFAAC;uGAzBS,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,4hBCvD9B,sjDAuCA,EAAA,MAAA,EAAA,CAAA,+yEAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDgBa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAd7B,SAAS;+BACE,qBAAqB,EAAA,UAAA,EACnB,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,QAAQ,EAAA,IAAA,EACnC;;AAEJ,wBAAA,uBAAuB,EAAE,cAAc;;AAEvC,wBAAA,uBAAuB,EAAE,QAAQ;AAClC,qBAAA,EAAA,QAAA,EAAA,sjDAAA,EAAA,MAAA,EAAA,CAAA,+yEAAA,CAAA,EAAA;;;AErDH;AACA;;ACDA;;AAEG;;;;"}

package/fesm2022/skra-ui-select.mjs

@@ -49,101 +49,101 @@ class SkraSelect extends _SkraSelectBase {
         return this.selectedOption();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraSelect, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SkraSelect, isStandalone: true, selector: "skra-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [{ provide: SKRA_LISTBOX_PANEL, useExisting: SkraSelect }], exportAs: ["skraSelect"], usesInheritance: true, ngImport: i0, template: `
-    <button
-      #trigger
-      class="skra-select-trigger"
-      type="button"
-      role="combobox"
-      aria-haspopup="listbox"
-      [attr.id]="triggerId()"
-      [attr.popovertarget]="panelId"
-      [attr.aria-controls]="panelId"
-      [attr.aria-expanded]="isOpen()"
-      [attr.aria-activedescendant]="activeOptionId()"
-      [attr.aria-describedby]="describedBy()"
-      [attr.aria-invalid]="hasError() ? 'true' : null"
-      [attr.aria-required]="isRequired() ? 'true' : null"
-      [attr.aria-readonly]="isReadonly() ? 'true' : null"
-      [disabled]="isDisabled()"
-      (click)="onTriggerClick($event)"
-      (keydown)="onTriggerKeydown($event)"
-    >
-      <span class="skra-select-trigger-value">
-        @if (triggerTemplate(); as tpl) {
-          <ng-container
-            [ngTemplateOutlet]="tpl"
-            [ngTemplateOutletContext]="triggerContext()"
-          ></ng-container>
-        } @else if (selectedOption(); as opt) {
-          {{ opt.getLabel() }}
-        } @else {
-          <span class="skra-select-placeholder">{{ placeholder() }}</span>
-        }
-      </span>
-      <span class="skra-select-arrow" aria-hidden="true"></span>
-    </button>
-
-    <div
-      #panel
-      class="skra-select-listbox"
-      [id]="panelId"
-      role="listbox"
-      popover="auto"
-      (toggle)="onPanelToggle($event)"
-    >
-      <ng-content></ng-content>
-    </div>
-  `, isInline: true, styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box;margin:0}.skra-select-trigger{display:flex;align-items:center;gap:var(--skra-comp-select-gap);inline-size:100%;min-block-size:var(--skra-comp-select-min-block-size);box-sizing:border-box;margin:0;padding-block:var(--skra-comp-select-padding-block);padding-inline:var(--skra-comp-select-padding-inline);text-align:start;cursor:pointer;background:var(--skra-comp-select-background);color:var(--skra-comp-select-foreground);border-color:var(--skra-comp-select-border-color);border-width:var(--skra-comp-select-border-width);border-style:var(--skra-comp-select-border-style);border-radius:var(--skra-comp-select-radius);box-shadow:var(--skra-comp-select-shadow);font-family:var(--skra-sys-typography-role-body-medium-font-family);font-size:var(--skra-sys-typography-role-body-medium-font-size);font-weight:var(--skra-sys-typography-role-body-medium-font-weight);line-height:var(--skra-sys-typography-role-body-medium-line-height);letter-spacing:var(--skra-sys-typography-role-body-medium-letter-spacing);transition:background-color var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing),border-color var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing)}.skra-select-trigger:hover:not(:disabled):not([aria-readonly=true]){background:var(--skra-comp-select-background-hover)}.skra-select-trigger:focus-visible{outline:var(--skra-comp-select-focus-ring-width) solid var(--skra-comp-select-focus-ring-color);outline-offset:.125rem}.skra-select-trigger:disabled{background:var(--skra-comp-select-background-disabled);color:var(--skra-comp-select-foreground-disabled);cursor:not-allowed}.skra-select-trigger[aria-readonly=true]{background:var(--skra-comp-select-background-readonly);cursor:default}.skra-select-trigger[aria-invalid=true]{border-color:var(--skra-comp-select-border-color-validation-invalid)}.skra-select-trigger-value{flex:1 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--skra-comp-icon-size: var(--skra-comp-select-icon-size)}.skra-select-placeholder{color:var(--skra-comp-select-foreground-disabled)}.skra-select-arrow{flex:none;inline-size:var(--skra-comp-select-arrow-icon-size);block-size:var(--skra-comp-select-arrow-icon-size);background-color:var(--skra-comp-select-arrow-color);mask:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%209l6%206%206-6'%20fill='none'%20stroke='%23000'%20stroke-width='2'/%3E%3C/svg%3E\") no-repeat center/contain;-webkit-mask:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%209l6%206%206-6'%20fill='none'%20stroke='%23000'%20stroke-width='2'/%3E%3C/svg%3E\") no-repeat center/contain;transition:transform var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing)}.skra-select-trigger[aria-expanded=true] .skra-select-arrow{transform:rotate(180deg)}.skra-select-listbox{position:fixed;margin:0;inset:auto;box-sizing:border-box;padding-block:var(--skra-comp-select-panel-padding-block);padding-inline:var(--skra-comp-select-panel-padding-inline);background:var(--skra-comp-select-panel-background);color:var(--skra-comp-select-panel-foreground);border:var(--skra-comp-select-border-width) solid var(--skra-comp-select-panel-border-color);border-radius:var(--skra-comp-select-panel-radius);box-shadow:var(--skra-comp-select-panel-shadow);inline-size:max-content;max-block-size:var(--skra-comp-select-panel-max-block-size);overflow-y:auto;flex-direction:column;opacity:0;transition:opacity var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing),display var(--skra-comp-select-motion-duration) allow-discrete,overlay var(--skra-comp-select-motion-duration) allow-discrete}.skra-select-listbox:popover-open{display:flex;opacity:1}@starting-style{.skra-select-listbox:popover-open{opacity:0}}@media(prefers-reduced-motion:reduce){.skra-select-trigger,.skra-select-arrow,.skra-select-listbox{transition-duration:0ms}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SkraSelect, isStandalone: true, selector: "skra-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [{ provide: SKRA_LISTBOX_PANEL, useExisting: SkraSelect }], exportAs: ["skraSelect"], usesInheritance: true, ngImport: i0, template: `
+    <button
+      #trigger
+      class="skra-select-trigger"
+      type="button"
+      role="combobox"
+      aria-haspopup="listbox"
+      [attr.id]="triggerId()"
+      [attr.popovertarget]="panelId"
+      [attr.aria-controls]="panelId"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-activedescendant]="activeOptionId()"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-invalid]="hasError() ? 'true' : null"
+      [attr.aria-required]="isRequired() ? 'true' : null"
+      [attr.aria-readonly]="isReadonly() ? 'true' : null"
+      [disabled]="isDisabled()"
+      (click)="onTriggerClick($event)"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      <span class="skra-select-trigger-value">
+        @if (triggerTemplate(); as tpl) {
+          <ng-container
+            [ngTemplateOutlet]="tpl"
+            [ngTemplateOutletContext]="triggerContext()"
+          ></ng-container>
+        } @else if (selectedOption(); as opt) {
+          {{ opt.getLabel() }}
+        } @else {
+          <span class="skra-select-placeholder">{{ placeholder() }}</span>
+        }
+      </span>
+      <span class="skra-select-arrow" aria-hidden="true"></span>
+    </button>
+
+    <div
+      #panel
+      class="skra-select-listbox"
+      [id]="panelId"
+      role="listbox"
+      popover="auto"
+      (toggle)="onPanelToggle($event)"
+    >
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box;margin:0}.skra-select-trigger{display:flex;align-items:center;gap:var(--skra-comp-select-gap);inline-size:100%;min-block-size:var(--skra-comp-select-min-block-size);box-sizing:border-box;margin:0;padding-block:var(--skra-comp-select-padding-block);padding-inline:var(--skra-comp-select-padding-inline);text-align:start;cursor:pointer;background:var(--skra-comp-select-background);color:var(--skra-comp-select-foreground);border-color:var(--skra-comp-select-border-color);border-width:var(--skra-comp-select-border-width);border-style:var(--skra-comp-select-border-style);border-radius:var(--skra-comp-select-radius);box-shadow:var(--skra-comp-select-shadow);font-family:var(--skra-sys-typography-role-body-medium-font-family);font-size:var(--skra-sys-typography-role-body-medium-font-size);font-weight:var(--skra-sys-typography-role-body-medium-font-weight);line-height:var(--skra-sys-typography-role-body-medium-line-height);letter-spacing:var(--skra-sys-typography-role-body-medium-letter-spacing);transition:background-color var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing),border-color var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing)}@media(hover:hover)and (pointer:fine){.skra-select-trigger:hover:not(:disabled):not([aria-readonly=true]){background:var(--skra-comp-select-background-hover)}}.skra-select-trigger:focus-visible{outline:var(--skra-comp-select-focus-ring-width) solid var(--skra-comp-select-focus-ring-color);outline-offset:.125rem}.skra-select-trigger:disabled{background:var(--skra-comp-select-background-disabled);color:var(--skra-comp-select-foreground-disabled);cursor:not-allowed}.skra-select-trigger[aria-readonly=true]{background:var(--skra-comp-select-background-readonly);cursor:default}.skra-select-trigger[aria-invalid=true]{border-color:var(--skra-comp-select-border-color-validation-invalid)}.skra-select-trigger-value{flex:1 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--skra-comp-icon-size: var(--skra-comp-select-icon-size)}.skra-select-placeholder{color:var(--skra-comp-select-foreground-disabled)}.skra-select-arrow{flex:none;inline-size:var(--skra-comp-select-arrow-icon-size);block-size:var(--skra-comp-select-arrow-icon-size);background-color:var(--skra-comp-select-arrow-color);mask:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%209l6%206%206-6'%20fill='none'%20stroke='%23000'%20stroke-width='2'/%3E%3C/svg%3E\") no-repeat center/contain;-webkit-mask:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%209l6%206%206-6'%20fill='none'%20stroke='%23000'%20stroke-width='2'/%3E%3C/svg%3E\") no-repeat center/contain;transition:transform var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing)}.skra-select-trigger[aria-expanded=true] .skra-select-arrow{transform:rotate(180deg)}.skra-select-listbox{position:fixed;margin:0;inset:auto;box-sizing:border-box;padding-block:var(--skra-comp-select-panel-padding-block);padding-inline:var(--skra-comp-select-panel-padding-inline);background:var(--skra-comp-select-panel-background);color:var(--skra-comp-select-panel-foreground);border:var(--skra-comp-select-border-width) solid var(--skra-comp-select-panel-border-color);border-radius:var(--skra-comp-select-panel-radius);box-shadow:var(--skra-comp-select-panel-shadow);inline-size:max-content;max-block-size:var(--skra-comp-select-panel-max-block-size);overflow-y:auto;flex-direction:column;opacity:0;transition:opacity var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing),display var(--skra-comp-select-motion-duration) allow-discrete,overlay var(--skra-comp-select-motion-duration) allow-discrete}.skra-select-listbox:popover-open{display:flex;opacity:1}@starting-style{.skra-select-listbox:popover-open{opacity:0}}@media(prefers-reduced-motion:reduce){.skra-select-trigger,.skra-select-arrow,.skra-select-listbox{transition-duration:0ms}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'skra-select', standalone: true, exportAs: 'skraSelect', imports: [NgTemplateOutlet], template: `
-    <button
-      #trigger
-      class="skra-select-trigger"
-      type="button"
-      role="combobox"
-      aria-haspopup="listbox"
-      [attr.id]="triggerId()"
-      [attr.popovertarget]="panelId"
-      [attr.aria-controls]="panelId"
-      [attr.aria-expanded]="isOpen()"
-      [attr.aria-activedescendant]="activeOptionId()"
-      [attr.aria-describedby]="describedBy()"
-      [attr.aria-invalid]="hasError() ? 'true' : null"
-      [attr.aria-required]="isRequired() ? 'true' : null"
-      [attr.aria-readonly]="isReadonly() ? 'true' : null"
-      [disabled]="isDisabled()"
-      (click)="onTriggerClick($event)"
-      (keydown)="onTriggerKeydown($event)"
-    >
-      <span class="skra-select-trigger-value">
-        @if (triggerTemplate(); as tpl) {
-          <ng-container
-            [ngTemplateOutlet]="tpl"
-            [ngTemplateOutletContext]="triggerContext()"
-          ></ng-container>
-        } @else if (selectedOption(); as opt) {
-          {{ opt.getLabel() }}
-        } @else {
-          <span class="skra-select-placeholder">{{ placeholder() }}</span>
-        }
-      </span>
-      <span class="skra-select-arrow" aria-hidden="true"></span>
-    </button>
-
-    <div
-      #panel
-      class="skra-select-listbox"
-      [id]="panelId"
-      role="listbox"
-      popover="auto"
-      (toggle)="onPanelToggle($event)"
-    >
-      <ng-content></ng-content>
-    </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, providers: [{ provide: SKRA_LISTBOX_PANEL, useExisting: SkraSelect }], styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box;margin:0}.skra-select-trigger{display:flex;align-items:center;gap:var(--skra-comp-select-gap);inline-size:100%;min-block-size:var(--skra-comp-select-min-block-size);box-sizing:border-box;margin:0;padding-block:var(--skra-comp-select-padding-block);padding-inline:var(--skra-comp-select-padding-inline);text-align:start;cursor:pointer;background:var(--skra-comp-select-background);color:var(--skra-comp-select-foreground);border-color:var(--skra-comp-select-border-color);border-width:var(--skra-comp-select-border-width);border-style:var(--skra-comp-select-border-style);border-radius:var(--skra-comp-select-radius);box-shadow:var(--skra-comp-select-shadow);font-family:var(--skra-sys-typography-role-body-medium-font-family);font-size:var(--skra-sys-typography-role-body-medium-font-size);font-weight:var(--skra-sys-typography-role-body-medium-font-weight);line-height:var(--skra-sys-typography-role-body-medium-line-height);letter-spacing:var(--skra-sys-typography-role-body-medium-letter-spacing);transition:background-color var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing),border-color var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing)}.skra-select-trigger:hover:not(:disabled):not([aria-readonly=true]){background:var(--skra-comp-select-background-hover)}.skra-select-trigger:focus-visible{outline:var(--skra-comp-select-focus-ring-width) solid var(--skra-comp-select-focus-ring-color);outline-offset:.125rem}.skra-select-trigger:disabled{background:var(--skra-comp-select-background-disabled);color:var(--skra-comp-select-foreground-disabled);cursor:not-allowed}.skra-select-trigger[aria-readonly=true]{background:var(--skra-comp-select-background-readonly);cursor:default}.skra-select-trigger[aria-invalid=true]{border-color:var(--skra-comp-select-border-color-validation-invalid)}.skra-select-trigger-value{flex:1 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--skra-comp-icon-size: var(--skra-comp-select-icon-size)}.skra-select-placeholder{color:var(--skra-comp-select-foreground-disabled)}.skra-select-arrow{flex:none;inline-size:var(--skra-comp-select-arrow-icon-size);block-size:var(--skra-comp-select-arrow-icon-size);background-color:var(--skra-comp-select-arrow-color);mask:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%209l6%206%206-6'%20fill='none'%20stroke='%23000'%20stroke-width='2'/%3E%3C/svg%3E\") no-repeat center/contain;-webkit-mask:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%209l6%206%206-6'%20fill='none'%20stroke='%23000'%20stroke-width='2'/%3E%3C/svg%3E\") no-repeat center/contain;transition:transform var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing)}.skra-select-trigger[aria-expanded=true] .skra-select-arrow{transform:rotate(180deg)}.skra-select-listbox{position:fixed;margin:0;inset:auto;box-sizing:border-box;padding-block:var(--skra-comp-select-panel-padding-block);padding-inline:var(--skra-comp-select-panel-padding-inline);background:var(--skra-comp-select-panel-background);color:var(--skra-comp-select-panel-foreground);border:var(--skra-comp-select-border-width) solid var(--skra-comp-select-panel-border-color);border-radius:var(--skra-comp-select-panel-radius);box-shadow:var(--skra-comp-select-panel-shadow);inline-size:max-content;max-block-size:var(--skra-comp-select-panel-max-block-size);overflow-y:auto;flex-direction:column;opacity:0;transition:opacity var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing),display var(--skra-comp-select-motion-duration) allow-discrete,overlay var(--skra-comp-select-motion-duration) allow-discrete}.skra-select-listbox:popover-open{display:flex;opacity:1}@starting-style{.skra-select-listbox:popover-open{opacity:0}}@media(prefers-reduced-motion:reduce){.skra-select-trigger,.skra-select-arrow,.skra-select-listbox{transition-duration:0ms}}\n"] }]
+            args: [{ selector: 'skra-select', standalone: true, exportAs: 'skraSelect', imports: [NgTemplateOutlet], template: `
+    <button
+      #trigger
+      class="skra-select-trigger"
+      type="button"
+      role="combobox"
+      aria-haspopup="listbox"
+      [attr.id]="triggerId()"
+      [attr.popovertarget]="panelId"
+      [attr.aria-controls]="panelId"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-activedescendant]="activeOptionId()"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-invalid]="hasError() ? 'true' : null"
+      [attr.aria-required]="isRequired() ? 'true' : null"
+      [attr.aria-readonly]="isReadonly() ? 'true' : null"
+      [disabled]="isDisabled()"
+      (click)="onTriggerClick($event)"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      <span class="skra-select-trigger-value">
+        @if (triggerTemplate(); as tpl) {
+          <ng-container
+            [ngTemplateOutlet]="tpl"
+            [ngTemplateOutletContext]="triggerContext()"
+          ></ng-container>
+        } @else if (selectedOption(); as opt) {
+          {{ opt.getLabel() }}
+        } @else {
+          <span class="skra-select-placeholder">{{ placeholder() }}</span>
+        }
+      </span>
+      <span class="skra-select-arrow" aria-hidden="true"></span>
+    </button>
+
+    <div
+      #panel
+      class="skra-select-listbox"
+      [id]="panelId"
+      role="listbox"
+      popover="auto"
+      (toggle)="onPanelToggle($event)"
+    >
+      <ng-content></ng-content>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, providers: [{ provide: SKRA_LISTBOX_PANEL, useExisting: SkraSelect }], styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box;margin:0}.skra-select-trigger{display:flex;align-items:center;gap:var(--skra-comp-select-gap);inline-size:100%;min-block-size:var(--skra-comp-select-min-block-size);box-sizing:border-box;margin:0;padding-block:var(--skra-comp-select-padding-block);padding-inline:var(--skra-comp-select-padding-inline);text-align:start;cursor:pointer;background:var(--skra-comp-select-background);color:var(--skra-comp-select-foreground);border-color:var(--skra-comp-select-border-color);border-width:var(--skra-comp-select-border-width);border-style:var(--skra-comp-select-border-style);border-radius:var(--skra-comp-select-radius);box-shadow:var(--skra-comp-select-shadow);font-family:var(--skra-sys-typography-role-body-medium-font-family);font-size:var(--skra-sys-typography-role-body-medium-font-size);font-weight:var(--skra-sys-typography-role-body-medium-font-weight);line-height:var(--skra-sys-typography-role-body-medium-line-height);letter-spacing:var(--skra-sys-typography-role-body-medium-letter-spacing);transition:background-color var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing),border-color var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing)}@media(hover:hover)and (pointer:fine){.skra-select-trigger:hover:not(:disabled):not([aria-readonly=true]){background:var(--skra-comp-select-background-hover)}}.skra-select-trigger:focus-visible{outline:var(--skra-comp-select-focus-ring-width) solid var(--skra-comp-select-focus-ring-color);outline-offset:.125rem}.skra-select-trigger:disabled{background:var(--skra-comp-select-background-disabled);color:var(--skra-comp-select-foreground-disabled);cursor:not-allowed}.skra-select-trigger[aria-readonly=true]{background:var(--skra-comp-select-background-readonly);cursor:default}.skra-select-trigger[aria-invalid=true]{border-color:var(--skra-comp-select-border-color-validation-invalid)}.skra-select-trigger-value{flex:1 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--skra-comp-icon-size: var(--skra-comp-select-icon-size)}.skra-select-placeholder{color:var(--skra-comp-select-foreground-disabled)}.skra-select-arrow{flex:none;inline-size:var(--skra-comp-select-arrow-icon-size);block-size:var(--skra-comp-select-arrow-icon-size);background-color:var(--skra-comp-select-arrow-color);mask:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%209l6%206%206-6'%20fill='none'%20stroke='%23000'%20stroke-width='2'/%3E%3C/svg%3E\") no-repeat center/contain;-webkit-mask:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%209l6%206%206-6'%20fill='none'%20stroke='%23000'%20stroke-width='2'/%3E%3C/svg%3E\") no-repeat center/contain;transition:transform var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing)}.skra-select-trigger[aria-expanded=true] .skra-select-arrow{transform:rotate(180deg)}.skra-select-listbox{position:fixed;margin:0;inset:auto;box-sizing:border-box;padding-block:var(--skra-comp-select-panel-padding-block);padding-inline:var(--skra-comp-select-panel-padding-inline);background:var(--skra-comp-select-panel-background);color:var(--skra-comp-select-panel-foreground);border:var(--skra-comp-select-border-width) solid var(--skra-comp-select-panel-border-color);border-radius:var(--skra-comp-select-panel-radius);box-shadow:var(--skra-comp-select-panel-shadow);inline-size:max-content;max-block-size:var(--skra-comp-select-panel-max-block-size);overflow-y:auto;flex-direction:column;opacity:0;transition:opacity var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing),display var(--skra-comp-select-motion-duration) allow-discrete,overlay var(--skra-comp-select-motion-duration) allow-discrete}.skra-select-listbox:popover-open{display:flex;opacity:1}@starting-style{.skra-select-listbox:popover-open{opacity:0}}@media(prefers-reduced-motion:reduce){.skra-select-trigger,.skra-select-arrow,.skra-select-listbox{transition-duration:0ms}}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 /**

package/fesm2022/skra-ui-select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"skra-ui-select.mjs","sources":["../../../../libs/ui/select/src/lib/select/select.ts","../../../../libs/ui/select/src/skra-ui-select.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ViewEncapsulation,\r\n  computed,\r\n  input,\r\n  output,\r\n} from '@angular/core';\r\n\r\nimport { _SkraSelectBase } from '@skra/ui/core';\r\nimport {\r\n  SKRA_LISTBOX_PANEL,\r\n  type SkraListboxKeyboardItem,\r\n} from '@skra/ui/core';\r\n\r\n/**\r\n * SkraSelect — a custom single-select listbox: the WAI-ARIA APG **Select-Only Combobox** pattern. A\r\n * value-display **trigger** (`role=\"combobox\"`) opens a top-layer **listbox** panel (Popover API,\r\n * `popover=\"auto\"`, ADR 0044) of projected `skra-option` children. The thin single-select concrete\r\n * over `_SkraSelectBase` (ADR 0046 — cardinality split): it adds the honest `value: T` channel + the\r\n * replace-and-close selection model; everything else (overlay/keyboard/field substrate) lives in the\r\n * shared base, shared verbatim with `skra-multi-select`.\r\n *\r\n * - **Value (ADR 037):** `value` is a consumer-owned `input<T>()` + `valueChange` output — NO\r\n *   `@angular/forms`, no CVA. Selection is signal-derived; equality is a strategy seam (`Object.is`\r\n *   default + opt-in `compareWith`).\r\n * - **Trigger content (ADR 0045):** default = the selected option's `getLabel()` text (emoji/glyph\r\n *   leading free); rich non-text triggers opt in via `<ng-template skraSelectTrigger>`.\r\n *\r\n * Full contract: adr/specs/component-select-spec.md.\r\n */\r\n@Component({\r\n  selector: 'skra-select',\r\n  standalone: true,\r\n  exportAs: 'skraSelect',\r\n  imports: [NgTemplateOutlet],\r\n  template: `\r\n    <button\r\n      #trigger\r\n      class=\"skra-select-trigger\"\r\n      type=\"button\"\r\n      role=\"combobox\"\r\n      aria-haspopup=\"listbox\"\r\n      [attr.id]=\"triggerId()\"\r\n      [attr.popovertarget]=\"panelId\"\r\n      [attr.aria-controls]=\"panelId\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-activedescendant]=\"activeOptionId()\"\r\n      [attr.aria-describedby]=\"describedBy()\"\r\n      [attr.aria-invalid]=\"hasError() ? 'true' : null\"\r\n      [attr.aria-required]=\"isRequired() ? 'true' : null\"\r\n      [attr.aria-readonly]=\"isReadonly() ? 'true' : null\"\r\n      [disabled]=\"isDisabled()\"\r\n      (click)=\"onTriggerClick($event)\"\r\n      (keydown)=\"onTriggerKeydown($event)\"\r\n    >\r\n      <span class=\"skra-select-trigger-value\">\r\n        @if (triggerTemplate(); as tpl) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"tpl\"\r\n            [ngTemplateOutletContext]=\"triggerContext()\"\r\n          ></ng-container>\r\n        } @else if (selectedOption(); as opt) {\r\n          {{ opt.getLabel() }}\r\n        } @else {\r\n          <span class=\"skra-select-placeholder\">{{ placeholder() }}</span>\r\n        }\r\n      </span>\r\n      <span class=\"skra-select-arrow\" aria-hidden=\"true\"></span>\r\n    </button>\r\n\r\n    <div\r\n      #panel\r\n      class=\"skra-select-listbox\"\r\n      [id]=\"panelId\"\r\n      role=\"listbox\"\r\n      popover=\"auto\"\r\n      (toggle)=\"onPanelToggle($event)\"\r\n    >\r\n      <ng-content></ng-content>\r\n    </div>\r\n  `,\r\n  styleUrl: './select.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n  providers: [{ provide: SKRA_LISTBOX_PANEL, useExisting: SkraSelect }],\r\n})\r\nexport class SkraSelect<T = unknown> extends _SkraSelectBase<T> {\r\n  /** Consumer-owned value channel (ADR 037). */\r\n  readonly value = input<T>();\r\n  /** Fires ONLY on user selection — never on a programmatic `value()` change (ADR 037). */\r\n  readonly valueChange = output<T>();\r\n  /** Cardinality hint (ADR 0046) — single-select. */\r\n  readonly multiple = false;\r\n\r\n  /** The option whose value matches `value()` (ADR 037 selection model) — feeds the trigger. */\r\n  protected readonly selectedOption = computed(\r\n    () => this.options().find((o) => this.isSelected(o.value())) ?? null,\r\n  );\r\n\r\n  protected readonly triggerContext = computed(() => ({\r\n    $implicit: this.value(),\r\n    option: this.selectedOption(),\r\n  }));\r\n\r\n  // ── SkraListboxPanel seam ──\r\n  isSelected(value: unknown): boolean {\r\n    const current = this.value();\r\n    return current !== undefined && this.compareWith()(current, value as T);\r\n  }\r\n\r\n  selectValue(value: unknown): void {\r\n    this.valueChange.emit(value as T);\r\n    this.close(); // single-select: pick + close\r\n  }\r\n\r\n  protected activeSeedItem(): SkraListboxKeyboardItem | null {\r\n    return this.selectedOption();\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAgBA;;;;;;;;;;;;;;;AAeG;AAyDG,MAAO,UAAwB,SAAQ,eAAkB,CAAA;;AAEpD,IAAA,KAAK,GAAG,KAAK;yFAAK;;IAElB,WAAW,GAAG,MAAM,EAAK;;IAEzB,QAAQ,GAAG,KAAK;;AAGN,IAAA,cAAc,GAAG,QAAQ,CAC1C,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,IAAI,IAAI;uFACrE;AAEkB,IAAA,cAAc,GAAG,QAAQ,CAAC,OAAO;AAClD,QAAA,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE;AACvB,QAAA,MAAM,EAAE,IAAI,CAAC,cAAc,EAAE;KAC9B,CAAC;uFAAC;;AAGH,IAAA,UAAU,CAAC,KAAc,EAAA;AACvB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,EAAE;AAC5B,QAAA,OAAO,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,EAAE,KAAU,CAAC;IACzE;AAEA,IAAA,WAAW,CAAC,KAAc,EAAA;AACxB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAU,CAAC;AACjC,QAAA,IAAI,CAAC,KAAK,EAAE,CAAC;IACf;IAEU,cAAc,GAAA;AACtB,QAAA,OAAO,IAAI,CAAC,cAAc,EAAE;IAC9B;uGA/BW,UAAU,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,SAAA,EAFV,CAAC,EAAE,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAjD3D,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,g/HAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EA9CS,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAoDf,UAAU,EAAA,UAAA,EAAA,CAAA;kBAxDtB,SAAS;+BACE,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,QAAA,EACN,YAAY,WACb,CAAC,gBAAgB,CAAC,EAAA,QAAA,EACjB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CT,EAAA,CAAA,EAAA,eAAA,EAEgB,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,QAAQ,EAAA,SAAA,EAC9B,CAAC,EAAE,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAA,UAAY,EAAE,CAAC,EAAA,MAAA,EAAA,CAAA,g/HAAA,CAAA,EAAA;;;ACtFvE;;AAEG;;;;"}
+{"version":3,"file":"skra-ui-select.mjs","sources":["../../../../libs/ui/select/src/lib/select/select.ts","../../../../libs/ui/select/src/skra-ui-select.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n  output,\n} from '@angular/core';\n\nimport { _SkraSelectBase } from '@skra/ui/core';\nimport {\n  SKRA_LISTBOX_PANEL,\n  type SkraListboxKeyboardItem,\n} from '@skra/ui/core';\n\n/**\n * SkraSelect — a custom single-select listbox: the WAI-ARIA APG **Select-Only Combobox** pattern. A\n * value-display **trigger** (`role=\"combobox\"`) opens a top-layer **listbox** panel (Popover API,\n * `popover=\"auto\"`, ADR 0044) of projected `skra-option` children. The thin single-select concrete\n * over `_SkraSelectBase` (ADR 0046 — cardinality split): it adds the honest `value: T` channel + the\n * replace-and-close selection model; everything else (overlay/keyboard/field substrate) lives in the\n * shared base, shared verbatim with `skra-multi-select`.\n *\n * - **Value (ADR 037):** `value` is a consumer-owned `input<T>()` + `valueChange` output — NO\n *   `@angular/forms`, no CVA. Selection is signal-derived; equality is a strategy seam (`Object.is`\n *   default + opt-in `compareWith`).\n * - **Trigger content (ADR 0045):** default = the selected option's `getLabel()` text (emoji/glyph\n *   leading free); rich non-text triggers opt in via `<ng-template skraSelectTrigger>`.\n *\n * Full contract: adr/specs/component-select-spec.md.\n */\n@Component({\n  selector: 'skra-select',\n  standalone: true,\n  exportAs: 'skraSelect',\n  imports: [NgTemplateOutlet],\n  template: `\n    <button\n      #trigger\n      class=\"skra-select-trigger\"\n      type=\"button\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      [attr.id]=\"triggerId()\"\n      [attr.popovertarget]=\"panelId\"\n      [attr.aria-controls]=\"panelId\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-activedescendant]=\"activeOptionId()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n      [attr.aria-required]=\"isRequired() ? 'true' : null\"\n      [attr.aria-readonly]=\"isReadonly() ? 'true' : null\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onTriggerClick($event)\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    >\n      <span class=\"skra-select-trigger-value\">\n        @if (triggerTemplate(); as tpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"tpl\"\n            [ngTemplateOutletContext]=\"triggerContext()\"\n          ></ng-container>\n        } @else if (selectedOption(); as opt) {\n          {{ opt.getLabel() }}\n        } @else {\n          <span class=\"skra-select-placeholder\">{{ placeholder() }}</span>\n        }\n      </span>\n      <span class=\"skra-select-arrow\" aria-hidden=\"true\"></span>\n    </button>\n\n    <div\n      #panel\n      class=\"skra-select-listbox\"\n      [id]=\"panelId\"\n      role=\"listbox\"\n      popover=\"auto\"\n      (toggle)=\"onPanelToggle($event)\"\n    >\n      <ng-content></ng-content>\n    </div>\n  `,\n  styleUrl: './select.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  providers: [{ provide: SKRA_LISTBOX_PANEL, useExisting: SkraSelect }],\n})\nexport class SkraSelect<T = unknown> extends _SkraSelectBase<T> {\n  /** Consumer-owned value channel (ADR 037). */\n  readonly value = input<T>();\n  /** Fires ONLY on user selection — never on a programmatic `value()` change (ADR 037). */\n  readonly valueChange = output<T>();\n  /** Cardinality hint (ADR 0046) — single-select. */\n  readonly multiple = false;\n\n  /** The option whose value matches `value()` (ADR 037 selection model) — feeds the trigger. */\n  protected readonly selectedOption = computed(\n    () => this.options().find((o) => this.isSelected(o.value())) ?? null,\n  );\n\n  protected readonly triggerContext = computed(() => ({\n    $implicit: this.value(),\n    option: this.selectedOption(),\n  }));\n\n  // ── SkraListboxPanel seam ──\n  isSelected(value: unknown): boolean {\n    const current = this.value();\n    return current !== undefined && this.compareWith()(current, value as T);\n  }\n\n  selectValue(value: unknown): void {\n    this.valueChange.emit(value as T);\n    this.close(); // single-select: pick + close\n  }\n\n  protected activeSeedItem(): SkraListboxKeyboardItem | null {\n    return this.selectedOption();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/skra-ui-skeleton.mjs

@@ -40,18 +40,18 @@ class SkraSkeleton {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SkraSkeleton, isStandalone: true, selector: "skra-skeleton", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-skra-shape": "shape()" } }, ngImport: i0, template: `
-    @for (bar of bars(); track bar) {
-      <span class="skra-skeleton__bar"></span>
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SkraSkeleton, isStandalone: true, selector: "skra-skeleton", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-skra-shape": "shape()" } }, ngImport: i0, template: `
+    @for (bar of bars(); track bar) {
+      <span class="skra-skeleton__bar"></span>
+    }
   `, isInline: true, styles: [":host{display:block;inline-size:100%;margin:0}:host([data-skra-shape=text]){display:flex;flex-direction:column;gap:.5em}:host([data-skra-shape=block]),:host([data-skra-shape=circle]){block-size:100%}.skra-skeleton__bar{display:block;background-color:var(--skra-comp-skeleton-background);border-width:var(--skra-comp-skeleton-border-width);border-style:var(--skra-comp-skeleton-border-style);border-color:var(--skra-comp-skeleton-border-color);border-radius:var(--skra-comp-skeleton-radius);animation:skra-skeleton-pulse 1.4s var(--skra-comp-skeleton-motion-easing) infinite}:host([data-skra-shape=text]) .skra-skeleton__bar{block-size:.7em;inline-size:100%}:host([data-skra-shape=text]) .skra-skeleton__bar:last-child:not(:only-child){inline-size:60%}:host([data-skra-shape=block]) .skra-skeleton__bar,:host([data-skra-shape=circle]) .skra-skeleton__bar{block-size:100%;inline-size:100%}:host([data-skra-shape=circle]) .skra-skeleton__bar{border-radius:50%}@keyframes skra-skeleton-pulse{0%,to{opacity:1}50%{opacity:.7}}@media(prefers-reduced-motion:reduce){.skra-skeleton__bar{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraSkeleton, decorators: [{
             type: Component,
-            args: [{ selector: 'skra-skeleton', standalone: true, template: `
-    @for (bar of bars(); track bar) {
-      <span class="skra-skeleton__bar"></span>
-    }
+            args: [{ selector: 'skra-skeleton', standalone: true, template: `
+    @for (bar of bars(); track bar) {
+      <span class="skra-skeleton__bar"></span>
+    }
   `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
                         // Decorative — kept out of the accessibility tree (ADR 033 decorative exemption).
                         'aria-hidden': 'true',

package/fesm2022/skra-ui-skeleton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"skra-ui-skeleton.mjs","sources":["../../../../libs/ui/skeleton/src/lib/skeleton/skeleton.ts","../../../../libs/ui/skeleton/src/skra-ui-skeleton.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ViewEncapsulation,\r\n  computed,\r\n  input,\r\n} from '@angular/core';\r\n\r\nexport type SkraSkeletonShape = 'text' | 'block' | 'circle';\r\n\r\n/**\r\n * `<skra-skeleton>` — a decorative content placeholder (Wave 2, `libs/ui/indicators`).\r\n * Occupies the place of not-yet-loaded content with an animated, layout-shaped placeholder so\r\n * the layout does not shift on load (CLS) and the user perceives that content is coming.\r\n *\r\n * Third resident of the loading family, with a distinct SRP: `[skraLoadingIndicator]` (ADR 028)\r\n * is the *indeterminate* \"host is busy\" spinner; `SkraProgress` is the *determinate* \"task is\r\n * N% complete\" bar; **SkraSkeleton is the *content placeholder*** (\"the content hasn't arrived —\r\n * here is its shape\"). See `adr/specs/component-skeleton-spec.md` § SRP boundary.\r\n *\r\n * **A custom element, NOT a Component-on-native-host** (ADR 040): a skeleton has no semantic\r\n * native equivalent and is purely presentational, so it follows the custom-element atom model\r\n * (Badge/Chip/Alert precedent). The host is a layout container that renders its own inner\r\n * `.skra-skeleton__bar` element(s) — which is why a void-host directive was rejected: the\r\n * multi-line `text` shape needs internal structure.\r\n *\r\n * **Decorative a11y (ADR 033):** the host is `aria-hidden=\"true\"` — a skeleton conveys no\r\n * information to assistive tech (the decorative-icon exemption). The \"loading\" announcement\r\n * belongs to the consumer's content **container** (`aria-busy=\"true\"`), never to the skeleton.\r\n *\r\n * **Sizing is container/`em`-driven (ADR 021 — the CSP reason there are no `width`/`height`\r\n * inputs):** `text` line bars are `em`-relative (they inherit the surrounding font-size) at full\r\n * container width; `block`/`circle` fill a host the **consumer** sizes (e.g. via `[skraBox]`).\r\n * The host therefore never carries an inline `style`. State Surface all-N/A (non-interactive).\r\n */\r\n@Component({\r\n  selector: 'skra-skeleton',\r\n  standalone: true,\r\n  template: `\r\n    @for (bar of bars(); track bar) {\r\n      <span class=\"skra-skeleton__bar\"></span>\r\n    }\r\n  `,\r\n  styleUrl: './skeleton.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n  host: {\r\n    // Decorative — kept out of the accessibility tree (ADR 033 decorative exemption).\r\n    'aria-hidden': 'true',\r\n    // Structural variant for CSP-safe SCSS branching (a variant, not an ADR 027 state).\r\n    '[attr.data-skra-shape]': 'shape()',\r\n  },\r\n})\r\nexport class SkraSkeleton {\r\n  /** The kind of content faked — selects placeholder geometry, never colour/theme (not a look-input). */\r\n  readonly shape = input<SkraSkeletonShape>('text');\r\n\r\n  /** `text` only — number of line bars (multi-line paragraph). Ignored for `block`/`circle`. */\r\n  readonly lines = input<number>(1);\r\n\r\n  /** The bars to render: `lines` bars for text (≥1), a single bar for block/circle. */\r\n  protected readonly bars = computed(() => {\r\n    const count =\r\n      this.shape() === 'text' ? Math.max(1, Math.floor(this.lines())) : 1;\r\n    return Array.from({ length: count }, (_, i) => i);\r\n  });\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAUA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;MAmBU,YAAY,CAAA;;IAEd,KAAK,GAAG,KAAK,CAAoB,MAAM;8EAAC;;IAGxC,KAAK,GAAG,KAAK,CAAS,CAAC;8EAAC;;AAGd,IAAA,IAAI,GAAG,QAAQ,CAAC,MAAK;AACtC,QAAA,MAAM,KAAK,GACT,IAAI,CAAC,KAAK,EAAE,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC;AACrE,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IACnD,CAAC;6EAAC;uGAZS,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,EAAA,sBAAA,EAAA,SAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAfb,CAAA;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0kCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAWU,YAAY,EAAA,UAAA,EAAA,CAAA;kBAlBxB,SAAS;+BACE,eAAe,EAAA,UAAA,EACb,IAAI,EAAA,QAAA,EACN,CAAA;;;;AAIT,EAAA,CAAA,EAAA,eAAA,EAEgB,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,QAAQ,EAAA,IAAA,EACnC;;AAEJ,wBAAA,aAAa,EAAE,MAAM;;AAErB,wBAAA,wBAAwB,EAAE,SAAS;AACpC,qBAAA,EAAA,MAAA,EAAA,CAAA,0kCAAA,CAAA,EAAA;;;ACnDH;;AAEG;;;;"}
+{"version":3,"file":"skra-ui-skeleton.mjs","sources":["../../../../libs/ui/skeleton/src/lib/skeleton/skeleton.ts","../../../../libs/ui/skeleton/src/skra-ui-skeleton.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n} from '@angular/core';\n\nexport type SkraSkeletonShape = 'text' | 'block' | 'circle';\n\n/**\n * `<skra-skeleton>` — a decorative content placeholder (Wave 2, `libs/ui/indicators`).\n * Occupies the place of not-yet-loaded content with an animated, layout-shaped placeholder so\n * the layout does not shift on load (CLS) and the user perceives that content is coming.\n *\n * Third resident of the loading family, with a distinct SRP: `[skraLoadingIndicator]` (ADR 028)\n * is the *indeterminate* \"host is busy\" spinner; `SkraProgress` is the *determinate* \"task is\n * N% complete\" bar; **SkraSkeleton is the *content placeholder*** (\"the content hasn't arrived —\n * here is its shape\"). See `adr/specs/component-skeleton-spec.md` § SRP boundary.\n *\n * **A custom element, NOT a Component-on-native-host** (ADR 040): a skeleton has no semantic\n * native equivalent and is purely presentational, so it follows the custom-element atom model\n * (Badge/Chip/Alert precedent). The host is a layout container that renders its own inner\n * `.skra-skeleton__bar` element(s) — which is why a void-host directive was rejected: the\n * multi-line `text` shape needs internal structure.\n *\n * **Decorative a11y (ADR 033):** the host is `aria-hidden=\"true\"` — a skeleton conveys no\n * information to assistive tech (the decorative-icon exemption). The \"loading\" announcement\n * belongs to the consumer's content **container** (`aria-busy=\"true\"`), never to the skeleton.\n *\n * **Sizing is container/`em`-driven (ADR 021 — the CSP reason there are no `width`/`height`\n * inputs):** `text` line bars are `em`-relative (they inherit the surrounding font-size) at full\n * container width; `block`/`circle` fill a host the **consumer** sizes (e.g. via `[skraBox]`).\n * The host therefore never carries an inline `style`. State Surface all-N/A (non-interactive).\n */\n@Component({\n  selector: 'skra-skeleton',\n  standalone: true,\n  template: `\n    @for (bar of bars(); track bar) {\n      <span class=\"skra-skeleton__bar\"></span>\n    }\n  `,\n  styleUrl: './skeleton.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    // Decorative — kept out of the accessibility tree (ADR 033 decorative exemption).\n    'aria-hidden': 'true',\n    // Structural variant for CSP-safe SCSS branching (a variant, not an ADR 027 state).\n    '[attr.data-skra-shape]': 'shape()',\n  },\n})\nexport class SkraSkeleton {\n  /** The kind of content faked — selects placeholder geometry, never colour/theme (not a look-input). */\n  readonly shape = input<SkraSkeletonShape>('text');\n\n  /** `text` only — number of line bars (multi-line paragraph). Ignored for `block`/`circle`. */\n  readonly lines = input<number>(1);\n\n  /** The bars to render: `lines` bars for text (≥1), a single bar for block/circle. */\n  protected readonly bars = computed(() => {\n    const count =\n      this.shape() === 'text' ? Math.max(1, Math.floor(this.lines())) : 1;\n    return Array.from({ length: count }, (_, i) => i);\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAUA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;MAmBU,YAAY,CAAA;;IAEd,KAAK,GAAG,KAAK,CAAoB,MAAM;8EAAC;;IAGxC,KAAK,GAAG,KAAK,CAAS,CAAC;8EAAC;;AAGd,IAAA,IAAI,GAAG,QAAQ,CAAC,MAAK;AACtC,QAAA,MAAM,KAAK,GACT,IAAI,CAAC,KAAK,EAAE,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC;AACrE,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IACnD,CAAC;6EAAC;uGAZS,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,EAAA,sBAAA,EAAA,SAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAfb;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0kCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAWU,YAAY,EAAA,UAAA,EAAA,CAAA;kBAlBxB,SAAS;+BACE,eAAe,EAAA,UAAA,EACb,IAAI,EAAA,QAAA,EACN;;;;AAIT,EAAA,CAAA,EAAA,eAAA,EAEgB,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,QAAQ,EAAA,IAAA,EACnC;;AAEJ,wBAAA,aAAa,EAAE,MAAM;;AAErB,wBAAA,wBAAwB,EAAE,SAAS;AACpC,qBAAA,EAAA,MAAA,EAAA,CAAA,0kCAAA,CAAA,EAAA;;;ACnDH;;AAEG;;;;"}

package/fesm2022/skra-ui-star-rating.mjs

@@ -85,7 +85,7 @@ class SkraStarRating {
             event.preventDefault();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraStarRating, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SkraStarRating, isStandalone: true, selector: "skra-star-rating", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "role": "radiogroup" }, listeners: { "click": "blockWhenReadonly($event)", "keydown": "blockKeyWhenReadonly($event)" }, properties: { "attr.aria-labelledby": "context?.labelId() ?? null", "attr.aria-required": "context?.isRequired() ? \"true\" : null", "attr.aria-invalid": "context?.hasError() ? \"true\" : null", "attr.aria-readonly": "context?.isReadonly() ? \"true\" : null", "attr.aria-describedby": "context?.describedByIds() ?? null", "attr.data-skra-disabled": "isDisabled() ? \"\" : null", "attr.data-skra-size": "size()", "attr.id": "context?.fieldId() ?? null" } }, ngImport: i0, template: "@for (star of stars(); track star) {\r\n<input\r\n  type=\"radio\"\r\n  class=\"skra-star-rating-input\"\r\n  [name]=\"groupName()\"\r\n  [id]=\"groupName() + '-' + star\"\r\n  [value]=\"star\"\r\n  [checked]=\"value() === star\"\r\n  [disabled]=\"isDisabled()\"\r\n  [attr.aria-label]=\"starLabel(star)\"\r\n  (change)=\"onSelect(star)\"\r\n/>\r\n<label\r\n  class=\"skra-star-rating-star\"\r\n  [attr.for]=\"groupName() + '-' + star\"\r\n  aria-hidden=\"true\"\r\n>\r\n  <svg\r\n    class=\"skra-star-rating-glyph\"\r\n    viewBox=\"0 0 24 24\"\r\n    focusable=\"false\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <path\r\n      d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\r\n    />\r\n  </svg>\r\n</label>\r\n}\r\n", styles: [":host{margin:0;display:inline-flex;flex-direction:row-reverse;align-items:center;gap:var(--skra-comp-star-rating-gap);--_star-size: var(--skra-comp-star-rating-star-size-md)}:host([data-skra-size=sm]){--_star-size: var(--skra-comp-star-rating-star-size-sm)}:host([data-skra-size=md]){--_star-size: var(--skra-comp-star-rating-star-size-md)}:host([data-skra-size=lg]){--_star-size: var(--skra-comp-star-rating-star-size-lg)}:host([data-skra-disabled]){opacity:var(--skra-sys-opacity-disabled);cursor:not-allowed}.skra-star-rating-input{position:absolute;inline-size:1px;block-size:1px;margin:0;padding:0;opacity:0;pointer-events:none}.skra-star-rating-star{--_fill: var(--skra-comp-star-rating-star-color-empty);display:inline-flex;cursor:pointer;line-height:0;border-radius:.125rem}.skra-star-rating-glyph{inline-size:var(--_star-size);block-size:var(--_star-size);fill:var(--_fill);transition:fill var(--skra-comp-star-rating-motion-duration) var(--skra-comp-star-rating-motion-easing)}.skra-star-rating-input:checked~.skra-star-rating-star{--_fill: var(--skra-comp-star-rating-star-color-filled)}:host(:hover:not([aria-readonly=true]):not([data-skra-disabled])) .skra-star-rating-star{--_fill: var(--skra-comp-star-rating-star-color-empty)}:host(:hover:not([aria-readonly=true]):not([data-skra-disabled])) .skra-star-rating-star:hover,:host(:hover:not([aria-readonly=true]):not([data-skra-disabled])) .skra-star-rating-star:hover~.skra-star-rating-star{--_fill: var(--skra-comp-star-rating-star-color-filled)}:host([aria-readonly=true]) .skra-star-rating-star{cursor:default}.skra-star-rating-input:focus-visible+.skra-star-rating-star{outline:var(--skra-comp-star-rating-focus-ring-width) solid var(--skra-comp-star-rating-focus-ring-color);outline-offset:.125rem}@media(prefers-reduced-motion:reduce){.skra-star-rating-glyph{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SkraStarRating, isStandalone: true, selector: "skra-star-rating", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "role": "radiogroup" }, listeners: { "click": "blockWhenReadonly($event)", "keydown": "blockKeyWhenReadonly($event)" }, properties: { "attr.aria-labelledby": "context?.labelId() ?? null", "attr.aria-required": "context?.isRequired() ? \"true\" : null", "attr.aria-invalid": "context?.hasError() ? \"true\" : null", "attr.aria-readonly": "context?.isReadonly() ? \"true\" : null", "attr.aria-describedby": "context?.describedByIds() ?? null", "attr.data-skra-disabled": "isDisabled() ? \"\" : null", "attr.data-skra-size": "size()", "attr.id": "context?.fieldId() ?? null" } }, ngImport: i0, template: "@for (star of stars(); track star) {\n<input\n  type=\"radio\"\n  class=\"skra-star-rating-input\"\n  [name]=\"groupName()\"\n  [id]=\"groupName() + '-' + star\"\n  [value]=\"star\"\n  [checked]=\"value() === star\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"starLabel(star)\"\n  (change)=\"onSelect(star)\"\n/>\n<label\n  class=\"skra-star-rating-star\"\n  [attr.for]=\"groupName() + '-' + star\"\n  aria-hidden=\"true\"\n>\n  <svg\n    class=\"skra-star-rating-glyph\"\n    viewBox=\"0 0 24 24\"\n    focusable=\"false\"\n    aria-hidden=\"true\"\n  >\n    <!-- O-67 \u2014 the empty/filled difference is carried by SHAPE (WCAG 1.4.1): an outline\n         ring (same outer edge as the solid star, inner hole via evenodd) is always drawn;\n         the solid star is painted over it only in the filled state. -->\n    <path\n      class=\"skra-star-rating-outline\"\n      fill-rule=\"evenodd\"\n      d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28z\"\n    />\n    <path\n      class=\"skra-star-rating-solid\"\n      d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\n    />\n  </svg>\n</label>\n}\n", styles: [":host{margin:0;display:inline-flex;flex-direction:row-reverse;align-items:center;gap:var(--skra-comp-star-rating-gap);--_star-size: var(--skra-comp-star-rating-star-size-md)}:host([data-skra-size=sm]){--_star-size: var(--skra-comp-star-rating-star-size-sm)}:host([data-skra-size=md]){--_star-size: var(--skra-comp-star-rating-star-size-md)}:host([data-skra-size=lg]){--_star-size: var(--skra-comp-star-rating-star-size-lg)}:host([data-skra-disabled]){opacity:var(--skra-sys-opacity-disabled);cursor:not-allowed}.skra-star-rating-input{position:absolute;inline-size:1px;block-size:1px;margin:0;padding:0;opacity:0;pointer-events:none}.skra-star-rating-star{--_outline: var(--skra-comp-star-rating-star-color-empty);--_fill: transparent;display:inline-flex;cursor:pointer;line-height:0;border-radius:.125rem}.skra-star-rating-glyph{inline-size:var(--_star-size);block-size:var(--_star-size)}.skra-star-rating-outline,.skra-star-rating-solid{transition:fill var(--skra-comp-star-rating-motion-duration) var(--skra-comp-star-rating-motion-easing)}.skra-star-rating-outline{fill:var(--_outline)}.skra-star-rating-solid{fill:var(--_fill)}.skra-star-rating-input:checked~.skra-star-rating-star{--_outline: var(--skra-comp-star-rating-star-color-filled);--_fill: var(--skra-comp-star-rating-star-color-filled)}@media(hover:hover)and (pointer:fine){:host(:hover:not([aria-readonly=true]):not([data-skra-disabled])) .skra-star-rating-star{--_outline: var(--skra-comp-star-rating-star-color-empty);--_fill: transparent}:host(:hover:not([aria-readonly=true]):not([data-skra-disabled])) .skra-star-rating-star:hover,:host(:hover:not([aria-readonly=true]):not([data-skra-disabled])) .skra-star-rating-star:hover~.skra-star-rating-star{--_outline: var(--skra-comp-star-rating-star-color-filled);--_fill: var(--skra-comp-star-rating-star-color-filled)}}:host([aria-readonly=true]) .skra-star-rating-star{cursor:default}.skra-star-rating-input:focus-visible+.skra-star-rating-star{outline:var(--skra-comp-star-rating-focus-ring-width) solid var(--skra-comp-star-rating-focus-ring-color);outline-offset:.125rem}@media(prefers-reduced-motion:reduce){.skra-star-rating-outline,.skra-star-rating-solid{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraStarRating, decorators: [{
             type: Component,
@@ -104,7 +104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         // Blocks the toggle from pointer (click) and keyboard (arrows fire change directly).
                         '(click)': 'blockWhenReadonly($event)',
                         '(keydown)': 'blockKeyWhenReadonly($event)',
-                    }, template: "@for (star of stars(); track star) {\r\n<input\r\n  type=\"radio\"\r\n  class=\"skra-star-rating-input\"\r\n  [name]=\"groupName()\"\r\n  [id]=\"groupName() + '-' + star\"\r\n  [value]=\"star\"\r\n  [checked]=\"value() === star\"\r\n  [disabled]=\"isDisabled()\"\r\n  [attr.aria-label]=\"starLabel(star)\"\r\n  (change)=\"onSelect(star)\"\r\n/>\r\n<label\r\n  class=\"skra-star-rating-star\"\r\n  [attr.for]=\"groupName() + '-' + star\"\r\n  aria-hidden=\"true\"\r\n>\r\n  <svg\r\n    class=\"skra-star-rating-glyph\"\r\n    viewBox=\"0 0 24 24\"\r\n    focusable=\"false\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <path\r\n      d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\r\n    />\r\n  </svg>\r\n</label>\r\n}\r\n", styles: [":host{margin:0;display:inline-flex;flex-direction:row-reverse;align-items:center;gap:var(--skra-comp-star-rating-gap);--_star-size: var(--skra-comp-star-rating-star-size-md)}:host([data-skra-size=sm]){--_star-size: var(--skra-comp-star-rating-star-size-sm)}:host([data-skra-size=md]){--_star-size: var(--skra-comp-star-rating-star-size-md)}:host([data-skra-size=lg]){--_star-size: var(--skra-comp-star-rating-star-size-lg)}:host([data-skra-disabled]){opacity:var(--skra-sys-opacity-disabled);cursor:not-allowed}.skra-star-rating-input{position:absolute;inline-size:1px;block-size:1px;margin:0;padding:0;opacity:0;pointer-events:none}.skra-star-rating-star{--_fill: var(--skra-comp-star-rating-star-color-empty);display:inline-flex;cursor:pointer;line-height:0;border-radius:.125rem}.skra-star-rating-glyph{inline-size:var(--_star-size);block-size:var(--_star-size);fill:var(--_fill);transition:fill var(--skra-comp-star-rating-motion-duration) var(--skra-comp-star-rating-motion-easing)}.skra-star-rating-input:checked~.skra-star-rating-star{--_fill: var(--skra-comp-star-rating-star-color-filled)}:host(:hover:not([aria-readonly=true]):not([data-skra-disabled])) .skra-star-rating-star{--_fill: var(--skra-comp-star-rating-star-color-empty)}:host(:hover:not([aria-readonly=true]):not([data-skra-disabled])) .skra-star-rating-star:hover,:host(:hover:not([aria-readonly=true]):not([data-skra-disabled])) .skra-star-rating-star:hover~.skra-star-rating-star{--_fill: var(--skra-comp-star-rating-star-color-filled)}:host([aria-readonly=true]) .skra-star-rating-star{cursor:default}.skra-star-rating-input:focus-visible+.skra-star-rating-star{outline:var(--skra-comp-star-rating-focus-ring-width) solid var(--skra-comp-star-rating-focus-ring-color);outline-offset:.125rem}@media(prefers-reduced-motion:reduce){.skra-star-rating-glyph{transition:none}}\n"] }]
+                    }, template: "@for (star of stars(); track star) {\n<input\n  type=\"radio\"\n  class=\"skra-star-rating-input\"\n  [name]=\"groupName()\"\n  [id]=\"groupName() + '-' + star\"\n  [value]=\"star\"\n  [checked]=\"value() === star\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"starLabel(star)\"\n  (change)=\"onSelect(star)\"\n/>\n<label\n  class=\"skra-star-rating-star\"\n  [attr.for]=\"groupName() + '-' + star\"\n  aria-hidden=\"true\"\n>\n  <svg\n    class=\"skra-star-rating-glyph\"\n    viewBox=\"0 0 24 24\"\n    focusable=\"false\"\n    aria-hidden=\"true\"\n  >\n    <!-- O-67 \u2014 the empty/filled difference is carried by SHAPE (WCAG 1.4.1): an outline\n         ring (same outer edge as the solid star, inner hole via evenodd) is always drawn;\n         the solid star is painted over it only in the filled state. -->\n    <path\n      class=\"skra-star-rating-outline\"\n      fill-rule=\"evenodd\"\n      d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28z\"\n    />\n    <path\n      class=\"skra-star-rating-solid\"\n      d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\n    />\n  </svg>\n</label>\n}\n", styles: [":host{margin:0;display:inline-flex;flex-direction:row-reverse;align-items:center;gap:var(--skra-comp-star-rating-gap);--_star-size: var(--skra-comp-star-rating-star-size-md)}:host([data-skra-size=sm]){--_star-size: var(--skra-comp-star-rating-star-size-sm)}:host([data-skra-size=md]){--_star-size: var(--skra-comp-star-rating-star-size-md)}:host([data-skra-size=lg]){--_star-size: var(--skra-comp-star-rating-star-size-lg)}:host([data-skra-disabled]){opacity:var(--skra-sys-opacity-disabled);cursor:not-allowed}.skra-star-rating-input{position:absolute;inline-size:1px;block-size:1px;margin:0;padding:0;opacity:0;pointer-events:none}.skra-star-rating-star{--_outline: var(--skra-comp-star-rating-star-color-empty);--_fill: transparent;display:inline-flex;cursor:pointer;line-height:0;border-radius:.125rem}.skra-star-rating-glyph{inline-size:var(--_star-size);block-size:var(--_star-size)}.skra-star-rating-outline,.skra-star-rating-solid{transition:fill var(--skra-comp-star-rating-motion-duration) var(--skra-comp-star-rating-motion-easing)}.skra-star-rating-outline{fill:var(--_outline)}.skra-star-rating-solid{fill:var(--_fill)}.skra-star-rating-input:checked~.skra-star-rating-star{--_outline: var(--skra-comp-star-rating-star-color-filled);--_fill: var(--skra-comp-star-rating-star-color-filled)}@media(hover:hover)and (pointer:fine){:host(:hover:not([aria-readonly=true]):not([data-skra-disabled])) .skra-star-rating-star{--_outline: var(--skra-comp-star-rating-star-color-empty);--_fill: transparent}:host(:hover:not([aria-readonly=true]):not([data-skra-disabled])) .skra-star-rating-star:hover,:host(:hover:not([aria-readonly=true]):not([data-skra-disabled])) .skra-star-rating-star:hover~.skra-star-rating-star{--_outline: var(--skra-comp-star-rating-star-color-filled);--_fill: var(--skra-comp-star-rating-star-color-filled)}}:host([aria-readonly=true]) .skra-star-rating-star{cursor:default}.skra-star-rating-input:focus-visible+.skra-star-rating-star{outline:var(--skra-comp-star-rating-focus-ring-width) solid var(--skra-comp-star-rating-focus-ring-color);outline-offset:.125rem}@media(prefers-reduced-motion:reduce){.skra-star-rating-outline,.skra-star-rating-solid{transition:none}}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 // APG-radiogroup composite rendered as stars (ADR 039 §7).

package/fesm2022/skra-ui-star-rating.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"skra-ui-star-rating.mjs","sources":["../../../../libs/ui/star-rating/src/lib/star-rating/star-rating.ts","../../../../libs/ui/star-rating/src/lib/star-rating/star-rating.html","../../../../libs/ui/star-rating/src/index.ts","../../../../libs/ui/star-rating/src/skra-ui-star-rating.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ViewEncapsulation,\r\n  computed,\r\n  inject,\r\n  input,\r\n  output,\r\n} from '@angular/core';\r\nimport { SkraFieldContext } from '@skra/ui/field';\r\nimport { IdGeneratorService } from '@skra/ui/field';\r\n\r\nexport type StarRatingSize = 'sm' | 'md' | 'lg';\r\n\r\n/**\r\n * `<skra-star-rating>` — a whole-star rating **input**. An APG Rating composite\r\n * (`role=\"radiogroup\"`) rendered as stars: internally N `(input[type=radio] + label)`\r\n * pairs sharing one `name`, where the label IS the star glyph (inline SVG) and the\r\n * input is sr-only but focusable.\r\n *\r\n * Governed by the **ADR 039 §7 note (2026-06-24)**: a composite widget MAY render\r\n * internal native radios — this is NOT the §3.3-forbidden `<skra-radio-group>` —\r\n * because (1) value is consumer-owned (`[value]` / `(valueChange)`, controlled-only\r\n * per ADR 037, the Tabs `[selected]` precedent — no internal value-of-record signal),\r\n * (2) there is no `SkraRadioGroupContext`, (3) it is a distinct APG composite (like\r\n * `skra-select`), not a generic radio-group wrapper. Custom element justified per\r\n * ADR 012 — there is no native single host for a rating.\r\n *\r\n *   <skra-field [hasError]=\"!form.rating()\">\r\n *     <label skraLabelFor>Rate your experience</label>\r\n *     <skra-star-rating [value]=\"form.rating()\" (valueChange)=\"form.rating.set($event)\" />\r\n *     <skra-error>Please pick a rating</skra-error>\r\n *   </skra-field>\r\n *\r\n * Keyboard is the **native radio group** (arrows move + select, wrap, single tab stop)\r\n * — ZERO CDK. The fill + hover-preview are **pure CSS** (`:checked`/`:hover` sibling\r\n * combinators) — CSP-clean (ADR 021), no `[style.--var]`, no TS for the preview. The\r\n * committed `aria-checked` is the only thing AT observes; hover-preview is visual-only.\r\n *\r\n * Optional `SkraFieldContext` (ADR 013): the radiogroup is named via `aria-labelledby`\r\n * → the field label (`SkraFieldContext.labelId`, since a radiogroup is not labelable by\r\n * `for`/`id`); `disabled`/`required`/`readonly`/`invalid`/`describedby` cascade. Value is\r\n * NEVER in the context (ADR 037). The `readonly` state shows a committed whole-star rating\r\n * without allowing change (\"show my 4★\").\r\n *\r\n * Whole-star only (half-step input deferred). Fractional aggregate display (\"4.3★\") is the\r\n * separate `skra-rating-display` atom (`libs/ui/data-display`).\r\n */\r\n@Component({\r\n  selector: 'skra-star-rating',\r\n  standalone: true,\r\n  templateUrl: './star-rating.html',\r\n  styleUrl: './star-rating.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n  host: {\r\n    role: 'radiogroup',\r\n    // Named by the field label (Path 1) — radiogroups are not labelable by for/id.\r\n    '[attr.aria-labelledby]': 'context?.labelId() ?? null',\r\n    '[attr.aria-required]': 'context?.isRequired() ? \"true\" : null',\r\n    '[attr.aria-invalid]': 'context?.hasError() ? \"true\" : null',\r\n    '[attr.aria-readonly]': 'context?.isReadonly() ? \"true\" : null',\r\n    '[attr.aria-describedby]': 'context?.describedByIds() ?? null',\r\n    '[attr.data-skra-disabled]': 'isDisabled() ? \"\" : null',\r\n    '[attr.data-skra-size]': 'size()',\r\n    '[attr.id]': 'context?.fieldId() ?? null',\r\n    // Readonly enforcement — without it the announced aria-readonly would be a lie.\r\n    // Blocks the toggle from pointer (click) and keyboard (arrows fire change directly).\r\n    '(click)': 'blockWhenReadonly($event)',\r\n    '(keydown)': 'blockKeyWhenReadonly($event)',\r\n  },\r\n})\r\nexport class SkraStarRating {\r\n  private readonly idGen = inject(IdGeneratorService);\r\n  readonly context = inject(SkraFieldContext, { optional: true });\r\n\r\n  /** Committed rating; 0 (or out of [1,max]) = unrated. Consumer-owned, controlled (ADR 037). */\r\n  readonly value = input<number>(0);\r\n  /** Number of stars. Semantic count, not a look-input. */\r\n  readonly max = input<number>(5);\r\n  /** ADR 035 size axis — the only variant axis. */\r\n  readonly size = input<StarRatingSize>('md');\r\n  /** Fires on USER selection only (never on programmatic [value] changes). */\r\n  readonly valueChange = output<number>();\r\n\r\n  private readonly fallbackName = this.idGen.nextId('rating');\r\n  /** Unique radio-group name so multiple ratings on a page don't merge. */\r\n  readonly groupName = computed(\r\n    () => this.context?.fieldId() || this.fallbackName,\r\n  );\r\n\r\n  readonly isDisabled = computed(() => this.context?.isDisabled() ?? false);\r\n  readonly isReadonly = computed(() => this.context?.isReadonly() ?? false);\r\n\r\n  /**\r\n   * Star values HIGH→LOW (`[max, …, 1]`) so the CSS sibling combinator\r\n   * `input:checked ~ label` fills the checked star and every lower one. The visual\r\n   * order is restored left-to-right via `flex-direction: row-reverse` in the SCSS.\r\n   */\r\n  readonly stars = computed(() => {\r\n    const n = Math.max(0, Math.floor(this.max()));\r\n    return Array.from({ length: n }, (_, i) => n - i);\r\n  });\r\n\r\n  protected starLabel(star: number): string {\r\n    return star === 1 ? '1 star' : `${star} stars`;\r\n  }\r\n\r\n  protected onSelect(star: number): void {\r\n    // Reached only when not readonly (click/keydown are blocked below when readonly),\r\n    // and never on programmatic [value] changes — so this is user-intent only.\r\n    this.valueChange.emit(star);\r\n  }\r\n\r\n  protected blockWhenReadonly(event: Event): void {\r\n    if (this.isReadonly()) event.preventDefault();\r\n  }\r\n\r\n  protected blockKeyWhenReadonly(event: KeyboardEvent): void {\r\n    if (this.isReadonly() && event.key !== 'Tab') event.preventDefault();\r\n  }\r\n}\r\n","@for (star of stars(); track star) {\r\n<input\r\n  type=\"radio\"\r\n  class=\"skra-star-rating-input\"\r\n  [name]=\"groupName()\"\r\n  [id]=\"groupName() + '-' + star\"\r\n  [value]=\"star\"\r\n  [checked]=\"value() === star\"\r\n  [disabled]=\"isDisabled()\"\r\n  [attr.aria-label]=\"starLabel(star)\"\r\n  (change)=\"onSelect(star)\"\r\n/>\r\n<label\r\n  class=\"skra-star-rating-star\"\r\n  [attr.for]=\"groupName() + '-' + star\"\r\n  aria-hidden=\"true\"\r\n>\r\n  <svg\r\n    class=\"skra-star-rating-glyph\"\r\n    viewBox=\"0 0 24 24\"\r\n    focusable=\"false\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <path\r\n      d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\r\n    />\r\n  </svg>\r\n</label>\r\n}\r\n","// APG-radiogroup composite rendered as stars (ADR 039 §7).\r\nexport * from './lib/star-rating/star-rating';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"skra-ui-star-rating.mjs","sources":["../../../../libs/ui/star-rating/src/lib/star-rating/star-rating.ts","../../../../libs/ui/star-rating/src/lib/star-rating/star-rating.html","../../../../libs/ui/star-rating/src/index.ts","../../../../libs/ui/star-rating/src/skra-ui-star-rating.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  inject,\n  input,\n  output,\n} from '@angular/core';\nimport { SkraFieldContext } from '@skra/ui/field';\nimport { IdGeneratorService } from '@skra/ui/field';\n\nexport type StarRatingSize = 'sm' | 'md' | 'lg';\n\n/**\n * `<skra-star-rating>` — a whole-star rating **input**. An APG Rating composite\n * (`role=\"radiogroup\"`) rendered as stars: internally N `(input[type=radio] + label)`\n * pairs sharing one `name`, where the label IS the star glyph (inline SVG) and the\n * input is sr-only but focusable.\n *\n * Governed by the **ADR 039 §7 note (2026-06-24)**: a composite widget MAY render\n * internal native radios — this is NOT the §3.3-forbidden `<skra-radio-group>` —\n * because (1) value is consumer-owned (`[value]` / `(valueChange)`, controlled-only\n * per ADR 037, the Tabs `[selected]` precedent — no internal value-of-record signal),\n * (2) there is no `SkraRadioGroupContext`, (3) it is a distinct APG composite (like\n * `skra-select`), not a generic radio-group wrapper. Custom element justified per\n * ADR 012 — there is no native single host for a rating.\n *\n *   <skra-field [hasError]=\"!form.rating()\">\n *     <label skraLabelFor>Rate your experience</label>\n *     <skra-star-rating [value]=\"form.rating()\" (valueChange)=\"form.rating.set($event)\" />\n *     <skra-error>Please pick a rating</skra-error>\n *   </skra-field>\n *\n * Keyboard is the **native radio group** (arrows move + select, wrap, single tab stop)\n * — ZERO CDK. The fill + hover-preview are **pure CSS** (`:checked`/`:hover` sibling\n * combinators) — CSP-clean (ADR 021), no `[style.--var]`, no TS for the preview. The\n * committed `aria-checked` is the only thing AT observes; hover-preview is visual-only.\n *\n * Optional `SkraFieldContext` (ADR 013): the radiogroup is named via `aria-labelledby`\n * → the field label (`SkraFieldContext.labelId`, since a radiogroup is not labelable by\n * `for`/`id`); `disabled`/`required`/`readonly`/`invalid`/`describedby` cascade. Value is\n * NEVER in the context (ADR 037). The `readonly` state shows a committed whole-star rating\n * without allowing change (\"show my 4★\").\n *\n * Whole-star only (half-step input deferred). Fractional aggregate display (\"4.3★\") is the\n * separate `skra-rating-display` atom (`libs/ui/data-display`).\n */\n@Component({\n  selector: 'skra-star-rating',\n  standalone: true,\n  templateUrl: './star-rating.html',\n  styleUrl: './star-rating.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    role: 'radiogroup',\n    // Named by the field label (Path 1) — radiogroups are not labelable by for/id.\n    '[attr.aria-labelledby]': 'context?.labelId() ?? null',\n    '[attr.aria-required]': 'context?.isRequired() ? \"true\" : null',\n    '[attr.aria-invalid]': 'context?.hasError() ? \"true\" : null',\n    '[attr.aria-readonly]': 'context?.isReadonly() ? \"true\" : null',\n    '[attr.aria-describedby]': 'context?.describedByIds() ?? null',\n    '[attr.data-skra-disabled]': 'isDisabled() ? \"\" : null',\n    '[attr.data-skra-size]': 'size()',\n    '[attr.id]': 'context?.fieldId() ?? null',\n    // Readonly enforcement — without it the announced aria-readonly would be a lie.\n    // Blocks the toggle from pointer (click) and keyboard (arrows fire change directly).\n    '(click)': 'blockWhenReadonly($event)',\n    '(keydown)': 'blockKeyWhenReadonly($event)',\n  },\n})\nexport class SkraStarRating {\n  private readonly idGen = inject(IdGeneratorService);\n  readonly context = inject(SkraFieldContext, { optional: true });\n\n  /** Committed rating; 0 (or out of [1,max]) = unrated. Consumer-owned, controlled (ADR 037). */\n  readonly value = input<number>(0);\n  /** Number of stars. Semantic count, not a look-input. */\n  readonly max = input<number>(5);\n  /** ADR 035 size axis — the only variant axis. */\n  readonly size = input<StarRatingSize>('md');\n  /** Fires on USER selection only (never on programmatic [value] changes). */\n  readonly valueChange = output<number>();\n\n  private readonly fallbackName = this.idGen.nextId('rating');\n  /** Unique radio-group name so multiple ratings on a page don't merge. */\n  readonly groupName = computed(\n    () => this.context?.fieldId() || this.fallbackName,\n  );\n\n  readonly isDisabled = computed(() => this.context?.isDisabled() ?? false);\n  readonly isReadonly = computed(() => this.context?.isReadonly() ?? false);\n\n  /**\n   * Star values HIGH→LOW (`[max, …, 1]`) so the CSS sibling combinator\n   * `input:checked ~ label` fills the checked star and every lower one. The visual\n   * order is restored left-to-right via `flex-direction: row-reverse` in the SCSS.\n   */\n  readonly stars = computed(() => {\n    const n = Math.max(0, Math.floor(this.max()));\n    return Array.from({ length: n }, (_, i) => n - i);\n  });\n\n  protected starLabel(star: number): string {\n    return star === 1 ? '1 star' : `${star} stars`;\n  }\n\n  protected onSelect(star: number): void {\n    // Reached only when not readonly (click/keydown are blocked below when readonly),\n    // and never on programmatic [value] changes — so this is user-intent only.\n    this.valueChange.emit(star);\n  }\n\n  protected blockWhenReadonly(event: Event): void {\n    if (this.isReadonly()) event.preventDefault();\n  }\n\n  protected blockKeyWhenReadonly(event: KeyboardEvent): void {\n    if (this.isReadonly() && event.key !== 'Tab') event.preventDefault();\n  }\n}\n","@for (star of stars(); track star) {\n<input\n  type=\"radio\"\n  class=\"skra-star-rating-input\"\n  [name]=\"groupName()\"\n  [id]=\"groupName() + '-' + star\"\n  [value]=\"star\"\n  [checked]=\"value() === star\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"starLabel(star)\"\n  (change)=\"onSelect(star)\"\n/>\n<label\n  class=\"skra-star-rating-star\"\n  [attr.for]=\"groupName() + '-' + star\"\n  aria-hidden=\"true\"\n>\n  <svg\n    class=\"skra-star-rating-glyph\"\n    viewBox=\"0 0 24 24\"\n    focusable=\"false\"\n    aria-hidden=\"true\"\n  >\n    <!-- O-67 — the empty/filled difference is carried by SHAPE (WCAG 1.4.1): an outline\n         ring (same outer edge as the solid star, inner hole via evenodd) is always drawn;\n         the solid star is painted over it only in the filled state. -->\n    <path\n      class=\"skra-star-rating-outline\"\n      fill-rule=\"evenodd\"\n      d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28z\"\n    />\n    <path\n      class=\"skra-star-rating-solid\"\n      d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\n    />\n  </svg>\n</label>\n}\n","// APG-radiogroup composite rendered as stars (ADR 039 §7).\nexport * from './lib/star-rating/star-rating';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}