@lifecorner/angular-ui-kit 3.22.1 → 3.22.3

package/fesm2022/lifecorner-angular-ui-kit-description-list.mjs

@@ -86,7 +86,7 @@ var DescriptionListComponent = class DescriptionListComponent {
 		outputs: { itemClick: "itemClick" },
 		ngImport: i0,
 		template: "<dl [class]=\"hostClasses()\">\n  @for (item of items(); track item.term) {\n    <div\n      class=\"lc-dl__row\"\n      [class.lc-dl__row--clickable]=\"clickable()\"\n      [attr.role]=\"clickable() ? 'button' : null\"\n      [attr.tabindex]=\"clickable() ? 0 : null\"\n      (click)=\"itemClick.emit(item)\"\n      (keydown)=\"onRowKeydown($event, item)\"\n    >\n      <dt class=\"lc-dl__term\">{{ item.term }}</dt>\n      <span class=\"lc-dl__leader\" aria-hidden=\"true\"></span>\n      <dd [class]=\"valueClass(item)\">\n        @if (item.href) {\n          <a class=\"lc-dl__link\" [href]=\"item.href\">{{ item.value }}</a>\n        } @else if (item.datetime) {\n          <time [attr.datetime]=\"item.datetime\">{{ item.value }}</time>\n        } @else {\n          {{ item.value }}\n        }\n        @if (item.valueSuffix) {\n          <span class=\"lc-dl__value-suffix\">{{ item.valueSuffix }}</span>\n        }\n      </dd>\n    </div>\n  }\n</dl>\n",
-		styles: [":host{display:block}.lc-dl{margin:0}.lc-dl__row{display:flex;align-items:baseline;gap:var(--spacing-2)}.lc-dl__row--clickable{cursor:pointer;border-radius:var(--border-radius-sm)}.lc-dl__row--clickable:hover{background:var(--color-surface-hover)}.lc-dl__row--clickable:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.lc-dl__term{flex-shrink:0;color:var(--color-text-secondary);font-weight:var(--font-weight-medium)}.lc-dl__leader{flex:1 1 auto;align-self:center;min-width:var(--spacing-4)}.lc-dl__value{flex:0 1 auto;min-width:0;overflow-wrap:anywhere;text-align:right;color:var(--color-text-primary);font-weight:var(--font-weight-medium);font-variant-numeric:tabular-nums}.lc-dl__value--muted{color:var(--color-text-tertiary);font-weight:var(--font-weight-normal)}.lc-dl__value--strong{color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}.lc-dl__value--primary{color:var(--color-primary-500);font-weight:var(--font-weight-semibold)}.lc-dl__value--mono{font-family:var(--font-family-mono);font-variant-numeric:normal}.lc-dl__value-suffix{margin-left:.375rem;color:var(--color-text-tertiary);font-weight:var(--font-weight-normal)}.lc-dl__link{color:var(--color-primary-500);text-decoration:none}.lc-dl__link:hover{text-decoration:underline}.lc-dl--rows .lc-dl__row{padding-block:var(--spacing-2)}.lc-dl--rows.lc-dl--sep-line .lc-dl__row,.lc-dl--rows.lc-dl--sep-divider .lc-dl__row{border-bottom:1px solid var(--color-divider)}.lc-dl--rows.lc-dl--sep-line .lc-dl__row:last-child,.lc-dl--rows.lc-dl--sep-divider .lc-dl__row:last-child{border-bottom:0}.lc-dl--rows.lc-dl--sep-divider .lc-dl__row{border-bottom-style:dashed}.lc-dl--leaders .lc-dl__leader{border-bottom:1px dotted var(--color-border-strong);transform:translateY(-.15em)}.lc-dl--stacked .lc-dl__row{flex-direction:column;align-items:stretch;gap:var(--spacing-1);padding-block:var(--spacing-2)}.lc-dl--stacked .lc-dl__leader{display:none}.lc-dl--stacked .lc-dl__value{text-align:left}.lc-dl--sm{font-size:var(--font-size-xs)}.lc-dl--sm .lc-dl__row{padding-block:var(--spacing-1)}.lc-dl--md{font-size:var(--font-size-sm)}\n"],
+		styles: [":host{display:block}.lc-dl{margin:0}.lc-dl__row{display:flex;align-items:baseline;gap:var(--spacing-2)}.lc-dl__row--clickable{cursor:pointer;border-radius:var(--border-radius-sm)}.lc-dl__row--clickable:hover{background:var(--color-surface-hover)}.lc-dl__row--clickable:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.lc-dl__term{margin:0;flex-shrink:0;color:var(--color-text-secondary);font-weight:var(--font-weight-medium)}.lc-dl__leader{flex:1 1 auto;align-self:center;min-width:var(--spacing-4)}.lc-dl__value{margin:0;flex:0 1 auto;min-width:0;overflow-wrap:anywhere;text-align:right;color:var(--color-text-primary);font-weight:var(--font-weight-medium);font-variant-numeric:tabular-nums}.lc-dl__value--muted{color:var(--color-text-tertiary);font-weight:var(--font-weight-normal)}.lc-dl__value--strong{color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}.lc-dl__value--primary{color:var(--color-primary-500);font-weight:var(--font-weight-semibold)}.lc-dl__value--mono{font-family:var(--font-family-mono);font-variant-numeric:normal}.lc-dl__value-suffix{margin-left:.375rem;color:var(--color-text-tertiary);font-weight:var(--font-weight-normal)}.lc-dl__link{color:var(--color-primary-500);text-decoration:none}.lc-dl__link:hover{text-decoration:underline}.lc-dl--rows .lc-dl__row{padding-block:var(--spacing-2)}.lc-dl--rows.lc-dl--sep-line .lc-dl__row,.lc-dl--rows.lc-dl--sep-divider .lc-dl__row{border-bottom:1px solid var(--color-divider)}.lc-dl--rows.lc-dl--sep-line .lc-dl__row:last-child,.lc-dl--rows.lc-dl--sep-divider .lc-dl__row:last-child{border-bottom:0}.lc-dl--rows.lc-dl--sep-divider .lc-dl__row{border-bottom-style:dashed}.lc-dl--leaders .lc-dl__leader{border-bottom:1px dotted var(--color-border-strong);transform:translateY(-.15em)}.lc-dl--stacked .lc-dl__row{flex-direction:column;align-items:stretch;gap:var(--spacing-1);padding-block:var(--spacing-2)}.lc-dl--stacked .lc-dl__leader{display:none}.lc-dl--stacked .lc-dl__value{text-align:left}.lc-dl--sm{font-size:var(--font-size-xs)}.lc-dl--sm .lc-dl__row{padding-block:var(--spacing-1)}.lc-dl--md{font-size:var(--font-size-sm)}\n"],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -102,7 +102,7 @@ i0.ɵɵngDeclareClassMetadata({
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: "<dl [class]=\"hostClasses()\">\n  @for (item of items(); track item.term) {\n    <div\n      class=\"lc-dl__row\"\n      [class.lc-dl__row--clickable]=\"clickable()\"\n      [attr.role]=\"clickable() ? 'button' : null\"\n      [attr.tabindex]=\"clickable() ? 0 : null\"\n      (click)=\"itemClick.emit(item)\"\n      (keydown)=\"onRowKeydown($event, item)\"\n    >\n      <dt class=\"lc-dl__term\">{{ item.term }}</dt>\n      <span class=\"lc-dl__leader\" aria-hidden=\"true\"></span>\n      <dd [class]=\"valueClass(item)\">\n        @if (item.href) {\n          <a class=\"lc-dl__link\" [href]=\"item.href\">{{ item.value }}</a>\n        } @else if (item.datetime) {\n          <time [attr.datetime]=\"item.datetime\">{{ item.value }}</time>\n        } @else {\n          {{ item.value }}\n        }\n        @if (item.valueSuffix) {\n          <span class=\"lc-dl__value-suffix\">{{ item.valueSuffix }}</span>\n        }\n      </dd>\n    </div>\n  }\n</dl>\n",
-			styles: [":host{display:block}.lc-dl{margin:0}.lc-dl__row{display:flex;align-items:baseline;gap:var(--spacing-2)}.lc-dl__row--clickable{cursor:pointer;border-radius:var(--border-radius-sm)}.lc-dl__row--clickable:hover{background:var(--color-surface-hover)}.lc-dl__row--clickable:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.lc-dl__term{flex-shrink:0;color:var(--color-text-secondary);font-weight:var(--font-weight-medium)}.lc-dl__leader{flex:1 1 auto;align-self:center;min-width:var(--spacing-4)}.lc-dl__value{flex:0 1 auto;min-width:0;overflow-wrap:anywhere;text-align:right;color:var(--color-text-primary);font-weight:var(--font-weight-medium);font-variant-numeric:tabular-nums}.lc-dl__value--muted{color:var(--color-text-tertiary);font-weight:var(--font-weight-normal)}.lc-dl__value--strong{color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}.lc-dl__value--primary{color:var(--color-primary-500);font-weight:var(--font-weight-semibold)}.lc-dl__value--mono{font-family:var(--font-family-mono);font-variant-numeric:normal}.lc-dl__value-suffix{margin-left:.375rem;color:var(--color-text-tertiary);font-weight:var(--font-weight-normal)}.lc-dl__link{color:var(--color-primary-500);text-decoration:none}.lc-dl__link:hover{text-decoration:underline}.lc-dl--rows .lc-dl__row{padding-block:var(--spacing-2)}.lc-dl--rows.lc-dl--sep-line .lc-dl__row,.lc-dl--rows.lc-dl--sep-divider .lc-dl__row{border-bottom:1px solid var(--color-divider)}.lc-dl--rows.lc-dl--sep-line .lc-dl__row:last-child,.lc-dl--rows.lc-dl--sep-divider .lc-dl__row:last-child{border-bottom:0}.lc-dl--rows.lc-dl--sep-divider .lc-dl__row{border-bottom-style:dashed}.lc-dl--leaders .lc-dl__leader{border-bottom:1px dotted var(--color-border-strong);transform:translateY(-.15em)}.lc-dl--stacked .lc-dl__row{flex-direction:column;align-items:stretch;gap:var(--spacing-1);padding-block:var(--spacing-2)}.lc-dl--stacked .lc-dl__leader{display:none}.lc-dl--stacked .lc-dl__value{text-align:left}.lc-dl--sm{font-size:var(--font-size-xs)}.lc-dl--sm .lc-dl__row{padding-block:var(--spacing-1)}.lc-dl--md{font-size:var(--font-size-sm)}\n"]
+			styles: [":host{display:block}.lc-dl{margin:0}.lc-dl__row{display:flex;align-items:baseline;gap:var(--spacing-2)}.lc-dl__row--clickable{cursor:pointer;border-radius:var(--border-radius-sm)}.lc-dl__row--clickable:hover{background:var(--color-surface-hover)}.lc-dl__row--clickable:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.lc-dl__term{margin:0;flex-shrink:0;color:var(--color-text-secondary);font-weight:var(--font-weight-medium)}.lc-dl__leader{flex:1 1 auto;align-self:center;min-width:var(--spacing-4)}.lc-dl__value{margin:0;flex:0 1 auto;min-width:0;overflow-wrap:anywhere;text-align:right;color:var(--color-text-primary);font-weight:var(--font-weight-medium);font-variant-numeric:tabular-nums}.lc-dl__value--muted{color:var(--color-text-tertiary);font-weight:var(--font-weight-normal)}.lc-dl__value--strong{color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}.lc-dl__value--primary{color:var(--color-primary-500);font-weight:var(--font-weight-semibold)}.lc-dl__value--mono{font-family:var(--font-family-mono);font-variant-numeric:normal}.lc-dl__value-suffix{margin-left:.375rem;color:var(--color-text-tertiary);font-weight:var(--font-weight-normal)}.lc-dl__link{color:var(--color-primary-500);text-decoration:none}.lc-dl__link:hover{text-decoration:underline}.lc-dl--rows .lc-dl__row{padding-block:var(--spacing-2)}.lc-dl--rows.lc-dl--sep-line .lc-dl__row,.lc-dl--rows.lc-dl--sep-divider .lc-dl__row{border-bottom:1px solid var(--color-divider)}.lc-dl--rows.lc-dl--sep-line .lc-dl__row:last-child,.lc-dl--rows.lc-dl--sep-divider .lc-dl__row:last-child{border-bottom:0}.lc-dl--rows.lc-dl--sep-divider .lc-dl__row{border-bottom-style:dashed}.lc-dl--leaders .lc-dl__leader{border-bottom:1px dotted var(--color-border-strong);transform:translateY(-.15em)}.lc-dl--stacked .lc-dl__row{flex-direction:column;align-items:stretch;gap:var(--spacing-1);padding-block:var(--spacing-2)}.lc-dl--stacked .lc-dl__leader{display:none}.lc-dl--stacked .lc-dl__value{text-align:left}.lc-dl--sm{font-size:var(--font-size-xs)}.lc-dl--sm .lc-dl__row{padding-block:var(--spacing-1)}.lc-dl--md{font-size:var(--font-size-sm)}\n"]
 		}]
 	}],
 	propDecorators: {

package/fesm2022/lifecorner-angular-ui-kit-description-list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-description-list.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/description-list/description-list.component.ts","../../../../libs/angular-ui-kit/src/lib/description-list/description-list.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  output,\n  computed,\n} from '@angular/core';\n\n/**\n * Emphasis treatment applied to a row's value.\n * - `mono` renders the value in the monospace font (paths, URLs, hashes).\n */\nexport type DescriptionListEmphasis =\n  | 'default'\n  | 'strong'\n  | 'muted'\n  | 'primary'\n  | 'mono';\n\nexport interface DescriptionListItem {\n  /** Label shown on the term side of the row. */\n  term: string;\n  /** Value shown on the description side of the row. */\n  value: string;\n  /**\n   * Optional qualifying suffix appended after the value on the same line and\n   * rendered muted (e.g. a rating grade or \"last checked\" hint). Wraps if the\n   * combined value + suffix exceed the available width.\n   */\n  valueSuffix?: string;\n  /** Optional link — renders the value as an anchor. */\n  href?: string;\n  /**\n   * Machine-readable date or time of the value (ISO 8601, e.g.\n   * `2026-10-12T18:05:00+02:00`): renders the value inside\n   * `<time datetime>`, so assistive tech and parsers get the exact moment\n   * behind „heute 18:05“. Ignored together with `href`.\n   */\n  datetime?: string;\n  /** Optional visual emphasis for the value. @default 'default' */\n  emphasis?: DescriptionListEmphasis;\n  /** Optional opaque payload echoed back in `itemClick`. */\n  id?: string;\n}\n\nexport type DescriptionListLayout = 'rows' | 'stacked';\nexport type DescriptionListSize = 'sm' | 'md';\n\n/**\n * Per-row separator style (applies to the `rows` layout).\n * - `line`    solid hairline under each row (default — unchanged look)\n * - `divider` subtle dashed line, for the dense card look\n * - `none`    no row separator\n *\n * Orthogonal to `leaders`, which draws dotted leaders *between* term and value.\n */\nexport type DescriptionListSeparator = 'line' | 'divider' | 'none';\n\n/**\n * Description list for key/value metadata (a styled `<dl>`).\n *\n * Features:\n * - `rows` layout: term on the left, value on the right, with an optional\n *   dotted leader line connecting them (the DS2.0 \"spec sheet\" look).\n * - `stacked` layout: term above value, for narrow columns.\n * - Per-row value emphasis and optional links.\n * - Semantic markup (`<dl>`/`<dt>`/`<dd>`) for accessibility; `clickable`\n *   rows are focusable and keyboard-activatable.\n *\n * @example\n * ```html\n * <lc-description-list\n *   [items]=\"[\n *     { term: 'Repository', value: 'example/project', href: '#', emphasis: 'primary' },\n *     { term: 'Access', value: 'Token stored · read only' },\n *     { term: 'Status', value: 'Maintained', emphasis: 'strong' }\n *   ]\"\n *   [leaders]=\"true\" />\n * ```\n */\n@Component({\n  selector: 'lc-description-list',\n  standalone: true,\n  templateUrl: './description-list.component.html',\n  styleUrls: ['./description-list.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DescriptionListComponent {\n  /** Rows to render. */\n  readonly items = input.required<readonly DescriptionListItem[]>();\n\n  /**\n   * Row layout.\n   * - rows: term left / value right (default)\n   * - stacked: term above value\n   * @default 'rows'\n   */\n  readonly layout = input<DescriptionListLayout>('rows');\n\n  /**\n   * Draw a dotted leader line between term and value. Only applies to the\n   * `rows` layout.\n   * @default false\n   */\n  readonly leaders = input<boolean>(false);\n\n  /** Density of the rows. @default 'md' */\n  readonly size = input<DescriptionListSize>('md');\n\n  /**\n   * Per-row separator style for the `rows` layout. Defaults to `line`, which is\n   * identical to the previous behavior. Orthogonal to `leaders`.\n   * @default 'line'\n   */\n  readonly separator = input<DescriptionListSeparator>('line');\n\n  /**\n   * Whether rows are interactive. When set, each row is focusable and\n   * Enter / Space emit `itemClick`, so the click handler is reachable from\n   * the keyboard. Set this whenever you handle `itemClick`.\n   * @default false\n   */\n  readonly clickable = input<boolean>(false);\n\n  /** Emitted when a row is clicked (or activated via keyboard when `clickable`). */\n  readonly itemClick = output<DescriptionListItem>();\n\n  protected readonly hostClasses = computed(() =>\n    [\n      'lc-dl',\n      `lc-dl--${this.layout()}`,\n      `lc-dl--${this.size()}`,\n      `lc-dl--sep-${this.separator()}`,\n      this.leaders() && this.layout() === 'rows' ? 'lc-dl--leaders' : '',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  );\n\n  protected valueClass(item: DescriptionListItem): string {\n    return `lc-dl__value lc-dl__value--${item.emphasis ?? 'default'}`;\n  }\n\n  /** Keyboard activation of a clickable row (only from the row itself, not a nested link). */\n  protected onRowKeydown(event: KeyboardEvent, item: DescriptionListItem): void {\n    if (event.target !== event.currentTarget) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.itemClick.emit(item);\n    }\n  }\n}\n","<dl [class]=\"hostClasses()\">\n  @for (item of items(); track item.term) {\n    <div\n      class=\"lc-dl__row\"\n      [class.lc-dl__row--clickable]=\"clickable()\"\n      [attr.role]=\"clickable() ? 'button' : null\"\n      [attr.tabindex]=\"clickable() ? 0 : null\"\n      (click)=\"itemClick.emit(item)\"\n      (keydown)=\"onRowKeydown($event, item)\"\n    >\n      <dt class=\"lc-dl__term\">{{ item.term }}</dt>\n      <span class=\"lc-dl__leader\" aria-hidden=\"true\"></span>\n      <dd [class]=\"valueClass(item)\">\n        @if (item.href) {\n          <a class=\"lc-dl__link\" [href]=\"item.href\">{{ item.value }}</a>\n        } @else if (item.datetime) {\n          <time [attr.datetime]=\"item.datetime\">{{ item.value }}</time>\n        } @else {\n          {{ item.value }}\n        }\n        @if (item.valueSuffix) {\n          <span class=\"lc-dl__value-suffix\">{{ item.valueSuffix }}</span>\n        }\n      </dd>\n    </div>\n  }\n</dl>\n"],"mappings":";;AAuFA,IAAa,2BAAb,MAAa,yBAAwB;CAE1B,QAAQ,MAAM,SAA0C,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAQxD,SAAS,MAA6B,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAO7C,UAAU,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAG/B,OAAO,MAA2B,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAOvC,YAAY,MAAgC,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAQnD,YAAY,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAGjC,YAAY,OAAM;CAER,cAAc,eAC/B;EACE;EACA,UAAU,KAAK,OAAM;EACrB,UAAU,KAAK,KAAI;EACnB,cAAc,KAAK,UAAS;EAC5B,KAAK,QAAO,KAAM,KAAK,OAAM,MAAO,SAAS,mBAAmB;CACjE,CAAA,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GACZ,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAES,WAAW,MAAyB;EAC5C,OAAO,8BAA8B,KAAK,YAAY;CACxD;CAGU,aAAa,OAAsB,MAAyB;EACpE,IAAI,MAAM,WAAW,MAAM,eAAe;EAC1C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC9C,MAAM,eAAc;GACpB,KAAK,UAAU,KAAK,IAAI;EAC1B;CACF;CA/DW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAwB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAxB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAwB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,WAAA,YAAA;EAAA,UAAA;EAAA,UCvFrC;EA2BA,QAAA,CAAA,onEAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AD4Da,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAwB,YAAA,CAAA;EAPpC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAqB,YACnB;GAAI,iBAGC,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,onEAAA;EAAA,CAAA"}
+{"version":3,"file":"lifecorner-angular-ui-kit-description-list.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/description-list/description-list.component.ts","../../../../libs/angular-ui-kit/src/lib/description-list/description-list.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  output,\n  computed,\n} from '@angular/core';\n\n/**\n * Emphasis treatment applied to a row's value.\n * - `mono` renders the value in the monospace font (paths, URLs, hashes).\n */\nexport type DescriptionListEmphasis =\n  | 'default'\n  | 'strong'\n  | 'muted'\n  | 'primary'\n  | 'mono';\n\nexport interface DescriptionListItem {\n  /** Label shown on the term side of the row. */\n  term: string;\n  /** Value shown on the description side of the row. */\n  value: string;\n  /**\n   * Optional qualifying suffix appended after the value on the same line and\n   * rendered muted (e.g. a rating grade or \"last checked\" hint). Wraps if the\n   * combined value + suffix exceed the available width.\n   */\n  valueSuffix?: string;\n  /** Optional link — renders the value as an anchor. */\n  href?: string;\n  /**\n   * Machine-readable date or time of the value (ISO 8601, e.g.\n   * `2026-10-12T18:05:00+02:00`): renders the value inside\n   * `<time datetime>`, so assistive tech and parsers get the exact moment\n   * behind „heute 18:05“. Ignored together with `href`.\n   */\n  datetime?: string;\n  /** Optional visual emphasis for the value. @default 'default' */\n  emphasis?: DescriptionListEmphasis;\n  /** Optional opaque payload echoed back in `itemClick`. */\n  id?: string;\n}\n\nexport type DescriptionListLayout = 'rows' | 'stacked';\nexport type DescriptionListSize = 'sm' | 'md';\n\n/**\n * Per-row separator style (applies to the `rows` layout).\n * - `line`    solid hairline under each row (default — unchanged look)\n * - `divider` subtle dashed line, for the dense card look\n * - `none`    no row separator\n *\n * Orthogonal to `leaders`, which draws dotted leaders *between* term and value.\n */\nexport type DescriptionListSeparator = 'line' | 'divider' | 'none';\n\n/**\n * Description list for key/value metadata (a styled `<dl>`).\n *\n * Features:\n * - `rows` layout: term on the left, value on the right, with an optional\n *   dotted leader line connecting them (the DS2.0 \"spec sheet\" look).\n * - `stacked` layout: term above value, for narrow columns.\n * - Per-row value emphasis and optional links.\n * - Semantic markup (`<dl>`/`<dt>`/`<dd>`) for accessibility; `clickable`\n *   rows are focusable and keyboard-activatable.\n *\n * @example\n * ```html\n * <lc-description-list\n *   [items]=\"[\n *     { term: 'Repository', value: 'example/project', href: '#', emphasis: 'primary' },\n *     { term: 'Access', value: 'Token stored · read only' },\n *     { term: 'Status', value: 'Maintained', emphasis: 'strong' }\n *   ]\"\n *   [leaders]=\"true\" />\n * ```\n */\n@Component({\n  selector: 'lc-description-list',\n  standalone: true,\n  templateUrl: './description-list.component.html',\n  styleUrls: ['./description-list.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DescriptionListComponent {\n  /** Rows to render. */\n  readonly items = input.required<readonly DescriptionListItem[]>();\n\n  /**\n   * Row layout.\n   * - rows: term left / value right (default)\n   * - stacked: term above value\n   * @default 'rows'\n   */\n  readonly layout = input<DescriptionListLayout>('rows');\n\n  /**\n   * Draw a dotted leader line between term and value. Only applies to the\n   * `rows` layout.\n   * @default false\n   */\n  readonly leaders = input<boolean>(false);\n\n  /** Density of the rows. @default 'md' */\n  readonly size = input<DescriptionListSize>('md');\n\n  /**\n   * Per-row separator style for the `rows` layout. Defaults to `line`, which is\n   * identical to the previous behavior. Orthogonal to `leaders`.\n   * @default 'line'\n   */\n  readonly separator = input<DescriptionListSeparator>('line');\n\n  /**\n   * Whether rows are interactive. When set, each row is focusable and\n   * Enter / Space emit `itemClick`, so the click handler is reachable from\n   * the keyboard. Set this whenever you handle `itemClick`.\n   * @default false\n   */\n  readonly clickable = input<boolean>(false);\n\n  /** Emitted when a row is clicked (or activated via keyboard when `clickable`). */\n  readonly itemClick = output<DescriptionListItem>();\n\n  protected readonly hostClasses = computed(() =>\n    [\n      'lc-dl',\n      `lc-dl--${this.layout()}`,\n      `lc-dl--${this.size()}`,\n      `lc-dl--sep-${this.separator()}`,\n      this.leaders() && this.layout() === 'rows' ? 'lc-dl--leaders' : '',\n    ]\n      .filter(Boolean)\n      .join(' '),\n  );\n\n  protected valueClass(item: DescriptionListItem): string {\n    return `lc-dl__value lc-dl__value--${item.emphasis ?? 'default'}`;\n  }\n\n  /** Keyboard activation of a clickable row (only from the row itself, not a nested link). */\n  protected onRowKeydown(event: KeyboardEvent, item: DescriptionListItem): void {\n    if (event.target !== event.currentTarget) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.itemClick.emit(item);\n    }\n  }\n}\n","<dl [class]=\"hostClasses()\">\n  @for (item of items(); track item.term) {\n    <div\n      class=\"lc-dl__row\"\n      [class.lc-dl__row--clickable]=\"clickable()\"\n      [attr.role]=\"clickable() ? 'button' : null\"\n      [attr.tabindex]=\"clickable() ? 0 : null\"\n      (click)=\"itemClick.emit(item)\"\n      (keydown)=\"onRowKeydown($event, item)\"\n    >\n      <dt class=\"lc-dl__term\">{{ item.term }}</dt>\n      <span class=\"lc-dl__leader\" aria-hidden=\"true\"></span>\n      <dd [class]=\"valueClass(item)\">\n        @if (item.href) {\n          <a class=\"lc-dl__link\" [href]=\"item.href\">{{ item.value }}</a>\n        } @else if (item.datetime) {\n          <time [attr.datetime]=\"item.datetime\">{{ item.value }}</time>\n        } @else {\n          {{ item.value }}\n        }\n        @if (item.valueSuffix) {\n          <span class=\"lc-dl__value-suffix\">{{ item.valueSuffix }}</span>\n        }\n      </dd>\n    </div>\n  }\n</dl>\n"],"mappings":";;AAuFA,IAAa,2BAAb,MAAa,yBAAwB;CAE1B,QAAQ,MAAM,SAA0C,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAQxD,SAAS,MAA6B,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAO7C,UAAU,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAG/B,OAAO,MAA2B,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAOvC,YAAY,MAAgC,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAQnD,YAAY,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAGjC,YAAY,OAAM;CAER,cAAc,eAC/B;EACE;EACA,UAAU,KAAK,OAAM;EACrB,UAAU,KAAK,KAAI;EACnB,cAAc,KAAK,UAAS;EAC5B,KAAK,QAAO,KAAM,KAAK,OAAM,MAAO,SAAS,mBAAmB;CACjE,CAAA,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GACZ,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAES,WAAW,MAAyB;EAC5C,OAAO,8BAA8B,KAAK,YAAY;CACxD;CAGU,aAAa,OAAsB,MAAyB;EACpE,IAAI,MAAM,WAAW,MAAM,eAAe;EAC1C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC9C,MAAM,eAAc;GACpB,KAAK,UAAU,KAAK,IAAI;EAC1B;CACF;CA/DW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAwB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAxB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAwB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,WAAA,YAAA;EAAA,UAAA;EAAA,UCvFrC;EA2BA,QAAA,CAAA,soEAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AD4Da,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAwB,YAAA,CAAA;EAPpC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAqB,YACnB;GAAI,iBAGC,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,soEAAA;EAAA,CAAA"}

package/fesm2022/lifecorner-angular-ui-kit-skeleton.mjs

@@ -1,36 +1,38 @@
 import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+const SKELETON_DEFAULTS = {
+	line: {
+		w: "100%",
+		h: "0.875rem",
+		r: "0.25rem"
+	},
+	circle: {
+		w: "40px",
+		h: "40px",
+		r: "50%"
+	},
+	rect: {
+		w: "100%",
+		h: "100px",
+		r: "0.5rem"
+	}
+};
 var SkeletonComponent = class SkeletonComponent {
 	variant = input("line", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
 	width = input(...ngDevMode ? [void 0, { debugName: "width" }] : /* istanbul ignore next */ []);
 	height = input(...ngDevMode ? [void 0, { debugName: "height" }] : /* istanbul ignore next */ []);
 	borderRadius = input(...ngDevMode ? [void 0, { debugName: "borderRadius" }] : /* istanbul ignore next */ []);
 	variantClass = computed(() => `lc-skeleton--${this.variant()}`, ...ngDevMode ? [{ debugName: "variantClass" }] : /* istanbul ignore next */ []);
+	defaults = computed(() => SKELETON_DEFAULTS[this.variant()], ...ngDevMode ? [{ debugName: "defaults" }] : /* istanbul ignore next */ []);
 	styles = computed(() => {
-		const d = {
-			line: {
-				w: "100%",
-				h: "0.875rem",
-				r: "0.25rem"
-			},
-			circle: {
-				w: "40px",
-				h: "40px",
-				r: "50%"
-			},
-			rect: {
-				w: "100%",
-				h: "100px",
-				r: "0.5rem"
-			}
-		}[this.variant()];
+		const d = this.defaults();
 		return {
-			width: this.width() ?? d.w,
+			width: "100%",
 			height: this.height() ?? d.h,
 			"border-radius": this.borderRadius() ?? d.r
 		};
 	}, ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
-	hostWidth = computed(() => this.styles().width, ...ngDevMode ? [{ debugName: "hostWidth" }] : /* istanbul ignore next */ []);
+	hostWidth = computed(() => this.width() ?? this.defaults().w, ...ngDevMode ? [{ debugName: "hostWidth" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.2",

package/fesm2022/lifecorner-angular-ui-kit-skeleton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-skeleton.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/skeleton/skeleton.component.ts","../../../../libs/angular-ui-kit/src/lib/skeleton/skeleton.component.html"],"sourcesContent":["import { Component, ChangeDetectionStrategy, input, computed } from '@angular/core';\n\nexport type SkeletonVariant = 'line' | 'circle' | 'rect';\n\n/**\n * Skeleton loader component for placeholder loading states.\n *\n * Features:\n * - Variant shapes (text, rect, circle)\n * - Shimmer animation effect; a static fill under `prefers-reduced-motion`\n * - Colours from `--color-skeleton` / `--color-skeleton-highlight`, overridable\n *   with the `--lc-skeleton-bg` / `--lc-skeleton-highlight` hooks\n * - Custom width, height, and border radius\n * - `--lc-skeleton-height` hook: the height from CSS (a container query, `cqi`),\n *   winning over the `height` input; set it on the `lc-skeleton` element (on a\n *   wrapper it reaches every skeleton inside)\n * - Composable for building complex loading layouts\n * - Dark mode compatible\n *\n * @example\n * ```html\n * <lc-skeleton />\n * <lc-skeleton variant=\"circle\" width=\"40px\" height=\"40px\" />\n * <lc-skeleton variant=\"rect\" width=\"100%\" height=\"400px\" />\n * ```\n */\n@Component({\n  selector: 'lc-skeleton',\n  standalone: true,\n  templateUrl: './skeleton.component.html',\n  styleUrl: './skeleton.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    // The host mirrors the box width so the skeleton sizes correctly inside\n    // flex layouts, and never shrinks below it.\n    '[style.width]': 'hostWidth()',\n    '[style.flex-shrink]': '\"0\"',\n  },\n})\nexport class SkeletonComponent {\n  /** Shape variant. */\n  readonly variant = input<SkeletonVariant>('line');\n\n  /** Width (CSS value). Defaults to '100%' for line/rect, '40px' for circle. */\n  readonly width = input<string>();\n\n  /**\n   * Height (CSS value). Defaults to '0.875rem' for line, '40px' for circle, '100px' for rect.\n   * The `--lc-skeleton-height` custom property, when set, wins over it.\n   */\n  readonly height = input<string>();\n\n  /** Border radius override (CSS value). */\n  readonly borderRadius = input<string>();\n\n  protected readonly variantClass = computed(() => `lc-skeleton--${this.variant()}`);\n\n  protected readonly styles = computed(() => {\n    const v = this.variant();\n    const defaults: Record<SkeletonVariant, { w: string; h: string; r: string }> = {\n      line: { w: '100%', h: '0.875rem', r: '0.25rem' },\n      circle: { w: '40px', h: '40px', r: '50%' },\n      rect: { w: '100%', h: '100px', r: '0.5rem' },\n    };\n    const d = defaults[v];\n    return {\n      width: this.width() ?? d.w,\n      height: this.height() ?? d.h,\n      'border-radius': this.borderRadius() ?? d.r,\n    };\n  });\n\n  protected readonly hostWidth = computed(() => this.styles().width);\n}\n","<div class=\"lc-skeleton\" [class]=\"variantClass()\" [style]=\"styles()\"></div>\n"],"mappings":";;AAuCA,IAAa,oBAAb,MAAa,kBAAiB;CAEnB,UAAU,MAAuB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAGxC,QAAQ,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAMvB,SAAS,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAGxB,eAAe,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEpB,eAAe,eAAe,gBAAgB,KAAK,QAAO,KAAK,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAE/D,SAAS,eAAc;EAOxC,MAAM,IAAI;GAJR,MAAM;IAAE,GAAG;IAAQ,GAAG;IAAY,GAAG;GAAS;GAC9C,QAAQ;IAAE,GAAG;IAAQ,GAAG;IAAQ,GAAG;GAAK;GACxC,MAAM;IAAE,GAAG;IAAQ,GAAG;IAAS,GAAG;GAAQ;EAElC,EANA,KAAK,QAMI;EACnB,OAAO;GACL,OAAO,KAAK,MAAK,KAAM,EAAE;GACzB,QAAQ,KAAK,OAAM,KAAM,EAAE;GAC3B,iBAAiB,KAAK,aAAY,KAAM,EAAE;EAC3C;CACH,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,YAAY,eAAe,KAAK,OAAM,CAAE,CAAC,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAjCvD,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAiB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAjB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAiB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,eAAA;GAAA,qBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UCvC9B;EACA,QAAA,CAAA,8sBAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADsCa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAiB,YAAA,CAAA;EAb7B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAa,YACX;GAAI,iBAGC,wBAAwB;GAAM,MACzC;IAGJ,iBAAiB;IACjB,uBAAuB;GACxB;GAAA,UAAA;GAAA,QAAA,CAAA,8sBAAA;EAAA,CAAA"}
+{"version":3,"file":"lifecorner-angular-ui-kit-skeleton.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/skeleton/skeleton.component.ts","../../../../libs/angular-ui-kit/src/lib/skeleton/skeleton.component.html"],"sourcesContent":["import { Component, ChangeDetectionStrategy, input, computed } from '@angular/core';\n\nexport type SkeletonVariant = 'line' | 'circle' | 'rect';\n\n/** Per-variant defaults: width (on the host), height and border radius (on the fill). */\nconst SKELETON_DEFAULTS: Record<SkeletonVariant, { w: string; h: string; r: string }> = {\n  line: { w: '100%', h: '0.875rem', r: '0.25rem' },\n  circle: { w: '40px', h: '40px', r: '50%' },\n  rect: { w: '100%', h: '100px', r: '0.5rem' },\n};\n\n/**\n * Skeleton loader component for placeholder loading states.\n *\n * Features:\n * - Variant shapes (text, rect, circle)\n * - Shimmer animation effect; a static fill under `prefers-reduced-motion`\n * - Colours from `--color-skeleton` / `--color-skeleton-highlight`, overridable\n *   with the `--lc-skeleton-bg` / `--lc-skeleton-highlight` hooks\n * - Custom width, height, and border radius\n * - `--lc-skeleton-height` hook: the height from CSS (a container query, `cqi`),\n *   winning over the `height` input; set it on the `lc-skeleton` element (on a\n *   wrapper it reaches every skeleton inside)\n * - Composable for building complex loading layouts\n * - Dark mode compatible\n *\n * @example\n * ```html\n * <lc-skeleton />\n * <lc-skeleton variant=\"circle\" width=\"40px\" height=\"40px\" />\n * <lc-skeleton variant=\"rect\" width=\"100%\" height=\"400px\" />\n * ```\n */\n@Component({\n  selector: 'lc-skeleton',\n  standalone: true,\n  templateUrl: './skeleton.component.html',\n  styleUrl: './skeleton.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    // The host takes the width once, so the skeleton sizes correctly inside\n    // flex layouts and never shrinks below it; the fill spans it (3.22.2:\n    // before, the fill took the width again, so a percentage applied twice).\n    '[style.width]': 'hostWidth()',\n    '[style.flex-shrink]': '\"0\"',\n  },\n})\nexport class SkeletonComponent {\n  /**\n   * Shape variant.\n   * @default 'line'\n   */\n  readonly variant = input<SkeletonVariant>('line');\n\n  /**\n   * Width (CSS value), applied once, to the host: a percentage is a share of the\n   * containing block and the fill always spans the host (since 3.22.2; before, a\n   * percentage applied twice, so `30%` drew 9 %).\n   * @default '100%' for line and rect, '40px' for circle\n   */\n  readonly width = input<string>();\n\n  /**\n   * Height (CSS value). Defaults to '0.875rem' for line, '40px' for circle, '100px' for rect.\n   * The `--lc-skeleton-height` custom property, when set, wins over it.\n   * @default '0.875rem' for line, '40px' for circle, '100px' for rect\n   */\n  readonly height = input<string>();\n\n  /**\n   * Border radius override (CSS value).\n   * @default '0.25rem' for line, '50%' for circle, '0.5rem' for rect\n   */\n  readonly borderRadius = input<string>();\n\n  protected readonly variantClass = computed(() => `lc-skeleton--${this.variant()}`);\n\n  private readonly defaults = computed(() => SKELETON_DEFAULTS[this.variant()]);\n\n  /** The fill's inline styles: it always spans the host, which holds the width. */\n  protected readonly styles = computed(() => {\n    const d = this.defaults();\n    return {\n      width: '100%',\n      height: this.height() ?? d.h,\n      'border-radius': this.borderRadius() ?? d.r,\n    };\n  });\n\n  protected readonly hostWidth = computed(() => this.width() ?? this.defaults().w);\n}\n","<div class=\"lc-skeleton\" [class]=\"variantClass()\" [style]=\"styles()\"></div>\n"],"mappings":";;AAKA,MAAM,oBAAkF;CACtF,MAAM;EAAE,GAAG;EAAQ,GAAG;EAAY,GAAG;CAAS;CAC9C,QAAQ;EAAE,GAAG;EAAQ,GAAG;EAAQ,GAAG;CAAK;CACxC,MAAM;EAAE,GAAG;EAAQ,GAAG;EAAS,GAAG;CAAQ;AAC3C;AAsCD,IAAa,oBAAb,MAAa,kBAAiB;CAKnB,UAAU,MAAuB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAQxC,QAAQ,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAOvB,SAAS,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAMxB,eAAe,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEpB,eAAe,eAAe,gBAAgB,KAAK,QAAO,KAAK,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEjE,WAAW,eAAe,kBAAkB,KAAK,QAAO,IAAI,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAG1D,SAAS,eAAc;EACxC,MAAM,IAAI,KAAK,SAAQ;EACvB,OAAO;GACL,OAAO;GACP,QAAQ,KAAK,OAAM,KAAM,EAAE;GAC3B,iBAAiB,KAAK,aAAY,KAAM,EAAE;EAC3C;CACH,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,YAAY,eAAe,KAAK,MAAK,KAAM,KAAK,SAAQ,CAAE,CAAC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CA1CrE,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAiB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAjB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAiB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,eAAA;GAAA,qBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UC/C9B;EACA,QAAA,CAAA,8sBAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AD8Ca,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAiB,YAAA,CAAA;EAd7B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAa,YACX;GAAI,iBAGC,wBAAwB;GAAM,MACzC;IAIJ,iBAAiB;IACjB,uBAAuB;GACxB;GAAA,UAAA;GAAA,QAAA,CAAA,8sBAAA;EAAA,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifecorner/angular-ui-kit",
-  "version": "3.22.1",
+  "version": "3.22.3",
   "description": "LifeCorner Design System – Angular UI component library",
   "license": "MIT",
   "repository": {

package/types/lifecorner-angular-ui-kit-skeleton.d.ts

@@ -23,18 +23,32 @@ export type SkeletonVariant = 'line' | 'circle' | 'rect';
  * ```
  */
 export declare class SkeletonComponent {
-  /** Shape variant. */
+  /**
+   * Shape variant.
+   * @default 'line'
+   */
   readonly variant: import("@angular/core").InputSignal<SkeletonVariant>;
-  /** Width (CSS value). Defaults to '100%' for line/rect, '40px' for circle. */
+  /**
+   * Width (CSS value), applied once, to the host: a percentage is a share of the
+   * containing block and the fill always spans the host (since 3.22.2; before, a
+   * percentage applied twice, so `30%` drew 9 %).
+   * @default '100%' for line and rect, '40px' for circle
+   */
   readonly width: import("@angular/core").InputSignal<string | undefined>;
   /**
    * Height (CSS value). Defaults to '0.875rem' for line, '40px' for circle, '100px' for rect.
    * The `--lc-skeleton-height` custom property, when set, wins over it.
+   * @default '0.875rem' for line, '40px' for circle, '100px' for rect
    */
   readonly height: import("@angular/core").InputSignal<string | undefined>;
-  /** Border radius override (CSS value). */
+  /**
+   * Border radius override (CSS value).
+   * @default '0.25rem' for line, '50%' for circle, '0.5rem' for rect
+   */
   readonly borderRadius: import("@angular/core").InputSignal<string | undefined>;
   protected readonly variantClass: import("@angular/core").Signal<string>;
+  private readonly defaults;
+  /** The fill's inline styles: it always spans the host, which holds the width. */
   protected readonly styles: import("@angular/core").Signal<{
     width: string;
     height: string;