@masmarino/gabarit 0.5.0 → 0.6.0

package/ACCESSIBILITY.md

@@ -203,7 +203,12 @@ The other 76 criteria. The main ones:
   - `gbt-input`: `showPasswordLabel` (`'Show password'`),
     `hidePasswordLabel` (`'Hide password'`).
   - `gbt-select`: `placeholder` (`'Select…'`), `selectedCountLabel`
-    (function, `` `${count} selected` ``).
+    (function, `` `${count} selected` `` — in `chips` mode it is also what
+    the status region announces, criterion 7.5), `chipRemoveLabel`
+    (function, `` `Remove ${label}` ``, the accessible name of each chip's
+    remove button in `chips` mode).
+  - `gbt-tag`: `removeLabel` (`'Remove'`). `gbt-select` passes its own
+    `chipRemoveLabel` down to this input for the chips it renders.
   - `gbt-modal`: `closeLabel` (`'Close'`).
   - `gbt-table`: `emptyMessage` (`'No data'`).
   - `gbt-search-bar`: `placeholder` (`'Search…'`), `noResultsMessage`

package/fesm2022/masmarino-gabarit.mjs

@@ -7,7 +7,7 @@ import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, FormsModule } from
 import { NgTemplateOutlet } from '@angular/common';
 import { isObservable } from 'rxjs';
 
-const GABARIT_VERSION = '0.5.0';
+const GABARIT_VERSION = '0.6.0';
 
 const BUILT_IN_ICONS = {
     search: `<path d="m21 21-4.34-4.34" />
@@ -239,6 +239,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             args: [{ selector: 'gbt-badge', standalone: true, imports: [Icon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"gbt-badge\" [attr.data-variant]=\"variant()\">\n  @if (icon(); as name) {\n    <gbt-icon [name]=\"name\" class=\"gbt-badge__icon\" aria-hidden=\"true\" />\n  }\n  <span class=\"gbt-badge__label\"><ng-content /></span>\n</span>\n", styles: [":host{display:inline-flex}.gbt-badge{box-sizing:border-box;display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:999px;background:var(--bg-hover);color:var(--text-secondary);font-size:.75rem;font-weight:600;line-height:1.4;white-space:nowrap}.gbt-badge[data-variant=success]{background:var(--color-success-bg);color:var(--color-success-bg-text)}.gbt-badge[data-variant=warning]{background:var(--color-warning-bg);color:var(--color-warning-bg-text)}.gbt-badge[data-variant=error]{background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-badge[data-variant=info]{background:var(--color-info-bg);color:var(--color-info-bg-text)}.gbt-badge__icon{flex-shrink:0;width:.875em;height:.875em}.gbt-badge__label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
 
+/** A 6-digit hex color, with or without its leading `#`. */
+const HEX_6 = /^#?[0-9a-fA-F]{6}$/;
+function normalizeHex(hex) {
+    if (!HEX_6.test(hex)) {
+        throw new Error(`getReadableTextColor: expected a 6-digit hex color such as "#dc2626" or "dc2626", got ${JSON.stringify(hex)}. ` +
+            'Shorthand hex (#abc), CSS named colors, rgb()/hsl() and custom properties are not supported.');
+    }
+    return hex.replace('#', '');
+}
+function linearizeChannel(value) {
+    const c = value / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+function relativeLuminance(normalizedHex) {
+    const r = parseInt(normalizedHex.substring(0, 2), 16);
+    const g = parseInt(normalizedHex.substring(2, 4), 16);
+    const b = parseInt(normalizedHex.substring(4, 6), 16);
+    return 0.2126 * linearizeChannel(r) + 0.7152 * linearizeChannel(g) + 0.0722 * linearizeChannel(b);
+}
+function contrastRatio(normalizedA, normalizedB) {
+    const lA = relativeLuminance(normalizedA);
+    const lB = relativeLuminance(normalizedB);
+    const lighter = Math.max(lA, lB);
+    const darker = Math.min(lA, lB);
+    return (lighter + 0.05) / (darker + 0.05);
+}
+/**
+ * Returns `'#ffffff'` or `'#000000'`, whichever reaches a higher WCAG contrast
+ * ratio against `backgroundHex`. Used by `Tag` to keep its text readable on
+ * an arbitrary caller-supplied background color that isn't one of the
+ * design system's own semantic tokens.
+ *
+ * These two endpoints are not interchangeable with a "softer" dark such as
+ * `#1a1a1a`: sweeping all 16 777 216 sRGB backgrounds, the worst achievable
+ * ratio is **4.58:1** with `#000000` (at `#cf0dcc`) but only **4.17:1** with
+ * `#1a1a1a` (at `#da25c3`) — below the 4.5:1 AA threshold that `Tag`'s
+ * 12px bold text must meet, since it is not "large text".
+ *
+ * @param backgroundHex a 6-digit hex color, with or without its leading `#`.
+ * @throws if `backgroundHex` is not a well-formed 6-digit hex color. Silently
+ * guessing would be worse: a malformed value used to produce `NaN` ratios,
+ * and `NaN >= NaN` being `false` returned dark text for *any* unparseable
+ * input — so `'#000'` got dark text on a black background.
+ */
+function getReadableTextColor(backgroundHex) {
+    const background = normalizeHex(backgroundHex);
+    const white = 'ffffff';
+    const dark = '000000';
+    return contrastRatio(background, white) >= contrastRatio(background, dark) ? '#ffffff' : '#000000';
+}
+
+class Tag {
+    color = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    removable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
+    removeLabel = input('Remove', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+    removed = output();
+    textColor = computed(() => getReadableTextColor(this.color()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textColor" }] : /* istanbul ignore next */ []));
+    onRemoveClick(event) {
+        event.stopPropagation();
+        this.removed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Tag, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Tag, isStandalone: true, selector: "gbt-tag", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: "<span class=\"gbt-tag\" [style.background]=\"color()\" [style.color]=\"textColor()\">\n  <span class=\"gbt-tag__label\"><ng-content /></span>\n  @if (removable()) {\n    <button type=\"button\" class=\"gbt-tag__remove\" [attr.aria-label]=\"removeLabel()\" (click)=\"onRemoveClick($event)\">\n      <gbt-icon name=\"x\" aria-hidden=\"true\" />\n    </button>\n  }\n</span>\n", styles: [":host{display:inline-flex;max-width:100%}.gbt-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--site-border-radius-sm);font-size:.75rem;font-weight:600;line-height:1.4;max-width:100%}.gbt-tag__label{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-tag__remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:transparent;border:none;border-radius:4px;color:currentColor;cursor:pointer;transition:background var(--site-transition-fast)}.gbt-tag__remove:hover{background:color-mix(in srgb,currentColor 20%,transparent)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "gbt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Tag, decorators: [{
+            type: Component,
+            args: [{ selector: 'gbt-tag', standalone: true, imports: [Icon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"gbt-tag\" [style.background]=\"color()\" [style.color]=\"textColor()\">\n  <span class=\"gbt-tag__label\"><ng-content /></span>\n  @if (removable()) {\n    <button type=\"button\" class=\"gbt-tag__remove\" [attr.aria-label]=\"removeLabel()\" (click)=\"onRemoveClick($event)\">\n      <gbt-icon name=\"x\" aria-hidden=\"true\" />\n    </button>\n  }\n</span>\n", styles: [":host{display:inline-flex;max-width:100%}.gbt-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--site-border-radius-sm);font-size:.75rem;font-weight:600;line-height:1.4;max-width:100%}.gbt-tag__label{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-tag__remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:transparent;border:none;border-radius:4px;color:currentColor;cursor:pointer;transition:background var(--site-transition-fast)}.gbt-tag__remove:hover{background:color-mix(in srgb,currentColor 20%,transparent)}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: true }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
+
 class EmptyState {
     illustration = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "illustration" }] : /* istanbul ignore next */ []));
@@ -348,6 +421,7 @@ class Select {
     options = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    chips = input(false, { ...(ngDevMode ? { debugName: "chips" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     placeholder = input('Select…', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -356,6 +430,8 @@ class Select {
     ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     selectedCountLabel = input((count) => `${count} selected`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedCountLabel" }] : /* istanbul ignore next */ []));
+    chipRemoveLabel = input((label) => `Remove ${label}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chipRemoveLabel" }] : /* istanbul ignore next */ []));
     open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     activeIndex = signal(-1, /* @ts-ignore */
@@ -368,6 +444,8 @@ class Select {
     ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
     labelId = computed(() => `${this.id()}-label`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+    chipsId = computed(() => `${this.id()}-chips`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chipsId" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.formDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     onChange = () => { };
@@ -399,12 +477,33 @@ class Select {
         if (opts.length === 0) {
             return this.placeholder();
         }
+        if (this.chips() && this.multiple()) {
+            return this.placeholder();
+        }
         if (this.multiple() && opts.length > 1) {
             return this.selectedCountLabel()(opts.length);
         }
         return opts[0].label;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
+    chipsVisible = computed(() => this.chips() && this.multiple() && this.selectedOptions().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chipsVisible" }] : /* istanbul ignore next */ []));
+    /**
+     * In chips mode the trigger keeps showing the placeholder, so the selection
+     * is conveyed to assistive technology by describing the trigger with the
+     * chip row itself. The error message keeps its own id in the list.
+     */
+    describedBy = computed(() => {
+        const ids = [];
+        if (this.chipsVisible()) {
+            ids.push(this.chipsId());
+        }
+        if (this.errorMessage()) {
+            ids.push(`${this.id()}-error`);
+        }
+        return ids.length > 0 ? ids.join(' ') : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
     triggerIcon = computed(() => {
         const opts = this.selectedOptions();
         return opts.length === 1 ? opts[0].icon : undefined;
@@ -437,12 +536,41 @@ class Select {
             return;
         }
         const rect = trigger.getBoundingClientRect();
+        // In chips mode the chip row sits between the trigger and the panel.
+        // Anchoring the panel to the trigger alone would lay it over the chips,
+        // whose remove buttons are focusable — WCAG 2.4.11 "focus not obscured".
+        const chipRow = this.elementRef.nativeElement.querySelector('.gbt-select__chips');
+        const anchorBottom = chipRow
+            ? Math.max(rect.bottom, chipRow.getBoundingClientRect().bottom)
+            : rect.bottom;
         this.panelStyle.set({
-            top: `${rect.bottom + 6}px`,
+            top: `${anchorBottom + 6}px`,
             left: `${rect.left}px`,
             width: `${rect.width}px`,
         });
     }
+    /**
+     * Removes the chip at `index`. Refuses to mutate anything while the control
+     * is disabled (the remove buttons are not rendered then, but a programmatic
+     * caller must not be able to bypass the disabled state either), and moves
+     * focus off the button it is about to destroy — otherwise focus falls back
+     * to `<body>`.
+     */
+    removeChip(value, index) {
+        if (this.isDisabled()) {
+            return;
+        }
+        const host = this.elementRef.nativeElement;
+        const removeButtons = Array.from(host.querySelectorAll('.gbt-select__chips .gbt-tag__remove'));
+        // `@for` tracks options by value, so the surviving chips keep their DOM
+        // nodes across this removal — the element resolved here is still the right
+        // one once the view updates.
+        const nextFocus = removeButtons[index + 1] ??
+            removeButtons[index - 1] ??
+            host.querySelector('.gbt-select__trigger');
+        this.selectOption(value);
+        nextFocus?.focus();
+    }
     selectOption(value) {
         if (this.multiple()) {
             const current = this.selected();
@@ -451,6 +579,9 @@ class Select {
                 : [...current, value];
             this.selected.set(next);
             this.onChange(next);
+            // A chip can be removed without ever opening the panel, so this is the
+            // only place that marks the control as touched in that flow.
+            this.onTouched();
         }
         else {
             this.selected.set([value]);
@@ -504,17 +635,17 @@ class Select {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Select, isStandalone: true, selector: "gbt-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, selectedCountLabel: { classPropertyName: "selectedCountLabel", publicName: "selectedCountLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "handleClickOutside($event)", "keydown": "onKeydown($event)", "window:scroll": "updatePanelPosition()", "window:resize": "updatePanelPosition()" }, properties: { "class.gbt-select--sm": "size() === 'sm'" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Select, isStandalone: true, selector: "gbt-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, selectedCountLabel: { classPropertyName: "selectedCountLabel", publicName: "selectedCountLabel", isSignal: true, isRequired: false, transformFunction: null }, chipRemoveLabel: { classPropertyName: "chipRemoveLabel", publicName: "chipRemoveLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "handleClickOutside($event)", "keydown": "onKeydown($event)", "window:scroll": "updatePanelPosition()", "window:resize": "updatePanelPosition()" }, properties: { "class.gbt-select--sm": "size() === 'sm'" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => Select),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"gbt-select\" [class.gbt-select--disabled]=\"isDisabled()\">\n  @if (label()) {\n    <label [id]=\"labelId()\" [for]=\"id()\" class=\"gbt-select__label\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n\n  <button\n    type=\"button\"\n    [id]=\"id()\"\n    class=\"gbt-select__trigger\"\n    [class.gbt-select__trigger--open]=\"open()\"\n    [disabled]=\"isDisabled()\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"open() ? id() + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"activeOptionId()\"\n    [attr.aria-labelledby]=\"label() ? labelId() + ' ' + id() : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n    (click)=\"toggleOpen()\"\n  >\n    @if (triggerIcon(); as icon) {\n      <gbt-icon [name]=\"icon\" class=\"gbt-select__trigger-icon\" aria-hidden=\"true\" />\n    }\n    <span\n      class=\"gbt-select__trigger-label\"\n      [class.gbt-select__trigger-label--placeholder]=\"selectedOptions().length === 0\"\n    >\n      {{ triggerLabel() }}\n    </span>\n    <gbt-icon name=\"chevron-down\" class=\"gbt-select__chevron\" aria-hidden=\"true\" />\n  </button>\n  @if (open() && panelStyle(); as style) {\n    <ul\n      [id]=\"id() + '-listbox'\"\n      class=\"gbt-select__panel\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label() || placeholder()\"\n      [attr.aria-multiselectable]=\"multiple()\"\n      [style.top]=\"style.top\"\n      [style.left]=\"style.left\"\n      [style.width]=\"style.width\"\n    >\n      @for (option of options(); track option.value; let i = $index) {\n        <li role=\"presentation\">\n          <button\n            [id]=\"id() + '-option-' + i\"\n            type=\"button\"\n            role=\"option\"\n            tabindex=\"-1\"\n            class=\"gbt-select__option\"\n            [class.gbt-select__option--selected]=\"isSelected(option.value)\"\n            [class.gbt-select__option--active]=\"i === activeIndex()\"\n            [attr.aria-selected]=\"isSelected(option.value)\"\n            (click)=\"selectOption(option.value)\"\n            (mouseenter)=\"activeIndex.set(i)\"\n          >\n            @if (option.icon) {\n              <gbt-icon [name]=\"option.icon\" class=\"gbt-select__option-icon\" aria-hidden=\"true\" />\n            }\n            <span class=\"gbt-select__option-label\">{{ option.label }}</span>\n            @if (isSelected(option.value)) {\n              <gbt-icon name=\"check\" class=\"gbt-select__option-check\" aria-hidden=\"true\" />\n            }\n          </button>\n        </li>\n      }\n    </ul>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-select__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n", styles: [":host{position:relative;display:inline-block;min-width:180px}.gbt-select{display:flex;flex-direction:column;gap:.375rem}.gbt-select--disabled{opacity:.5}.gbt-select__label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-select__trigger{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;height:40px;padding:0 10px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:14px;cursor:pointer;transition:border-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1)}.gbt-select__trigger:hover:not(:disabled){border-color:var(--border-color)}.gbt-select__trigger--open{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}.gbt-select__trigger:disabled{cursor:not-allowed}:host(.gbt-select--sm){min-width:120px}:host(.gbt-select--sm) .gbt-select__trigger{height:32px;padding:0 8px;font-size:13px}.gbt-select__trigger-icon{flex-shrink:0;color:var(--text-secondary)}.gbt-select__trigger-label{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-select__trigger-label--placeholder{color:var(--text-discret)}.gbt-select__chevron{flex-shrink:0;color:var(--text-secondary);transition:transform .2s cubic-bezier(.4,0,.2,1)}.gbt-select__trigger--open .gbt-select__chevron{transform:rotate(180deg)}.gbt-select__panel{position:fixed;z-index:1000;margin:0;padding:6px;list-style:none;max-height:280px;overflow-y:auto;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-lg);animation:gbt-select-scale-in .15s cubic-bezier(.34,1.56,.64,1) both}.gbt-select__panel::-webkit-scrollbar{width:6px}.gbt-select__panel::-webkit-scrollbar-track{background:transparent}.gbt-select__panel::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:3px}.gbt-select__option{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:transparent;border:none;border-radius:8px;color:var(--text-primary);font-size:14px;text-align:left;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-select__option:hover,.gbt-select__option--active{background:var(--bg-hover)}.gbt-select__option--selected{color:var(--primary);font-weight:600}.gbt-select__option-icon{flex-shrink:0;color:var(--text-secondary)}.gbt-select__option--selected .gbt-select__option-icon{color:var(--primary)}.gbt-select__option-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-select__option-check{flex-shrink:0;color:var(--primary)}@keyframes gbt-select-scale-in{0%{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.gbt-select__error{margin:0;font-size:.75rem;color:var(--color-error-text)}@media(prefers-reduced-motion:reduce){.gbt-select__panel{animation:none}.gbt-select__chevron{transition:none}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "gbt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"gbt-select\" [class.gbt-select--disabled]=\"isDisabled()\">\n  @if (label()) {\n    <label [id]=\"labelId()\" [for]=\"id()\" class=\"gbt-select__label\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n\n  <button\n    type=\"button\"\n    [id]=\"id()\"\n    class=\"gbt-select__trigger\"\n    [class.gbt-select__trigger--open]=\"open()\"\n    [disabled]=\"isDisabled()\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"open() ? id() + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"activeOptionId()\"\n    [attr.aria-labelledby]=\"label() ? labelId() + ' ' + id() : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (click)=\"toggleOpen()\"\n  >\n    @if (triggerIcon(); as icon) {\n      <gbt-icon [name]=\"icon\" class=\"gbt-select__trigger-icon\" aria-hidden=\"true\" />\n    }\n    <span\n      class=\"gbt-select__trigger-label\"\n      [class.gbt-select__trigger-label--placeholder]=\"selectedOptions().length === 0\"\n    >\n      {{ triggerLabel() }}\n    </span>\n    <gbt-icon name=\"chevron-down\" class=\"gbt-select__chevron\" aria-hidden=\"true\" />\n  </button>\n  @if (chipsVisible()) {\n    <div class=\"gbt-select__chips\" [id]=\"chipsId()\">\n      @for (option of selectedOptions(); track option.value; let i = $index) {\n        <gbt-tag\n          [color]=\"option.color ?? '#6b7280'\"\n          [removable]=\"!isDisabled()\"\n          [removeLabel]=\"chipRemoveLabel()(option.label)\"\n          (removed)=\"removeChip(option.value, i)\"\n        >\n          {{ option.label }}\n        </gbt-tag>\n      }\n    </div>\n  }\n  @if (chips() && multiple()) {\n    <div role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">\n      {{ selectedCountLabel()(selectedOptions().length) }}\n    </div>\n  }\n  @if (open() && panelStyle(); as style) {\n    <ul\n      [id]=\"id() + '-listbox'\"\n      class=\"gbt-select__panel\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label() || placeholder()\"\n      [attr.aria-multiselectable]=\"multiple()\"\n      [style.top]=\"style.top\"\n      [style.left]=\"style.left\"\n      [style.width]=\"style.width\"\n    >\n      @for (option of options(); track option.value; let i = $index) {\n        <li role=\"presentation\">\n          <button\n            [id]=\"id() + '-option-' + i\"\n            type=\"button\"\n            role=\"option\"\n            tabindex=\"-1\"\n            class=\"gbt-select__option\"\n            [class.gbt-select__option--selected]=\"isSelected(option.value)\"\n            [class.gbt-select__option--active]=\"i === activeIndex()\"\n            [attr.aria-selected]=\"isSelected(option.value)\"\n            (click)=\"selectOption(option.value)\"\n            (mouseenter)=\"activeIndex.set(i)\"\n          >\n            @if (option.icon) {\n              <gbt-icon [name]=\"option.icon\" class=\"gbt-select__option-icon\" aria-hidden=\"true\" />\n            }\n            <span class=\"gbt-select__option-label\">{{ option.label }}</span>\n            @if (isSelected(option.value)) {\n              <gbt-icon name=\"check\" class=\"gbt-select__option-check\" aria-hidden=\"true\" />\n            }\n          </button>\n        </li>\n      }\n    </ul>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-select__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n", styles: [":host{position:relative;display:inline-block;min-width:180px}.gbt-select{display:flex;flex-direction:column;gap:.375rem}.gbt-select--disabled{opacity:.5}.gbt-select__label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-select__trigger{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;height:40px;padding:0 10px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:14px;cursor:pointer;transition:border-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1)}.gbt-select__trigger:hover:not(:disabled){border-color:var(--border-color)}.gbt-select__trigger--open{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}.gbt-select__trigger:disabled{cursor:not-allowed}:host(.gbt-select--sm){min-width:120px}:host(.gbt-select--sm) .gbt-select__trigger{height:32px;padding:0 8px;font-size:13px}.gbt-select__trigger-icon{flex-shrink:0;color:var(--text-secondary)}.gbt-select__trigger-label{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-select__trigger-label--placeholder{color:var(--text-discret)}.gbt-select__chevron{flex-shrink:0;color:var(--text-secondary);transition:transform .2s cubic-bezier(.4,0,.2,1)}.gbt-select__trigger--open .gbt-select__chevron{transform:rotate(180deg)}.gbt-select__panel{position:fixed;z-index:1000;margin:0;padding:6px;list-style:none;max-height:280px;overflow-y:auto;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-lg);animation:gbt-select-scale-in .15s cubic-bezier(.34,1.56,.64,1) both}.gbt-select__panel::-webkit-scrollbar{width:6px}.gbt-select__panel::-webkit-scrollbar-track{background:transparent}.gbt-select__panel::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:3px}.gbt-select__option{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:transparent;border:none;border-radius:8px;color:var(--text-primary);font-size:14px;text-align:left;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-select__option:hover,.gbt-select__option--active{background:var(--bg-hover)}.gbt-select__option--selected{color:var(--primary);font-weight:600}.gbt-select__option-icon{flex-shrink:0;color:var(--text-secondary)}.gbt-select__option--selected .gbt-select__option-icon{color:var(--primary)}.gbt-select__option-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-select__option-check{flex-shrink:0;color:var(--primary)}@keyframes gbt-select-scale-in{0%{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.gbt-select__chips{display:flex;flex-wrap:wrap;gap:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.gbt-select__error{margin:0;font-size:.75rem;color:var(--color-error-text)}@media(prefers-reduced-motion:reduce){.gbt-select__panel{animation:none}.gbt-select__chevron{transition:none}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "gbt-icon", inputs: ["name"] }, { kind: "component", type: Tag, selector: "gbt-tag", inputs: ["color", "removable", "removeLabel"], outputs: ["removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Select, decorators: [{
             type: Component,
-            args: [{ selector: 'gbt-select', standalone: true, imports: [Icon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'gbt-select', standalone: true, imports: [Icon, Tag], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '(document:click)': 'handleClickOutside($event)',
                         '(keydown)': 'onKeydown($event)',
                         '(window:scroll)': 'updatePanelPosition()',
@@ -526,8 +657,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                             useExisting: forwardRef(() => Select),
                             multi: true,
                         },
-                    ], template: "<div class=\"gbt-select\" [class.gbt-select--disabled]=\"isDisabled()\">\n  @if (label()) {\n    <label [id]=\"labelId()\" [for]=\"id()\" class=\"gbt-select__label\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n\n  <button\n    type=\"button\"\n    [id]=\"id()\"\n    class=\"gbt-select__trigger\"\n    [class.gbt-select__trigger--open]=\"open()\"\n    [disabled]=\"isDisabled()\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"open() ? id() + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"activeOptionId()\"\n    [attr.aria-labelledby]=\"label() ? labelId() + ' ' + id() : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n    (click)=\"toggleOpen()\"\n  >\n    @if (triggerIcon(); as icon) {\n      <gbt-icon [name]=\"icon\" class=\"gbt-select__trigger-icon\" aria-hidden=\"true\" />\n    }\n    <span\n      class=\"gbt-select__trigger-label\"\n      [class.gbt-select__trigger-label--placeholder]=\"selectedOptions().length === 0\"\n    >\n      {{ triggerLabel() }}\n    </span>\n    <gbt-icon name=\"chevron-down\" class=\"gbt-select__chevron\" aria-hidden=\"true\" />\n  </button>\n  @if (open() && panelStyle(); as style) {\n    <ul\n      [id]=\"id() + '-listbox'\"\n      class=\"gbt-select__panel\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label() || placeholder()\"\n      [attr.aria-multiselectable]=\"multiple()\"\n      [style.top]=\"style.top\"\n      [style.left]=\"style.left\"\n      [style.width]=\"style.width\"\n    >\n      @for (option of options(); track option.value; let i = $index) {\n        <li role=\"presentation\">\n          <button\n            [id]=\"id() + '-option-' + i\"\n            type=\"button\"\n            role=\"option\"\n            tabindex=\"-1\"\n            class=\"gbt-select__option\"\n            [class.gbt-select__option--selected]=\"isSelected(option.value)\"\n            [class.gbt-select__option--active]=\"i === activeIndex()\"\n            [attr.aria-selected]=\"isSelected(option.value)\"\n            (click)=\"selectOption(option.value)\"\n            (mouseenter)=\"activeIndex.set(i)\"\n          >\n            @if (option.icon) {\n              <gbt-icon [name]=\"option.icon\" class=\"gbt-select__option-icon\" aria-hidden=\"true\" />\n            }\n            <span class=\"gbt-select__option-label\">{{ option.label }}</span>\n            @if (isSelected(option.value)) {\n              <gbt-icon name=\"check\" class=\"gbt-select__option-check\" aria-hidden=\"true\" />\n            }\n          </button>\n        </li>\n      }\n    </ul>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-select__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n", styles: [":host{position:relative;display:inline-block;min-width:180px}.gbt-select{display:flex;flex-direction:column;gap:.375rem}.gbt-select--disabled{opacity:.5}.gbt-select__label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-select__trigger{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;height:40px;padding:0 10px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:14px;cursor:pointer;transition:border-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1)}.gbt-select__trigger:hover:not(:disabled){border-color:var(--border-color)}.gbt-select__trigger--open{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}.gbt-select__trigger:disabled{cursor:not-allowed}:host(.gbt-select--sm){min-width:120px}:host(.gbt-select--sm) .gbt-select__trigger{height:32px;padding:0 8px;font-size:13px}.gbt-select__trigger-icon{flex-shrink:0;color:var(--text-secondary)}.gbt-select__trigger-label{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-select__trigger-label--placeholder{color:var(--text-discret)}.gbt-select__chevron{flex-shrink:0;color:var(--text-secondary);transition:transform .2s cubic-bezier(.4,0,.2,1)}.gbt-select__trigger--open .gbt-select__chevron{transform:rotate(180deg)}.gbt-select__panel{position:fixed;z-index:1000;margin:0;padding:6px;list-style:none;max-height:280px;overflow-y:auto;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-lg);animation:gbt-select-scale-in .15s cubic-bezier(.34,1.56,.64,1) both}.gbt-select__panel::-webkit-scrollbar{width:6px}.gbt-select__panel::-webkit-scrollbar-track{background:transparent}.gbt-select__panel::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:3px}.gbt-select__option{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:transparent;border:none;border-radius:8px;color:var(--text-primary);font-size:14px;text-align:left;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-select__option:hover,.gbt-select__option--active{background:var(--bg-hover)}.gbt-select__option--selected{color:var(--primary);font-weight:600}.gbt-select__option-icon{flex-shrink:0;color:var(--text-secondary)}.gbt-select__option--selected .gbt-select__option-icon{color:var(--primary)}.gbt-select__option-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-select__option-check{flex-shrink:0;color:var(--primary)}@keyframes gbt-select-scale-in{0%{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.gbt-select__error{margin:0;font-size:.75rem;color:var(--color-error-text)}@media(prefers-reduced-motion:reduce){.gbt-select__panel{animation:none}.gbt-select__chevron{transition:none}}\n"] }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], selectedCountLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCountLabel", required: false }] }] } });
+                    ], template: "<div class=\"gbt-select\" [class.gbt-select--disabled]=\"isDisabled()\">\n  @if (label()) {\n    <label [id]=\"labelId()\" [for]=\"id()\" class=\"gbt-select__label\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n\n  <button\n    type=\"button\"\n    [id]=\"id()\"\n    class=\"gbt-select__trigger\"\n    [class.gbt-select__trigger--open]=\"open()\"\n    [disabled]=\"isDisabled()\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"open() ? id() + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"activeOptionId()\"\n    [attr.aria-labelledby]=\"label() ? labelId() + ' ' + id() : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (click)=\"toggleOpen()\"\n  >\n    @if (triggerIcon(); as icon) {\n      <gbt-icon [name]=\"icon\" class=\"gbt-select__trigger-icon\" aria-hidden=\"true\" />\n    }\n    <span\n      class=\"gbt-select__trigger-label\"\n      [class.gbt-select__trigger-label--placeholder]=\"selectedOptions().length === 0\"\n    >\n      {{ triggerLabel() }}\n    </span>\n    <gbt-icon name=\"chevron-down\" class=\"gbt-select__chevron\" aria-hidden=\"true\" />\n  </button>\n  @if (chipsVisible()) {\n    <div class=\"gbt-select__chips\" [id]=\"chipsId()\">\n      @for (option of selectedOptions(); track option.value; let i = $index) {\n        <gbt-tag\n          [color]=\"option.color ?? '#6b7280'\"\n          [removable]=\"!isDisabled()\"\n          [removeLabel]=\"chipRemoveLabel()(option.label)\"\n          (removed)=\"removeChip(option.value, i)\"\n        >\n          {{ option.label }}\n        </gbt-tag>\n      }\n    </div>\n  }\n  @if (chips() && multiple()) {\n    <div role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">\n      {{ selectedCountLabel()(selectedOptions().length) }}\n    </div>\n  }\n  @if (open() && panelStyle(); as style) {\n    <ul\n      [id]=\"id() + '-listbox'\"\n      class=\"gbt-select__panel\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label() || placeholder()\"\n      [attr.aria-multiselectable]=\"multiple()\"\n      [style.top]=\"style.top\"\n      [style.left]=\"style.left\"\n      [style.width]=\"style.width\"\n    >\n      @for (option of options(); track option.value; let i = $index) {\n        <li role=\"presentation\">\n          <button\n            [id]=\"id() + '-option-' + i\"\n            type=\"button\"\n            role=\"option\"\n            tabindex=\"-1\"\n            class=\"gbt-select__option\"\n            [class.gbt-select__option--selected]=\"isSelected(option.value)\"\n            [class.gbt-select__option--active]=\"i === activeIndex()\"\n            [attr.aria-selected]=\"isSelected(option.value)\"\n            (click)=\"selectOption(option.value)\"\n            (mouseenter)=\"activeIndex.set(i)\"\n          >\n            @if (option.icon) {\n              <gbt-icon [name]=\"option.icon\" class=\"gbt-select__option-icon\" aria-hidden=\"true\" />\n            }\n            <span class=\"gbt-select__option-label\">{{ option.label }}</span>\n            @if (isSelected(option.value)) {\n              <gbt-icon name=\"check\" class=\"gbt-select__option-check\" aria-hidden=\"true\" />\n            }\n          </button>\n        </li>\n      }\n    </ul>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-select__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n", styles: [":host{position:relative;display:inline-block;min-width:180px}.gbt-select{display:flex;flex-direction:column;gap:.375rem}.gbt-select--disabled{opacity:.5}.gbt-select__label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-select__trigger{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;height:40px;padding:0 10px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:14px;cursor:pointer;transition:border-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1)}.gbt-select__trigger:hover:not(:disabled){border-color:var(--border-color)}.gbt-select__trigger--open{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}.gbt-select__trigger:disabled{cursor:not-allowed}:host(.gbt-select--sm){min-width:120px}:host(.gbt-select--sm) .gbt-select__trigger{height:32px;padding:0 8px;font-size:13px}.gbt-select__trigger-icon{flex-shrink:0;color:var(--text-secondary)}.gbt-select__trigger-label{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-select__trigger-label--placeholder{color:var(--text-discret)}.gbt-select__chevron{flex-shrink:0;color:var(--text-secondary);transition:transform .2s cubic-bezier(.4,0,.2,1)}.gbt-select__trigger--open .gbt-select__chevron{transform:rotate(180deg)}.gbt-select__panel{position:fixed;z-index:1000;margin:0;padding:6px;list-style:none;max-height:280px;overflow-y:auto;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-lg);animation:gbt-select-scale-in .15s cubic-bezier(.34,1.56,.64,1) both}.gbt-select__panel::-webkit-scrollbar{width:6px}.gbt-select__panel::-webkit-scrollbar-track{background:transparent}.gbt-select__panel::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:3px}.gbt-select__option{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:transparent;border:none;border-radius:8px;color:var(--text-primary);font-size:14px;text-align:left;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-select__option:hover,.gbt-select__option--active{background:var(--bg-hover)}.gbt-select__option--selected{color:var(--primary);font-weight:600}.gbt-select__option-icon{flex-shrink:0;color:var(--text-secondary)}.gbt-select__option--selected .gbt-select__option-icon{color:var(--primary)}.gbt-select__option-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-select__option-check{flex-shrink:0;color:var(--primary)}@keyframes gbt-select-scale-in{0%{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.gbt-select__chips{display:flex;flex-wrap:wrap;gap:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.gbt-select__error{margin:0;font-size:.75rem;color:var(--color-error-text)}@media(prefers-reduced-motion:reduce){.gbt-select__panel{animation:none}.gbt-select__chevron{transition:none}}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], chips: [{ type: i0.Input, args: [{ isSignal: true, alias: "chips", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], selectedCountLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCountLabel", required: false }] }], chipRemoveLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipRemoveLabel", required: false }] }] } });
 
 class ListToolbar {
     searchValue = input('', /* @ts-ignore */
@@ -576,7 +707,7 @@ class ListToolbar {
         this.sortDirectionChange.emit(this.sortDirection() === 'asc' ? 'desc' : 'asc');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ListToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: ListToolbar, isStandalone: true, selector: "gbt-list-toolbar", inputs: { searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: true, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: true, transformFunction: null }, sortValue: { classPropertyName: "sortValue", publicName: "sortValue", isSignal: true, isRequired: true, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortLabel: { classPropertyName: "sortLabel", publicName: "sortLabel", isSignal: true, isRequired: false, transformFunction: null }, directionLabel: { classPropertyName: "directionLabel", publicName: "directionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchValueChange: "searchValueChange", sortValueChange: "sortValueChange", sortDirectionChange: "sortDirectionChange" }, ngImport: i0, template: "<div class=\"gbt-list-toolbar\">\n  <gbt-input\n    class=\"gbt-list-toolbar__search\"\n    [label]=\"searchLabel()\"\n    [placeholder]=\"searchPlaceholder()\"\n    [formControl]=\"searchControl\"\n  />\n  <gbt-select\n    class=\"gbt-list-toolbar__sort\"\n    [label]=\"sortLabel()\"\n    [options]=\"asSelectOptions(sortOptions())\"\n    [formControl]=\"sortControl\"\n  />\n  <button\n    type=\"button\"\n    class=\"gbt-list-toolbar__direction\"\n    (click)=\"toggleDirection()\"\n    [attr.aria-label]=\"directionLabel()\"\n    [attr.aria-pressed]=\"sortDirection() === 'desc'\"\n  >\n    <gbt-icon [name]=\"sortDirection() === 'asc' ? 'arrow-up' : 'arrow-down'\" />\n  </button>\n</div>\n", styles: [":host{display:block}.gbt-list-toolbar{display:flex;align-items:flex-end;gap:.75rem;flex-wrap:wrap}.gbt-list-toolbar__search{flex:1;min-width:200px}.gbt-list-toolbar__sort{min-width:160px}.gbt-list-toolbar__direction{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;padding:0;border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);background:var(--bg-principal);color:var(--text-secondary);cursor:pointer;transition:background var(--site-transition-fast)}.gbt-list-toolbar__direction:hover{background:var(--bg-hover)}.gbt-list-toolbar__direction:focus-visible{outline:2px solid var(--primary);outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: GbtInput, selector: "gbt-input", inputs: ["id", "label", "type", "required", "disabled", "placeholder", "errorMessage", "autocomplete", "showPasswordLabel", "hidePasswordLabel"], outputs: ["committed"] }, { kind: "component", type: Select, selector: "gbt-select", inputs: ["id", "label", "size", "options", "multiple", "placeholder", "disabled", "required", "errorMessage", "selectedCountLabel"] }, { kind: "component", type: Icon, selector: "gbt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: ListToolbar, isStandalone: true, selector: "gbt-list-toolbar", inputs: { searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: true, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: true, transformFunction: null }, sortValue: { classPropertyName: "sortValue", publicName: "sortValue", isSignal: true, isRequired: true, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortLabel: { classPropertyName: "sortLabel", publicName: "sortLabel", isSignal: true, isRequired: false, transformFunction: null }, directionLabel: { classPropertyName: "directionLabel", publicName: "directionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchValueChange: "searchValueChange", sortValueChange: "sortValueChange", sortDirectionChange: "sortDirectionChange" }, ngImport: i0, template: "<div class=\"gbt-list-toolbar\">\n  <gbt-input\n    class=\"gbt-list-toolbar__search\"\n    [label]=\"searchLabel()\"\n    [placeholder]=\"searchPlaceholder()\"\n    [formControl]=\"searchControl\"\n  />\n  <gbt-select\n    class=\"gbt-list-toolbar__sort\"\n    [label]=\"sortLabel()\"\n    [options]=\"asSelectOptions(sortOptions())\"\n    [formControl]=\"sortControl\"\n  />\n  <button\n    type=\"button\"\n    class=\"gbt-list-toolbar__direction\"\n    (click)=\"toggleDirection()\"\n    [attr.aria-label]=\"directionLabel()\"\n    [attr.aria-pressed]=\"sortDirection() === 'desc'\"\n  >\n    <gbt-icon [name]=\"sortDirection() === 'asc' ? 'arrow-up' : 'arrow-down'\" />\n  </button>\n</div>\n", styles: [":host{display:block}.gbt-list-toolbar{display:flex;align-items:flex-end;gap:.75rem;flex-wrap:wrap}.gbt-list-toolbar__search{flex:1;min-width:200px}.gbt-list-toolbar__sort{min-width:160px}.gbt-list-toolbar__direction{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;padding:0;border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);background:var(--bg-principal);color:var(--text-secondary);cursor:pointer;transition:background var(--site-transition-fast)}.gbt-list-toolbar__direction:hover{background:var(--bg-hover)}.gbt-list-toolbar__direction:focus-visible{outline:2px solid var(--primary);outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: GbtInput, selector: "gbt-input", inputs: ["id", "label", "type", "required", "disabled", "placeholder", "errorMessage", "autocomplete", "showPasswordLabel", "hidePasswordLabel"], outputs: ["committed"] }, { kind: "component", type: Select, selector: "gbt-select", inputs: ["id", "label", "size", "options", "multiple", "chips", "placeholder", "disabled", "required", "errorMessage", "selectedCountLabel", "chipRemoveLabel"] }, { kind: "component", type: Icon, selector: "gbt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ListToolbar, decorators: [{
             type: Component,
@@ -2642,7 +2773,7 @@ class Pagination {
         this.pageChange.emit(clamped);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Pagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Pagination, isStandalone: true, selector: "gbt-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, pageLabel: { classPropertyName: "pageLabel", publicName: "pageLabel", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSizeLabel: { classPropertyName: "pageSizeLabel", publicName: "pageSizeLabel", isSignal: true, isRequired: false, transformFunction: null }, pageSizeSelectLabel: { classPropertyName: "pageSizeSelectLabel", publicName: "pageSizeSelectLabel", isSignal: true, isRequired: false, transformFunction: null }, showItemsSummary: { classPropertyName: "showItemsSummary", publicName: "showItemsSummary", isSignal: true, isRequired: false, transformFunction: null }, itemsSummaryLabel: { classPropertyName: "itemsSummaryLabel", publicName: "itemsSummaryLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<div class=\"gbt-pagination\">\n  <div class=\"gbt-pagination__side gbt-pagination__side--start\">\n    @if (showItemsSummary()) {\n      <span class=\"gbt-pagination__summary\">{{ itemsSummary() }}</span>\n    }\n  </div>\n\n  <nav [attr.aria-label]=\"ariaLabel()\">\n    <ul class=\"gbt-pagination__list\">\n      <li>\n        <button\n          type=\"button\"\n          class=\"gbt-pagination__nav\"\n          [disabled]=\"disabled() || page() <= 1\"\n          [attr.aria-label]=\"previousLabel()\"\n          (click)=\"goTo(page() - 1)\"\n        >\n          <gbt-icon name=\"chevron-left\" aria-hidden=\"true\" />\n        </button>\n      </li>\n      @for (item of items(); track $index) {\n        @if (item === ELLIPSIS) {\n          <li class=\"gbt-pagination__ellipsis\" aria-hidden=\"true\">{{ ELLIPSIS }}</li>\n        } @else {\n          <li>\n            <button\n              type=\"button\"\n              class=\"gbt-pagination__page\"\n              [class.gbt-pagination__page--current]=\"item === page()\"\n              [attr.aria-current]=\"item === page() ? 'page' : null\"\n              [attr.aria-label]=\"pageLabel()(item)\"\n              [disabled]=\"disabled()\"\n              (click)=\"goTo(item)\"\n            >\n              {{ item }}\n            </button>\n          </li>\n        }\n      }\n      <li>\n        <button\n          type=\"button\"\n          class=\"gbt-pagination__nav\"\n          [disabled]=\"disabled() || page() >= pageCount()\"\n          [attr.aria-label]=\"nextLabel()\"\n          (click)=\"goTo(page() + 1)\"\n        >\n          <gbt-icon name=\"chevron-right\" aria-hidden=\"true\" />\n        </button>\n      </li>\n    </ul>\n  </nav>\n\n  <div class=\"gbt-pagination__side gbt-pagination__side--end\">\n    @if (pageSizeOptions().length > 0) {\n      <gbt-select\n        class=\"gbt-pagination__page-size\"\n        size=\"sm\"\n        [label]=\"pageSizeSelectLabel()\"\n        [options]=\"pageSizeSelectOptions()\"\n        [disabled]=\"disabled()\"\n        [formControl]=\"pageSizeControl\"\n      />\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.gbt-pagination{display:flex;align-items:center;flex-wrap:wrap;gap:1rem}.gbt-pagination__side{display:flex;align-items:center;flex:1;min-width:0}.gbt-pagination__side--start{justify-content:flex-start}.gbt-pagination__side--end{justify-content:flex-end}.gbt-pagination__summary{color:var(--text-secondary);font-size:.8125rem;white-space:nowrap}.gbt-pagination__page-size{min-width:0}.gbt-pagination__list{display:flex;align-items:center;gap:.25rem;margin:0;padding:0;list-style:none}.gbt-pagination__nav,.gbt-pagination__page{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding:0 .375rem;border:none;border-radius:var(--site-border-radius-sm);background:transparent;color:var(--text-primary);font-size:.875rem;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-pagination__nav:hover:not(:disabled),.gbt-pagination__page:hover:not(:disabled){background:var(--bg-hover)}.gbt-pagination__nav:focus-visible,.gbt-pagination__page:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.gbt-pagination__nav:disabled,.gbt-pagination__page:disabled{color:var(--text-discret);cursor:not-allowed}.gbt-pagination__page--current{background:var(--primary);color:var(--text-on-primary);font-weight:600}.gbt-pagination__page--current:hover{background:var(--primary)}.gbt-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--text-discret)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "gbt-icon", inputs: ["name"] }, { kind: "component", type: Select, selector: "gbt-select", inputs: ["id", "label", "size", "options", "multiple", "placeholder", "disabled", "required", "errorMessage", "selectedCountLabel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Pagination, isStandalone: true, selector: "gbt-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, pageLabel: { classPropertyName: "pageLabel", publicName: "pageLabel", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSizeLabel: { classPropertyName: "pageSizeLabel", publicName: "pageSizeLabel", isSignal: true, isRequired: false, transformFunction: null }, pageSizeSelectLabel: { classPropertyName: "pageSizeSelectLabel", publicName: "pageSizeSelectLabel", isSignal: true, isRequired: false, transformFunction: null }, showItemsSummary: { classPropertyName: "showItemsSummary", publicName: "showItemsSummary", isSignal: true, isRequired: false, transformFunction: null }, itemsSummaryLabel: { classPropertyName: "itemsSummaryLabel", publicName: "itemsSummaryLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<div class=\"gbt-pagination\">\n  <div class=\"gbt-pagination__side gbt-pagination__side--start\">\n    @if (showItemsSummary()) {\n      <span class=\"gbt-pagination__summary\">{{ itemsSummary() }}</span>\n    }\n  </div>\n\n  <nav [attr.aria-label]=\"ariaLabel()\">\n    <ul class=\"gbt-pagination__list\">\n      <li>\n        <button\n          type=\"button\"\n          class=\"gbt-pagination__nav\"\n          [disabled]=\"disabled() || page() <= 1\"\n          [attr.aria-label]=\"previousLabel()\"\n          (click)=\"goTo(page() - 1)\"\n        >\n          <gbt-icon name=\"chevron-left\" aria-hidden=\"true\" />\n        </button>\n      </li>\n      @for (item of items(); track $index) {\n        @if (item === ELLIPSIS) {\n          <li class=\"gbt-pagination__ellipsis\" aria-hidden=\"true\">{{ ELLIPSIS }}</li>\n        } @else {\n          <li>\n            <button\n              type=\"button\"\n              class=\"gbt-pagination__page\"\n              [class.gbt-pagination__page--current]=\"item === page()\"\n              [attr.aria-current]=\"item === page() ? 'page' : null\"\n              [attr.aria-label]=\"pageLabel()(item)\"\n              [disabled]=\"disabled()\"\n              (click)=\"goTo(item)\"\n            >\n              {{ item }}\n            </button>\n          </li>\n        }\n      }\n      <li>\n        <button\n          type=\"button\"\n          class=\"gbt-pagination__nav\"\n          [disabled]=\"disabled() || page() >= pageCount()\"\n          [attr.aria-label]=\"nextLabel()\"\n          (click)=\"goTo(page() + 1)\"\n        >\n          <gbt-icon name=\"chevron-right\" aria-hidden=\"true\" />\n        </button>\n      </li>\n    </ul>\n  </nav>\n\n  <div class=\"gbt-pagination__side gbt-pagination__side--end\">\n    @if (pageSizeOptions().length > 0) {\n      <gbt-select\n        class=\"gbt-pagination__page-size\"\n        size=\"sm\"\n        [label]=\"pageSizeSelectLabel()\"\n        [options]=\"pageSizeSelectOptions()\"\n        [disabled]=\"disabled()\"\n        [formControl]=\"pageSizeControl\"\n      />\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.gbt-pagination{display:flex;align-items:center;flex-wrap:wrap;gap:1rem}.gbt-pagination__side{display:flex;align-items:center;flex:1;min-width:0}.gbt-pagination__side--start{justify-content:flex-start}.gbt-pagination__side--end{justify-content:flex-end}.gbt-pagination__summary{color:var(--text-secondary);font-size:.8125rem;white-space:nowrap}.gbt-pagination__page-size{min-width:0}.gbt-pagination__list{display:flex;align-items:center;gap:.25rem;margin:0;padding:0;list-style:none}.gbt-pagination__nav,.gbt-pagination__page{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding:0 .375rem;border:none;border-radius:var(--site-border-radius-sm);background:transparent;color:var(--text-primary);font-size:.875rem;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-pagination__nav:hover:not(:disabled),.gbt-pagination__page:hover:not(:disabled){background:var(--bg-hover)}.gbt-pagination__nav:focus-visible,.gbt-pagination__page:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.gbt-pagination__nav:disabled,.gbt-pagination__page:disabled{color:var(--text-discret);cursor:not-allowed}.gbt-pagination__page--current{background:var(--primary);color:var(--text-on-primary);font-weight:600}.gbt-pagination__page--current:hover{background:var(--primary)}.gbt-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--text-discret)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "gbt-icon", inputs: ["name"] }, { kind: "component", type: Select, selector: "gbt-select", inputs: ["id", "label", "size", "options", "multiple", "chips", "placeholder", "disabled", "required", "errorMessage", "selectedCountLabel", "chipRemoveLabel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Pagination, decorators: [{
             type: Component,
@@ -3277,5 +3408,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AppShell, Autocomplete, Badge, BarChart, BarSeries, Breadcrumb, Button, CHART_CONTEXT, Card, ChartAxis, ChartEmpty, ChartFrame, ChartLegend, ChartTable, ChartTooltip, Checkbox, ConfirmDangerModal, DimensionCard, EmptyState, FunnelChart, GABARIT_VERSION, GaugeBar, GbtInput, Icon, IconRegistry, LineChart, LineSeries, ListToolbar, Menu, Modal, Pagination, RadioGroup, SearchBar, Select, Sparkline, Switch, Tab, Table, Tabs, Textarea, TimelineChart, TimelineSeries, Toaster, Tooltip, areaPath, bandScale, formatCompact, formatDuration, formatNumber, formatPercent, linePath, linearScale, nearestIndex, niceTicks, niceXDomain, niceYDomain, timeScale, timeTicks };
+export { AppShell, Autocomplete, Badge, BarChart, BarSeries, Breadcrumb, Button, CHART_CONTEXT, Card, ChartAxis, ChartEmpty, ChartFrame, ChartLegend, ChartTable, ChartTooltip, Checkbox, ConfirmDangerModal, DimensionCard, EmptyState, FunnelChart, GABARIT_VERSION, GaugeBar, GbtInput, Icon, IconRegistry, LineChart, LineSeries, ListToolbar, Menu, Modal, Pagination, RadioGroup, SearchBar, Select, Sparkline, Switch, Tab, Table, Tabs, Tag, Textarea, TimelineChart, TimelineSeries, Toaster, Tooltip, areaPath, bandScale, formatCompact, formatDuration, formatNumber, formatPercent, linePath, linearScale, nearestIndex, niceTicks, niceXDomain, niceYDomain, timeScale, timeTicks };
 //# sourceMappingURL=masmarino-gabarit.mjs.map