@besaitech/ng-design-system 0.0.63 → 0.0.64

package/index.d.ts

@@ -3269,6 +3269,11 @@ declare class SdsPaginator {
 
 /** Identifier of a tab / panel pair. Keep types consistent across a tab set. */
 type SdsTabValue = string | number | null;
+/**
+ * How the tab headers look: `underline` (page-level sections — a sliding brand underline under the active tab) or
+ * `segmented` (a compact switch between 2–4 views, e.g. in a drawer — a raised thumb slides between the options).
+ */
+type SdsTabsVariant = 'underline' | 'segmented';
 /**
  * Coordinates a single <sds-tabs> instance: holds the active value (shared from
  * the host's two-way model), tracks registered tabs for default selection and
@@ -3281,6 +3286,8 @@ declare class SdsTabsStore {
     readonly id: string;
     /** Whether the tab list scrolls horizontally (mirrors [scrollable]). */
     readonly scrollable: WritableSignal<boolean>;
+    /** Header style (mirrors [variant]). */
+    readonly variant: WritableSignal<SdsTabsVariant>;
     /** Controlled mode (mirrors [controlled]): a click only REQUESTS a tab, the host sets [value]. */
     readonly controlled: WritableSignal<boolean>;
     /** Called with every tab the user picks (wired to the host's (tabSelect) output). */
@@ -3290,6 +3297,8 @@ declare class SdsTabsStore {
     private readonly panels;
     /** Called once by <sds-tabs> to share its two-way `value` signal. */
     connect(value: WritableSignal<SdsTabValue>): void;
+    /** Bumped when a tab's size may have changed (label, icon or count updated), so the indicator re-measures. */
+    readonly layoutVersion: WritableSignal<number>;
     activeValue(): SdsTabValue;
     isActive(value: SdsTabValue): boolean;
     /** A user pick. Uncontrolled: becomes the active tab. Controlled: only reported to the host. */
@@ -3317,6 +3326,11 @@ declare class SdsTabsStore {
  * `?tab=` query param — or when switching can be refused (an unsaved-changes guard): the tab never
  * shows as selected before the host agrees. `(tabSelect)` also fires in the default mode.
  *
+ * **Two looks** (`variant`): `underline` (default) for a page's sections — a brand underline slides to the active
+ * tab, inactive tabs get a soft hover; `segmented` for a compact switch between 2–4 views (drawers, cards) — a raised
+ * thumb slides between the options. Either can carry an icon (`[icon]`) and a count (`[count]`) per tab. A
+ * `scrollable` underline list that overflows fades its edges and shows arrow buttons, and keeps the active tab in view.
+ *
  * **Panels are optional.** A tab set whose content is rendered by the host (an `@switch` on the value, a
  * router outlet) can omit <sds-tab-panels>; a tab then carries no `aria-controls` to a missing panel.
  *
@@ -3333,6 +3347,18 @@ declare class SdsTabsStore {
  * </sds-tabs>
  *
  * @example
+ * <!-- icons + counts; a compact switch in a drawer -->
+ * <sds-tabs scrollable [(value)]="tab">
+ *   <sds-tab-list ariaLabel="Orders">
+ *     <sds-tab value="active" icon="clipboard-list" [count]="activeCount()">Active</sds-tab>
+ *     <sds-tab value="history" icon="clock">History</sds-tab>
+ *   </sds-tab-list>
+ * </sds-tabs>
+ * <sds-tabs variant="segmented" [(value)]="view">
+ *   <sds-tab-list class="w-full">…</sds-tab-list>
+ * </sds-tabs>
+ *
+ * @example
  * <!-- driven by a query param, content rendered by the host -->
  * <sds-tabs controlled [value]="activeTab()" (tabSelect)="selectTab($event)">
  *   <sds-tab-list>
@@ -3346,8 +3372,10 @@ declare class SdsTabs {
     private readonly store;
     /** Value of the active tab (two-way). */
     readonly value: _angular_core.ModelSignal<SdsTabValue>;
-    /** Let the tab list scroll horizontally instead of overflowing. */
+    /** Let the tab list scroll horizontally instead of overflowing (edge fades + arrow buttons when it does). */
     readonly scrollable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** `underline` (page sections, default) or `segmented` (a compact switch between 2–4 views). */
+    readonly variant: _angular_core.InputSignal<SdsTabsVariant>;
     /**
      * Controlled mode: a user pick only emits (tabSelect); the host decides by setting [value]. See the
      * class note.
@@ -3357,13 +3385,22 @@ declare class SdsTabs {
     readonly tabSelect: _angular_core.OutputEmitterRef<SdsTabValue>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTabs, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTabs, "sds-tabs", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; "controlled": { "alias": "controlled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "tabSelect": "tabSelect"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTabs, "sds-tabs", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "controlled": { "alias": "controlled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "tabSelect": "tabSelect"; }, never, ["*"], true, never>;
 }
 
+/** Where the indicator sits, in the scroller's content coordinates (px). */
+interface IndicatorBox {
+    left: number;
+    width: number;
+}
 /**
- * Container (role="tablist") for the <sds-tab> headers. Renders the bottom rule
- * and handles roving-focus keyboard navigation (Arrow keys, Home, End) with
- * automatic activation.
+ * Container (role="tablist") for the <sds-tab> headers: draws the active-tab indicator and handles roving-focus
+ * keyboard navigation (Arrow keys, Home, End) with automatic activation.
+ *
+ * **Underline** (default): a hairline rule with a 3px brand underline that slides to the active tab. When the tab set
+ * is `scrollable` and the tabs don't fit, the hidden side fades out and an arrow button scrolls by a page; picking a
+ * tab (click or keyboard) scrolls it into view. **Segmented**: a tinted track with a raised thumb that slides under the
+ * active option; put `class="w-full"` on the list to stretch the options evenly.
  *
  * Name the tab set with [ariaLabel] (or [ariaLabelledby] pointing at a visible heading) when the page has
  * more than one, or when the tabs alone do not say what they switch.
@@ -3372,39 +3409,65 @@ declare class SdsTabs {
  * <sds-tab-list [ariaLabel]="'Order status'">…</sds-tab-list>
  */
 declare class SdsTabList {
-    private readonly host;
     private readonly store;
+    private readonly scroller;
     /** Accessible name of the tablist. */
     readonly ariaLabel: _angular_core.InputSignal<string>;
     /** Id of a visible element that names the tablist (takes precedence over [ariaLabel] for AT). */
     readonly ariaLabelledby: _angular_core.InputSignal<string>;
+    protected readonly segmented: _angular_core.Signal<boolean>;
+    protected readonly indicator: _angular_core.WritableSignal<IndicatorBox | null>;
+    /** Off for the first placement, so the indicator doesn't fly in from the left on load. */
+    protected readonly animate: _angular_core.WritableSignal<boolean>;
+    protected readonly canScrollStart: _angular_core.WritableSignal<boolean>;
+    protected readonly canScrollEnd: _angular_core.WritableSignal<boolean>;
+    protected readonly arrows: _angular_core.Signal<boolean>;
+    protected readonly hostClass: _angular_core.Signal<"relative inline-flex max-w-full" | "relative block">;
     /**
-     * Scrollable: `overflow-x: auto` turns the other axis to `auto` too (CSS), so the tabs' 1px overlap of a
-     * border-bottom rule (`-mb-px`, so the active underline covers it) made the list 1px taller than its box and
-     * showed a vertical scrollbar. There the rule is an inset shadow instead — painted under the tabs, so the active
-     * underline still covers it with no overlap — and vertical overflow is hidden.
+     * The scroller is the tablist. Underline: the rule is an inset shadow, painted under the tabs, so nothing overflows
+     * vertically — `overflow-x: auto` turns the other axis to `auto` too (CSS), and a 1px overflow showed a vertical
+     * scrollbar. Segmented: a tinted track (ink at 5%, so it reads on any surface) around the options.
      */
-    protected readonly listClass: _angular_core.Signal<"relative flex overflow-x-auto overflow-y-hidden shadow-[inset_0_-1px_0_var(--color-border)]" | "relative flex border-b border-border">;
+    protected readonly scrollerClass: _angular_core.Signal<string>;
+    /** Fade the side(s) with hidden tabs, so the overflow reads as "more this way". */
+    protected readonly fadeMask: _angular_core.Signal<string | null>;
+    constructor();
+    /** Measure the active tab and move the indicator there; keep it in view when the selection changed. */
+    private place;
+    /** Scroll just enough to show the active tab clear of the edge fades (never scrolls the page vertically). */
+    private reveal;
+    protected measureScroll(): void;
+    protected scrollByPage(direction: 1 | -1): void;
+    private smooth;
     protected onKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTabList, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTabList, "sds-tab-list", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
- * A single tab header (role="tab"). Project the label and, optionally, an
- * <sds-icon> for an icon + text header. Set [disabled] to make it unselectable.
+ * A single tab header (role="tab"). Project the label; optionally give it an [icon] (a registry name, drawn before
+ * the label) and a [count] (a small badge after it — e.g. how many orders wait in that tab; `null` hides it, `0`
+ * shows it). Set [disabled] to make it unselectable. Its look follows the tab set's `variant`.
  */
 declare class SdsTab implements OnInit, OnDestroy {
     protected readonly store: SdsTabsStore;
     readonly value: _angular_core.InputSignal<SdsTabValue>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** An icon from the library registry, drawn before the label. */
+    readonly icon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "locate-fixed" | "locate-off" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
+    /** A count badge after the label (`null` / unset: none; `0` is shown). */
+    readonly count: _angular_core.InputSignal<string | number | null>;
     protected readonly active: _angular_core.Signal<boolean>;
+    constructor();
     ngOnInit(): void;
     ngOnDestroy(): void;
     protected select(): void;
-    protected tabClass(): string;
+    protected readonly tabClass: _angular_core.Signal<string>;
+    /** Underline: the active tab's icon takes the brand colour, like its underline. Segmented: the label's colour. */
+    protected readonly iconClass: _angular_core.Signal<"shrink-0 text-brand-600" | "shrink-0">;
+    protected readonly countClass: _angular_core.Signal<"inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold tabular-nums transition-colors bg-brand-100 text-brand-700" | "inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold tabular-nums transition-colors bg-ink/[0.07] text-ink-soft">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTab, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTab, "sds-tab", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTab, "sds-tab", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /** Wrapper for the <sds-tab-panel> content blocks of a tab set. */
@@ -4888,4 +4951,4 @@ declare class SdsEnvBanner {
 }
 
 export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SDS_THEME_STORAGE_KEY, SDS_UI_PREF_LANG_PARAM, SDS_UI_PREF_THEME_PARAM, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAddressAutocomplete, SdsAddressExtra, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsChip, SdsChipGroup, SdsDatePicker, SdsEnvBanner, SdsFileDrop, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, appendUiPrefs, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isSdsThemeMode, isoDay, pad2, readUiPrefs, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth, stripUiPrefs };
-export type { SdsAccordionActive, SdsAccordionValue, SdsAddressAutocompleteAppearance, SdsAddressAutocompleteShape, SdsAddressAutocompleteSize, SdsAddressExtraContext, SdsAddressExtraPosition, SdsAddressLocateFn, SdsAddressSearchFn, SdsAddressSuggestion, SdsAllergen, SdsAvatarShape, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsBulkBarPosition, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsChecklistStatus, SdsChipOption, SdsChipSize, SdsCropRect, SdsDatePickerSize, SdsEnvBannerEnv, SdsFileDropAppearance, SdsFileRejection, SdsFileRejectionReason, SdsIconName, SdsIconSize, SdsImageCropperBlobOptions, SdsImageCropperShape, SdsInputAppearance, SdsInputNumberAppearance, SdsInputNumberButtonLayout, SdsInputNumberCurrencyDisplay, SdsInputNumberMode, SdsInputNumberSize, SdsInputShape, SdsInputSize, SdsInputType, SdsLanguageOption, SdsLanguageSwitcherAlign, SdsLanguageSwitcherAppearance, SdsLanguageSwitcherDirection, SdsLocalizedInputSize, SdsLocalizedValue, SdsMenuAction, SdsMenuAlign, SdsMenuEntry, SdsMenuItemTone, SdsMenuSeparator, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsNavItemBadgeTone, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsRadioSize, SdsScoreSize, SdsScoreTier, SdsScoreVariant, SdsSearchAppearance, SdsSearchItem, SdsSegmentedOption, SdsSegmentedSize, SdsSelectAppearance, SdsSelectEmptyContext, SdsSelectFooterContext, SdsSelectOptionContext, SdsSelectSize, SdsShellBackground, SdsSidebarAppearance, SdsSortOrder, SdsSortableAppearance, SdsSortableItemContext, SdsSortableReorderEvent, SdsStatusTileState, SdsTabValue, SdsTableCellCommitEvent, SdsTableCellContext, SdsTableCellErrors, SdsTableColumn, SdsTableEditTrigger, SdsTableEditor, SdsTableEmptyContext, SdsTableHeaderContext, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSelectOption, SdsTableSize, SdsTableSortEvent, SdsTextareaAppearance, SdsTextareaResize, SdsTextareaSize, SdsTheme, SdsThemeMode, SdsThemeToggleAppearance, SdsTimeInputAppearance, SdsTimeInputSize, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance, SdsTriState, SdsTriStateChipSize, SdsUiPrefs, SdsUserMenuAlign, SdsUserMenuAppearance };
+export type { SdsAccordionActive, SdsAccordionValue, SdsAddressAutocompleteAppearance, SdsAddressAutocompleteShape, SdsAddressAutocompleteSize, SdsAddressExtraContext, SdsAddressExtraPosition, SdsAddressLocateFn, SdsAddressSearchFn, SdsAddressSuggestion, SdsAllergen, SdsAvatarShape, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsBulkBarPosition, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsChecklistStatus, SdsChipOption, SdsChipSize, SdsCropRect, SdsDatePickerSize, SdsEnvBannerEnv, SdsFileDropAppearance, SdsFileRejection, SdsFileRejectionReason, SdsIconName, SdsIconSize, SdsImageCropperBlobOptions, SdsImageCropperShape, SdsInputAppearance, SdsInputNumberAppearance, SdsInputNumberButtonLayout, SdsInputNumberCurrencyDisplay, SdsInputNumberMode, SdsInputNumberSize, SdsInputShape, SdsInputSize, SdsInputType, SdsLanguageOption, SdsLanguageSwitcherAlign, SdsLanguageSwitcherAppearance, SdsLanguageSwitcherDirection, SdsLocalizedInputSize, SdsLocalizedValue, SdsMenuAction, SdsMenuAlign, SdsMenuEntry, SdsMenuItemTone, SdsMenuSeparator, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsNavItemBadgeTone, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsRadioSize, SdsScoreSize, SdsScoreTier, SdsScoreVariant, SdsSearchAppearance, SdsSearchItem, SdsSegmentedOption, SdsSegmentedSize, SdsSelectAppearance, SdsSelectEmptyContext, SdsSelectFooterContext, SdsSelectOptionContext, SdsSelectSize, SdsShellBackground, SdsSidebarAppearance, SdsSortOrder, SdsSortableAppearance, SdsSortableItemContext, SdsSortableReorderEvent, SdsStatusTileState, SdsTabValue, SdsTableCellCommitEvent, SdsTableCellContext, SdsTableCellErrors, SdsTableColumn, SdsTableEditTrigger, SdsTableEditor, SdsTableEmptyContext, SdsTableHeaderContext, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSelectOption, SdsTableSize, SdsTableSortEvent, SdsTabsVariant, SdsTextareaAppearance, SdsTextareaResize, SdsTextareaSize, SdsTheme, SdsThemeMode, SdsThemeToggleAppearance, SdsTimeInputAppearance, SdsTimeInputSize, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance, SdsTriState, SdsTriStateChipSize, SdsUiPrefs, SdsUserMenuAlign, SdsUserMenuAppearance };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@besaitech/ng-design-system",
-  "version": "0.0.63",
+  "version": "0.0.64",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"