@besaitech/ng-design-system 0.0.50 → 0.0.52

package/fesm2022/besaitech-ng-design-system.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, isDevMode, effect, numberAttribute, output, signal, forwardRef, viewChild, viewChildren, afterRenderEffect, ElementRef, model, Injector, afterNextRender, TemplateRef, Directive, contentChild, Injectable, contentChildren, untracked, DestroyRef } from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, isDevMode, effect, numberAttribute, output, signal, forwardRef, viewChild, viewChildren, afterRenderEffect, model, ElementRef, Injector, afterNextRender, TemplateRef, Directive, contentChild, Injectable, contentChildren, untracked, DestroyRef } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
@@ -108,6 +108,27 @@ const SDS_ICONS = {
     'search-x': '<path d="m13.5 8.5-5 5"/><path d="m8.5 8.5 5 5"/><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
     command: '<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/>',
     sparkles: '<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/>',
+    // A question mark in a circle: the "may contain" mark on sds-tri-state-chip, and a generic help glyph.
+    'circle-help': '<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>',
+    // Stock / inventory (the kitchen stock board, the sold-out toolkit). Original glyph: three stacked boxes.
+    stock: '<rect x="3" y="13" width="8" height="8" rx="1"/><rect x="13" y="13" width="8" height="8" rx="1"/><rect x="8" y="3" width="8" height="8" rx="1"/><path d="M6 13v2.5h2V13"/><path d="M16 13v2.5h2V13"/><path d="M11 3v2.5h2V3"/>',
+    // The 14 EU allergens of Regulation (EU) 1169/2011 Annex II, in Annex order. Original Belvigo drawings
+    // (Lucide has none), same grammar as the rest of the set: 24x24, stroke only, 2px, round caps/joins.
+    // Names mirror the API enum (CEREALS_GLUTEN -> allergen-cereals-gluten); sds-allergen-icon maps them.
+    'allergen-cereals-gluten': '<path d="M12 22V8"/><path d="M12 8c-1.6-1.6-1.6-4.2 0-6 1.6 1.8 1.6 4.4 0 6z"/><path d="M12 13c-2.6 0-4.6-1.6-5.2-4.2 2.6 0 4.6 1.6 5.2 4.2z"/><path d="M12 13c2.6 0 4.6-1.6 5.2-4.2-2.6 0-4.6 1.6-5.2 4.2z"/><path d="M12 18c-2.6 0-4.6-1.6-5.2-4.2 2.6 0 4.6 1.6 5.2 4.2z"/><path d="M12 18c2.6 0 4.6-1.6 5.2-4.2-2.6 0-4.6 1.6-5.2 4.2z"/>',
+    'allergen-crustaceans': '<ellipse cx="12" cy="15" rx="6" ry="4"/><path d="M3.5 4a2.5 2.5 0 1 0 5 0"/><path d="M15.5 4a2.5 2.5 0 1 0 5 0"/><path d="M6 6.5 8.5 11.8"/><path d="M18 6.5 15.5 11.8"/><path d="M6 15H3"/><path d="M18 15h3"/><path d="M7.3 17.5 4.5 20"/><path d="M16.7 17.5 19.5 20"/><path d="M10.5 11.2V9.5"/><path d="M13.5 11.2V9.5"/>',
+    'allergen-eggs': '<path d="M12 2.5c-3.6 0-6.5 5.5-6.5 10.5a6.5 6.5 0 0 0 13 0c0-5-2.9-10.5-6.5-10.5z"/><path d="M9 13.5a3 3 0 0 0 2.5 3"/>',
+    'allergen-fish': '<path d="M2.5 12c2-3.5 5-5.5 8.5-5.5 3 0 5.5 2 7 5.5-1.5 3.5-4 5.5-7 5.5-3.5 0-6.5-2-8.5-5.5z"/><path d="M18 12l3.5-3.5v7z"/><path d="M10 9a4.5 4.5 0 0 1 0 6"/><path d="M6.5 11h.01"/>',
+    'allergen-peanuts': '<path d="M8.8 12a5 5 0 1 1 6.4 0 5 5 0 1 1-6.4 0z"/><path d="M10.5 6.5h.01"/><path d="M13.5 8.5h.01"/><path d="M10.5 15.5h.01"/><path d="M13.5 17.5h.01"/>',
+    'allergen-soybeans': '<path d="M15.88 3.88 3.88 15.88a3 3 0 0 0 4.24 4.24L20.12 8.12a3 3 0 0 0-4.24-4.24z"/><circle cx="8.5" cy="15.5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="15.5" cy="8.5" r="1.5"/><path d="M20.5 3.5 22 2"/>',
+    'allergen-milk': '<path d="M6 10v10.5A1.5 1.5 0 0 0 7.5 22h9a1.5 1.5 0 0 0 1.5-1.5V10"/><path d="M6 10l3-5h6l3 5z"/><path d="M9 5V2.5h6V5"/><path d="M12 13.5c-1 1.3-1.5 2.1-1.5 2.8a1.5 1.5 0 0 0 3 0c0-.7-.5-1.5-1.5-2.8z"/>',
+    'allergen-nuts': '<path d="M5 9.5C5 6.5 8 4 12 4s7 2.5 7 5.5z"/><path d="M6.5 9.5v1.5c0 4.5 2.5 8.5 5.5 10 3-1.5 5.5-5.5 5.5-10V9.5"/><path d="M12 4c0-1 .5-1.7 1.5-2"/>',
+    'allergen-celery': '<path d="M7 22c-.8-4-.5-8.5 1-12.5h8c1.5 4 1.8 8.5 1 12.5z"/><path d="M10.5 22c-.3-4-.2-8.5.5-12.5"/><path d="M13.5 22c.3-4 .2-8.5-.5-12.5"/><path d="M9.5 9.5 7.5 6.5"/><path d="M12 9.5V5"/><path d="M14.5 9.5l2-3"/><circle cx="6.5" cy="5" r="1.5"/><circle cx="12" cy="3.5" r="1.5"/><circle cx="17.5" cy="5" r="1.5"/>',
+    'allergen-mustard': '<rect x="5" y="7" width="14" height="3" rx="1"/><path d="M6 10v8.5A3.5 3.5 0 0 0 9.5 22h5a3.5 3.5 0 0 0 3.5-3.5V10"/><path d="M13.5 7l3-4.5"/><rect x="9" y="13" width="6" height="5" rx="1"/>',
+    'allergen-sesame': '<path d="M7 3c1.2 1.2 1.8 2.5 1.8 3.5a1.8 1.8 0 0 1-3.6 0C5.2 5.5 5.8 4.2 7 3z" transform="rotate(-25 7 6)"/><path d="M16.5 3.5c1.2 1.2 1.8 2.5 1.8 3.5a1.8 1.8 0 0 1-3.6 0c0-1 .6-2.3 1.8-3.5z" transform="rotate(30 16.5 6.5)"/><path d="M8.5 13c1.2 1.2 1.8 2.5 1.8 3.5a1.8 1.8 0 0 1-3.6 0c0-1 .6-2.3 1.8-3.5z" transform="rotate(15 8.5 16)"/><path d="M17 12c1.2 1.2 1.8 2.5 1.8 3.5a1.8 1.8 0 0 1-3.6 0c0-1 .6-2.3 1.8-3.5z" transform="rotate(-20 17 15)"/>',
+    'allergen-sulphites': '<path d="M7.5 3h9c.3 1.5.5 3 .5 4.5a5 5 0 0 1-10 0c0-1.5.2-3 .5-4.5z"/><path d="M12 12.5V21"/><path d="M8.5 21h7"/><path d="M7.2 7h9.6"/>',
+    'allergen-lupin': '<path d="M12 2.5a1.7 1.7 0 0 1 1.2 3 1.8 1.8 0 0 1 .8 3 1.9 1.9 0 0 1 .8 3 2 2 0 0 1-.3 2.8H9.5a2 2 0 0 1-.3-2.8 1.9 1.9 0 0 1 .8-3 1.8 1.8 0 0 1 .8-3 1.7 1.7 0 0 1 1.2-3z"/><path d="M10.8 8.5h2.4"/><path d="M10.2 11.5h3.6"/><path d="M12 14.3V22"/><path d="M12 19.5 7 17.5"/><path d="M12 19.5 8.5 16"/><path d="M12 19.5l5-2"/><path d="M12 19.5l3.5-3.5"/>',
+    'allergen-molluscs': '<path d="M12 19 4.5 11a7.5 7.5 0 0 1 15 0z"/><path d="M12 19V3.5"/><path d="M12 19 7.2 5.2"/><path d="M12 19l4.8-13.8"/><path d="M9.5 22 12 19l2.5 3z"/>',
 };
 
 const SIZE_PX = { sm: 16, md: 20, lg: 24, xl: 32 };
@@ -163,12 +184,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 const BASE = 'inline-flex items-center justify-center gap-2 font-medium ' +
     'transition-colors duration-150 select-none whitespace-nowrap cursor-pointer ' +
     'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ' +
-    'focus-visible:ring-brand-500 disabled:opacity-50 disabled:pointer-events-none';
+    'focus-visible:ring-offset-surface focus-visible:ring-brand-500 ' +
+    'disabled:opacity-50 disabled:pointer-events-none';
+/**
+ * Dark mode has its own fills. A monochrome brand's dark 600 step is a mid-dark grey: as a primary fill
+ * it read as disabled, and at `disabled:opacity-50` the real disabled state looked the same. So the dark
+ * primary is the inverted light fill (`ink` on `surface`); tertiary and ghost swap their black/brand-50
+ * tints for white ones, which show on a dark surface.
+ */
 const VARIANTS$2 = {
-    primary: 'bg-brand-600 text-white shadow-sm hover:bg-brand-700 active:bg-brand-800',
+    primary: 'bg-brand-600 text-white shadow-sm hover:bg-brand-700 active:bg-brand-800 ' +
+        'dark:bg-ink dark:text-surface dark:hover:bg-ink/90 dark:active:bg-ink/80',
     secondary: 'bg-surface text-ink border border-border shadow-sm hover:bg-muted active:bg-brand-50',
-    tertiary: 'bg-brand-50 text-brand-700 hover:bg-brand-100 active:bg-brand-200/70',
-    ghost: 'bg-transparent text-ink-soft hover:bg-black/5 active:bg-black/10',
+    tertiary: 'bg-brand-50 text-brand-700 hover:bg-brand-100 active:bg-brand-200/70 ' +
+        'dark:bg-white/10 dark:text-ink dark:hover:bg-white/15 dark:active:bg-white/20',
+    ghost: 'bg-transparent text-ink-soft hover:bg-black/5 active:bg-black/10 ' +
+        'dark:hover:bg-white/10 dark:active:bg-white/15',
     danger: 'bg-danger text-white shadow-sm hover:brightness-95 active:brightness-90',
 };
 const SIZES$b = {
@@ -283,7 +314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `, styles: [".sds-spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:9999px;animation:sds-spin .6s linear infinite}@keyframes sds-spin{to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
-let nextId$f = 0;
+let nextId$g = 0;
 const SIZES$a = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
@@ -296,7 +327,7 @@ const SIZES$a = {
  * sidebar search field).
  */
 class SdsInput {
-    inputId = `sds-input-${nextId$f++}`;
+    inputId = `sds-input-${nextId$g++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -629,7 +660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `, styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 100000s ease-in-out 0s;-webkit-text-fill-color:currentColor;caret-color:currentColor}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], trailingAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingAction", required: false }] }], trailingActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionLabel", required: false }] }], trailingActionPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionPressed", required: false }] }], trailingActionClick: [{ type: i0.Output, args: ["trailingActionClick"] }] } });
 
-let nextId$e = 0;
+let nextId$f = 0;
 const HEIGHTS = {
     sm: 'h-9',
     md: 'h-10',
@@ -652,7 +683,7 @@ const TEXT = {
  * {@link min}/{@link max} on blur and on every spinner step; ArrowUp / ArrowDown also step it.
  */
 class SdsInputNumber {
-    inputId = `sds-input-number-${nextId$e++}`;
+    inputId = `sds-input-number-${nextId$f++}`;
     fieldRef = viewChild('field', ...(ngDevMode ? [{ debugName: "fieldRef" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
@@ -1359,7 +1390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], currencyDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDisplay", required: false }] }], useGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "useGrouping", required: false }] }], minFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFractionDigits", required: false }] }], maxFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFractionDigits", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], buttonLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLayout", required: false }] }], incrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementIcon", required: false }] }], decrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementIcon", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }] } });
 
-let nextId$d = 0;
+let nextId$e = 0;
 const SIZES$9 = {
     sm: 'min-h-9 text-sm',
     md: 'min-h-10 text-sm',
@@ -1379,7 +1410,7 @@ const SIZES$9 = {
  * `<sds-localized-input [languages]="['fr','nl','en']" [(ngModel)]="title" />`.
  */
 class SdsLocalizedInput {
-    inputId = `sds-localized-input-${nextId$d++}`;
+    inputId = `sds-localized-input-${nextId$e++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
@@ -1635,7 +1666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], currentLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLanguage", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], languageSwitcherLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "languageSwitcherLabel", required: false }] }], untranslatedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "untranslatedLabel", required: false }] }] } });
 
-let nextId$c = 0;
+let nextId$d = 0;
 const SIZES$8 = {
     md: 'h-12 w-11 text-lg',
     lg: 'h-14 w-12 text-xl',
@@ -1652,7 +1683,7 @@ const SIZES$8 = {
  * first box and have it land correctly.
  */
 class SdsOtpInput {
-    groupId = `sds-otp-${nextId$c++}`;
+    groupId = `sds-otp-${nextId$d++}`;
     /** How many boxes / characters the code has. */
     length = input(6, ...(ngDevMode ? [{ debugName: "length", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -1952,7 +1983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputMode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], cellLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellLabel", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }], cells: [{ type: i0.ViewChildren, args: ['cell', { isSignal: true }] }] } });
 
-let nextId$b = 0;
+let nextId$c = 0;
 const SIZES$7 = {
     sm: 'text-sm px-3 py-2',
     md: 'text-sm px-3.5 py-2.5',
@@ -1964,7 +1995,7 @@ const SIZES$7 = {
  * [(ngModel)].
  */
 class SdsTextarea {
-    fieldId = `sds-textarea-${nextId$b++}`;
+    fieldId = `sds-textarea-${nextId$c++}`;
     field = viewChild('field', ...(ngDevMode ? [{ debugName: "field" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
@@ -2217,7 +2248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }] } });
 
-let nextId$a = 0;
+let nextId$b = 0;
 const SIZES$6 = {
     sm: { track: 'h-5 w-9', knob: 'h-4 w-4', on: 'translate-x-4', icon: 11 },
     md: { track: 'h-6 w-11', knob: 'h-5 w-5', on: 'translate-x-5', icon: 13 },
@@ -2230,7 +2261,7 @@ const SIZES$6 = {
  * states.
  */
 class SdsToggleSwitch {
-    fieldId = `sds-toggle-switch-${nextId$a++}`;
+    fieldId = `sds-toggle-switch-${nextId$b++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -2474,7 +2505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], trueValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "trueValue", required: false }] }], falseValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "falseValue", required: false }] }], onIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "onIcon", required: false }] }], offIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "offIcon", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }] } });
 
-let nextId$9 = 0;
+let nextId$a = 0;
 /**
  * Boolean checkbox. Implements ControlValueAccessor — use with reactive forms
  * or `[(ngModel)]`. Renders a styled box (brand-filled with a check when on)
@@ -2486,7 +2517,7 @@ let nextId$9 = 0;
  * <sds-checkbox label="Fusion automatique" [(ngModel)]="autoMerge" />
  */
 class SdsCheckbox {
-    id = `sds-checkbox-${nextId$9++}`;
+    id = `sds-checkbox-${nextId$a++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -2620,7 +2651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
-let nextId$8 = 0;
+let nextId$9 = 0;
 /**
  * Mounted radios by group name. A pick updates the rest of its group, because a native radio says
  * nothing when the browser unchecks it — without this a reactive form would leave the old choice drawn.
@@ -2646,7 +2677,7 @@ const groups = new Map();
  * <sds-radio name="size" value="large" label="Grand" [(ngModel)]="size" />
  */
 class SdsRadio {
-    id = `sds-radio-${nextId$8++}`;
+    id = `sds-radio-${nextId$9++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -3008,6 +3039,372 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }] } });
 
+/** Every allergen in Annex II order — iterate it to render a declaration grid of 14. */
+const SDS_ALLERGENS = [
+    'CEREALS_GLUTEN',
+    'CRUSTACEANS',
+    'EGGS',
+    'FISH',
+    'PEANUTS',
+    'SOYBEANS',
+    'MILK',
+    'NUTS',
+    'CELERY',
+    'MUSTARD',
+    'SESAME',
+    'SULPHITES',
+    'LUPIN',
+    'MOLLUSCS',
+];
+/** Registry icon for each allergen. */
+const SDS_ALLERGEN_ICONS = {
+    CEREALS_GLUTEN: 'allergen-cereals-gluten',
+    CRUSTACEANS: 'allergen-crustaceans',
+    EGGS: 'allergen-eggs',
+    FISH: 'allergen-fish',
+    PEANUTS: 'allergen-peanuts',
+    SOYBEANS: 'allergen-soybeans',
+    MILK: 'allergen-milk',
+    NUTS: 'allergen-nuts',
+    CELERY: 'allergen-celery',
+    MUSTARD: 'allergen-mustard',
+    SESAME: 'allergen-sesame',
+    SULPHITES: 'allergen-sulphites',
+    LUPIN: 'allergen-lupin',
+    MOLLUSCS: 'allergen-molluscs',
+};
+/**
+ * English names, as a fallback and for the showcase. An app serving more than one language passes its
+ * own translated name through [label] — the library never picks a language for you.
+ */
+const SDS_ALLERGEN_LABELS_EN = {
+    CEREALS_GLUTEN: 'Cereals containing gluten',
+    CRUSTACEANS: 'Crustaceans',
+    EGGS: 'Eggs',
+    FISH: 'Fish',
+    PEANUTS: 'Peanuts',
+    SOYBEANS: 'Soybeans',
+    MILK: 'Milk',
+    NUTS: 'Nuts',
+    CELERY: 'Celery',
+    MUSTARD: 'Mustard',
+    SESAME: 'Sesame',
+    SULPHITES: 'Sulphites',
+    LUPIN: 'Lupin',
+    MOLLUSCS: 'Molluscs',
+};
+/** Accepts the enum spelling, and tolerates `milk` / `cereals-gluten` so a hand-typed value still resolves. */
+function normalize(value) {
+    if (!value)
+        return null;
+    const key = String(value).trim().toUpperCase().replace(/-/g, '_');
+    return key in SDS_ALLERGEN_ICONS ? key : null;
+}
+/**
+ * The pictogram for one EU allergen, taking the API enum value directly. With a [label] it is an image
+ * with that accessible name (role="img"); without one it is decorative (aria-hidden), for when visible
+ * text beside it already names the allergen.
+ *
+ * @example
+ * <sds-allergen-icon allergen="MILK" label="Milk" />
+ * <sds-allergen-icon [allergen]="a" [size]="16" />   <!-- decorative: text next to it names it -->
+ */
+class SdsAllergenIcon {
+    /** The allergen, as the API enum value (`MILK`, `CEREALS_GLUTEN`, …). */
+    allergen = input.required(...(ngDevMode ? [{ debugName: "allergen" }] : []));
+    /** Accessible name. Empty (default) = decorative, hidden from assistive tech. */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Also show the [label] as a native tooltip on hover. */
+    showTitle = input(false, ...(ngDevMode ? [{ debugName: "showTitle", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Square size: a pixel number, a numeric string, or a keyword (sm·md·lg·xl). */
+    size = input(20, ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Stroke width of the line icon. */
+    strokeWidth = input(2, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
+    iconName = computed(() => {
+        const key = normalize(this.allergen());
+        return key ? SDS_ALLERGEN_ICONS[key] : null;
+    }, ...(ngDevMode ? [{ debugName: "iconName" }] : []));
+    constructor() {
+        if (isDevMode()) {
+            effect(() => {
+                if (!this.iconName()) {
+                    console.warn(`sds-allergen-icon: unknown allergen "${this.allergen()}".`);
+                }
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsAllergenIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsAllergenIcon, isStandalone: true, selector: "sds-allergen-icon", inputs: { allergen: { classPropertyName: "allergen", publicName: "allergen", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "label() ? \"img\" : null", "attr.aria-label": "label() || null", "attr.aria-hidden": "label() ? null : \"true\"", "attr.title": "showTitle() && label() ? label() : null" }, classAttribute: "inline-flex shrink-0" }, ngImport: i0, template: `
+    @if (iconName(); as name) {
+      <sds-icon [name]="name" [size]="size()" [strokeWidth]="strokeWidth()" />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsAllergenIcon, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-allergen-icon',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SdsIcon],
+                    host: {
+                        class: 'inline-flex shrink-0',
+                        '[attr.role]': 'label() ? "img" : null',
+                        '[attr.aria-label]': 'label() || null',
+                        '[attr.aria-hidden]': 'label() ? null : "true"',
+                        '[attr.title]': 'showTitle() && label() ? label() : null',
+                    },
+                    template: `
+    @if (iconName(); as name) {
+      <sds-icon [name]="name" [size]="size()" [strokeWidth]="strokeWidth()" />
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { allergen: [{ type: i0.Input, args: [{ isSignal: true, alias: "allergen", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTitle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }] } });
+
+/** Activation order: none → contains → may-contain → none. */
+const ORDER = ['none', 'contains', 'may-contain'];
+let nextId$8 = 0;
+/**
+ * A chip that cycles through three states — `none`, `contains`, `may-contain` — built for the 14-tile
+ * allergen declaration grid, but generic (any "no / yes / maybe" declaration).
+ *
+ * **The state never relies on colour alone.** Each state has its own border (thin solid · thick solid
+ * and filled · thick dashed), its own mark (none · a check · a question mark), a visible state caption
+ * (turn off with `showState`), and the state text is part of the button's accessible name.
+ *
+ * Interaction: click, Enter or Space moves to the next state; Shift+Enter / Shift+Space moves back;
+ * Delete or Backspace resets to `none`. A polite live region announces the new state after a change.
+ * The value is a two-way `model` — bind `[(value)]`.
+ *
+ * All visible and spoken text comes from inputs with English defaults; pass translated labels.
+ *
+ * @example
+ * <sds-tri-state-chip label="Milk" icon="allergen-milk" [(value)]="state.MILK"
+ *                     containsLabel="Contains" mayContainLabel="May contain" noneLabel="Not present" />
+ */
+class SdsTriStateChip {
+    chipId = `sds-tri-state-chip-${nextId$8++}`;
+    /** Current state. Two-way: `[(value)]`. */
+    value = model('none', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Visible name (e.g. the allergen). Required — the chip has no other accessible name. */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Optional leading registry icon, e.g. an `allergen-*` pictogram. */
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Show the state as a small visible caption under the label. */
+    showState = input(true, ...(ngDevMode ? [{ debugName: "showState", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** State text for `none` (visible caption and spoken). */
+    noneLabel = input('Not present', ...(ngDevMode ? [{ debugName: "noneLabel" }] : []));
+    /** State text for `contains`. */
+    containsLabel = input('Contains', ...(ngDevMode ? [{ debugName: "containsLabel" }] : []));
+    /** State text for `may-contain`. */
+    mayContainLabel = input('May contain', ...(ngDevMode ? [{ debugName: "mayContainLabel" }] : []));
+    /**
+     * Optional usage hint read after the name, e.g. "Press to change". Off by default: a button that
+     * announces its state and changes on activation is self-explanatory to most users.
+     */
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    /** Last user-driven change, spoken by the live region. Programmatic writes stay silent. */
+    announcement = signal('', ...(ngDevMode ? [{ debugName: "announcement" }] : []));
+    stateText = computed(() => this.textFor(this.value()), ...(ngDevMode ? [{ debugName: "stateText" }] : []));
+    chipClass = computed(() => {
+        const sm = this.size() === 'sm';
+        const base = 'relative flex w-full min-w-0 cursor-pointer select-none items-center rounded-control border-2 ' +
+            'text-left transition-colors focus-visible:outline-none focus-visible:ring-2 ' +
+            'focus-visible:ring-brand-500 focus-visible:ring-offset-2 focus-visible:ring-offset-surface ' +
+            'disabled:cursor-not-allowed disabled:opacity-60 ' +
+            (sm ? 'min-h-9 gap-2 px-2 py-1' : 'min-h-12 gap-2.5 px-3 py-2');
+        switch (this.value()) {
+            case 'contains':
+                // Filled + solid thick border + check. In dark mode a monochrome brand-600 is a dim grey, so the
+                // fill inverts to ink/surface (the same rule as sds-toggle-switch and sds-button primary).
+                return (`${base} border-brand-600 bg-brand-600 text-white ` +
+                    'dark:border-ink dark:bg-ink dark:text-surface hover:bg-brand-700 dark:hover:bg-ink-soft');
+            case 'may-contain':
+                // Unfilled + DASHED thick border + question mark.
+                return (`${base} border-dashed border-brand-600 bg-brand-50 text-ink ` +
+                    'dark:border-ink-soft dark:bg-muted hover:bg-brand-100 dark:hover:bg-surface');
+            default:
+                return `${base} border-border bg-surface text-ink-soft hover:border-ink-faint hover:text-ink`;
+        }
+    }, ...(ngDevMode ? [{ debugName: "chipClass" }] : []));
+    captionClass = computed(() => {
+        switch (this.value()) {
+            case 'contains':
+                return 'text-white/85 dark:text-surface/85';
+            case 'may-contain':
+                return 'text-ink-soft';
+            default:
+                return 'text-ink-faint';
+        }
+    }, ...(ngDevMode ? [{ debugName: "captionClass" }] : []));
+    onClick(event) {
+        if (this.disabled())
+            return;
+        // A real Shift+click steps back too; keyboard activation is handled in onKeydown.
+        this.step(event.shiftKey ? -1 : 1);
+    }
+    onKeydown(event) {
+        if (this.disabled())
+            return;
+        if ((event.key === 'Enter' || event.key === ' ') && event.shiftKey) {
+            // Handle it here so the native button click (always "forward") does not also fire.
+            event.preventDefault();
+            this.step(-1);
+        }
+        else if (event.key === 'Delete' || event.key === 'Backspace') {
+            event.preventDefault();
+            this.set('none');
+        }
+    }
+    step(delta) {
+        const i = ORDER.indexOf(this.value());
+        const next = ORDER[(Math.max(0, i) + delta + ORDER.length) % ORDER.length];
+        this.set(next);
+    }
+    set(next) {
+        if (next === this.value())
+            return;
+        this.value.set(next);
+        this.announcement.set(`${this.label()}: ${this.textFor(next)}`);
+    }
+    textFor(state) {
+        switch (state) {
+            case 'contains':
+                return this.containsLabel();
+            case 'may-contain':
+                return this.mayContainLabel();
+            default:
+                return this.noneLabel();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTriStateChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsTriStateChip, isStandalone: true, selector: "sds-tri-state-chip", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showState: { classPropertyName: "showState", publicName: "showState", isSignal: true, isRequired: false, transformFunction: null }, noneLabel: { classPropertyName: "noneLabel", publicName: "noneLabel", isSignal: true, isRequired: false, transformFunction: null }, containsLabel: { classPropertyName: "containsLabel", publicName: "containsLabel", isSignal: true, isRequired: false, transformFunction: null }, mayContainLabel: { classPropertyName: "mayContainLabel", publicName: "mayContainLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "inline-flex min-w-0" }, ngImport: i0, template: `
+    <button
+      type="button"
+      [id]="chipId"
+      [class]="chipClass()"
+      [disabled]="disabled()"
+      [attr.data-state]="value()"
+      [attr.aria-describedby]="hint() ? chipId + '-hint' : null"
+      (click)="onClick($event)"
+      (keydown)="onKeydown($event)"
+    >
+      @if (icon()) {
+        <sds-icon [name]="icon()!" [size]="size() === 'sm' ? 18 : 22" class="shrink-0" />
+      }
+
+      <span class="flex min-w-0 flex-1 flex-col text-left leading-tight">
+        <!-- Up to two lines, so "Cereals containing gluten" stays readable in a narrow grid cell. -->
+        <span
+          class="line-clamp-2 break-words font-semibold"
+          [class]="size() === 'sm' ? 'text-xs' : 'text-sm'"
+          >{{ label() }}</span
+        >
+        @if (showState()) {
+          <span
+            class="truncate text-[11px] font-medium"
+            [class]="captionClass()"
+            aria-hidden="true"
+            >{{ stateText() }}</span
+          >
+        }
+      </span>
+      <!-- The state is part of the accessible name ("Milk, may contain"), visible caption or not. -->
+      <span class="sr-only">, {{ stateText() }}</span>
+
+      <!-- Non-colour mark: nothing / a check / a question mark. The slot keeps its width in every
+           state so the chip never shifts when cycled. -->
+      <span
+        class="grid shrink-0 place-items-center"
+        [class]="size() === 'sm' ? 'h-4 w-4' : 'h-5 w-5'"
+        aria-hidden="true"
+      >
+        @switch (value()) {
+          @case ('contains') {
+            <sds-icon name="check" [size]="size() === 'sm' ? 14 : 18" [strokeWidth]="3" />
+          }
+          @case ('may-contain') {
+            <sds-icon name="circle-help" [size]="size() === 'sm' ? 15 : 19" />
+          }
+        }
+      </span>
+    </button>
+
+    @if (hint()) {
+      <span [id]="chipId + '-hint'" class="sr-only">{{ hint() }}</span>
+    }
+    <span class="sr-only" aria-live="polite" aria-atomic="true">{{ announcement() }}</span>
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTriStateChip, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-tri-state-chip',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SdsIcon],
+                    host: { class: 'inline-flex min-w-0' },
+                    template: `
+    <button
+      type="button"
+      [id]="chipId"
+      [class]="chipClass()"
+      [disabled]="disabled()"
+      [attr.data-state]="value()"
+      [attr.aria-describedby]="hint() ? chipId + '-hint' : null"
+      (click)="onClick($event)"
+      (keydown)="onKeydown($event)"
+    >
+      @if (icon()) {
+        <sds-icon [name]="icon()!" [size]="size() === 'sm' ? 18 : 22" class="shrink-0" />
+      }
+
+      <span class="flex min-w-0 flex-1 flex-col text-left leading-tight">
+        <!-- Up to two lines, so "Cereals containing gluten" stays readable in a narrow grid cell. -->
+        <span
+          class="line-clamp-2 break-words font-semibold"
+          [class]="size() === 'sm' ? 'text-xs' : 'text-sm'"
+          >{{ label() }}</span
+        >
+        @if (showState()) {
+          <span
+            class="truncate text-[11px] font-medium"
+            [class]="captionClass()"
+            aria-hidden="true"
+            >{{ stateText() }}</span
+          >
+        }
+      </span>
+      <!-- The state is part of the accessible name ("Milk, may contain"), visible caption or not. -->
+      <span class="sr-only">, {{ stateText() }}</span>
+
+      <!-- Non-colour mark: nothing / a check / a question mark. The slot keeps its width in every
+           state so the chip never shifts when cycled. -->
+      <span
+        class="grid shrink-0 place-items-center"
+        [class]="size() === 'sm' ? 'h-4 w-4' : 'h-5 w-5'"
+        aria-hidden="true"
+      >
+        @switch (value()) {
+          @case ('contains') {
+            <sds-icon name="check" [size]="size() === 'sm' ? 14 : 18" [strokeWidth]="3" />
+          }
+          @case ('may-contain') {
+            <sds-icon name="circle-help" [size]="size() === 'sm' ? 15 : 19" />
+          }
+        }
+      </span>
+    </button>
+
+    @if (hint()) {
+      <span [id]="chipId + '-hint'" class="sr-only">{{ hint() }}</span>
+    }
+    <span class="sr-only" aria-live="polite" aria-atomic="true">{{ announcement() }}</span>
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showState: [{ type: i0.Input, args: [{ isSignal: true, alias: "showState", required: false }] }], noneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noneLabel", required: false }] }], containsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "containsLabel", required: false }] }], mayContainLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mayContainLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
+
 /** Small, dependency-free date helpers (day-granularity, local time). */
 function startOfDay(d) {
     return new Date(d.getFullYear(), d.getMonth(), d.getDate());
@@ -11537,5 +11934,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenuItem, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsSearchCommand, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
+export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenuItem, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsSearchCommand, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
 //# sourceMappingURL=besaitech-ng-design-system.mjs.map