@brandsync/wc 0.0.7 → 0.0.9

package/dist/types/components/bs-input/bs-input.d.ts

@@ -1,33 +1,166 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
- * A single-line text field with an optional label, description, and error state.
+ * A single-line text field with an optional label, description, and error state. Also covers a
+ * range of related "field" shapes (number stepper, password reveal, date, dropdown trigger,
+ * select, textarea, chip input, initials, country, and pin) via the `type` prop, since they all
+ * share the same label/description/error/icon-slot chrome.
  *
  * ## When to use
  * - Collecting a single line of free-text, email, password, or numeric input.
+ * - Any of the other supported `type`s (search, date, dropdown, select, textarea, chip, initials,
+ *   country, pin) that share this component's label/description/error chrome.
  * - Pair with `error` for inline validation feedback tied to that specific field.
  *
  * ## When not to use
- * - Multi-line text — this component has no `textarea` mode.
- * - A fixed set of choices — use a select/radio/checkbox component instead of free text.
+ * - A fixed set of choices best served by a dedicated radio/checkbox group rather than a single
+ *   field. `type="select"` (native `<select>`) and `type="dropdown"` (a `bs-menu` of
+ *   `bs-menu-item`s from the `options` prop) cover the field-shaped cases; `type="chip"` has no
+ *   options list at all (freeform chip entry).
  *
+ * @slot icon - Optional leading icon, rendered before the native control (e.g. a mail icon for an
+ *   email field). For `type="search"`, the slot is used if provided, otherwise a default
+ *   magnifying-glass icon is shown.
+ * @slot end-icon - Optional trailing icon, rendered after the native control (e.g. a chevron for a
+ *   field that opens a picker). Ignored when `type` is `number` (stepper buttons), `password` (show/hide
+ *   toggle), or `dropdown` (chevron) -- those types always render their own trailing control there.
+ *   For `type="date"`, the slot is used if provided, otherwise a default calendar icon is shown.
+ * @part field - The bordered field wrapper containing the icon(s) and native control(s).
+ * @part menu - The `bs-menu` rendered below the field for `type="dropdown"` when `open` and
+ *   `options` is non-empty.
  * @part label - The `<label>` element.
- * @part control - The native `<input>` element.
+ * @part required - The red `*` rendered after the label text when `required` is set.
+ * @part icon - The leading icon wrapper element.
+ * @part control - The native control element (`<input>`, `<select>`, or `<textarea>` depending on
+ *   `type`). Composite types (`initials`, `country`) render this part on more than one element.
+ * @part end-icon - The trailing icon wrapper element.
+ * @part chip - A single chip pill, when `type="chip"`.
  * @part description - The helper text element (hidden when `error` is set).
  * @part error - The error message element.
+ * @part error-icon - The warning icon shown before the error message.
  */
 export declare class BsInput {
+    el: HTMLElement;
     /** Current value. Native `input`/`change` events don't cross the Shadow DOM boundary, so this
-     * component re-dispatches them as `bsInput`/`bsChange` custom events instead. */
+     * component re-dispatches them as `bsInput`/`bsChange` custom events instead. Mutable so the
+     * `number` type's stepper buttons can update it directly. */
     value: string;
-    type: 'text' | 'email' | 'password' | 'number';
+    type: 'text' | 'email' | 'password' | 'number' | 'search' | 'date' | 'dropdown' | 'select' | 'textarea' | 'chip' | 'initials' | 'country' | 'pin';
     label?: string;
     placeholder?: string;
     description?: string;
     error?: string;
     disabled: boolean;
+    /** Marks the field as required: renders a red `*` after the label and sets `aria-required="true"`
+     * on the control. Applies regardless of `type`. */
+    required: boolean;
+    /** Step size for `type="number"`'s increment/decrement stepper buttons. */
+    step: number;
+    /** Minimum value for `type="number"`'s stepper buttons. */
+    min?: number;
+    /** Maximum value for `type="number"`'s stepper buttons. */
+    max?: number;
+    /** Options for `type="select"` (rendered as native `<option>`s) and `type="dropdown"` (rendered
+     * as a `bs-menu` of `bs-menu-item`s when `open`). Must be set as a JS property, not an HTML
+     * attribute -- see CONVENTIONS.md's non-string props rule. */
+    options: {
+        label: string;
+        value: string;
+    }[];
+    /** Number of visible rows for `type="textarea"`. */
+    rows: number;
+    /** Current chips for `type="chip"`. Must be set as a JS property, not an HTML attribute -- see
+     * CONVENTIONS.md's non-string props rule. */
+    chips: string[];
+    /** Title select options for `type="initials"` (e.g. `['Mrs.', 'Mr.', 'Dr.']`). Must be set as a
+     * JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule. */
+    titleOptions: string[];
+    /** Current selected title for `type="initials"`. Named `initialsTitle` rather than `title` --
+     * `title` is a reserved standard HTML attribute (tooltip text) inherited by every element, and
+     * Stencil warns against shadowing it with a component `@Prop`. */
+    initialsTitle: string;
+    /** Country select options for `type="country"`. Must be set as a JS property, not an HTML
+     * attribute -- see CONVENTIONS.md's non-string props rule. */
+    countryOptions: {
+        code: string;
+        label: string;
+        flagIcon?: string;
+    }[];
+    /** Current selected country code for `type="country"`. */
+    country: string;
+    /** Number of cells for `type="pin"`. */
+    length: number;
+    /** Whether the `type="dropdown"` trigger is open. Reflects to an attribute so consumers can style
+     * an open state via CSS. When `options` is non-empty, this also controls whether the `bs-menu`
+     * of `bs-menu-item`s is rendered below the field. */
+    open: boolean;
     bsInput: EventEmitter<string>;
     bsChange: EventEmitter<string>;
+    /** Emitted when `type="dropdown"`'s trigger is toggled. See `open`'s doc comment for this type's
+     * shell-only limitation. */
+    bsOpen: EventEmitter<boolean>;
+    /** Emitted when a chip is committed (Enter pressed in the draft input) for `type="chip"`. */
+    bsChipAdd: EventEmitter<string>;
+    /** Emitted when a chip's remove button is clicked for `type="chip"`. */
+    bsChipRemove: EventEmitter<string>;
+    /** Emitted when the title `<select>` changes for `type="initials"`. */
+    bsTitleChange: EventEmitter<string>;
+    /** Emitted when the country `<select>` changes for `type="country"`. */
+    bsCountryChange: EventEmitter<string>;
+    /** Tracks whether the `icon` slot has assigned content, so the leading icon wrapper only takes
+     * up space in the field when there's actually an icon (same pattern as `bs-button`). */
+    hasIcon: boolean;
+    /** Tracks whether the `end-icon` slot has assigned content, so the trailing icon wrapper only
+     * takes up space in the field when there's actually a trailing icon. */
+    hasEndIcon: boolean;
+    /** Whether `type="password"`'s native input is currently rendered as `type="text"` (revealed). The
+     * `type` prop itself stays `'password'` -- this only toggles the rendered native input's type. */
+    passwordVisible: boolean;
+    /** Draft text for `type="chip"`'s trailing input, committed to a chip on Enter. */
+    chipDraft: string;
+    private pinInputs;
+    /** Computes the initial `hasIcon`/`hasEndIcon` state directly from the host's light DOM
+     * children, before first render -- see `bs-button`'s `componentWillLoad` for why `slotchange`
+     * alone isn't enough for a slot that starts (and stays) empty. */
+    componentWillLoad(): void;
+    private hasSlottedContent;
+    private onIconSlotchange;
+    private onEndIconSlotchange;
     private onInput;
     private onChange;
+    private clampNumber;
+    private onStepperIncrement;
+    private onStepperDecrement;
+    private onTogglePasswordVisibility;
+    private onDropdownToggle;
+    private onDropdownKeydown;
+    private onDropdownOptionSelect;
+    /** Closes the `type="dropdown"` menu on Escape, from anywhere within the component (host is the
+     * default @Listen target, and both keydown from the native control and from `bs-menu-item`
+     * buttons bubble/compose up to it). */
+    onHostKeydown(ev: KeyboardEvent): void;
+    /** Closes the `type="dropdown"` menu once focus leaves the component entirely (e.g. Tab away, or
+     * a click outside that moves focus elsewhere) -- `focusout` is composed, so it bubbles across
+     * the `bs-menu-item` shadow boundary too. */
+    onHostFocusOut(ev: FocusEvent): void;
+    private onChipDraftInput;
+    private onChipDraftKeydown;
+    private onChipRemove;
+    private onTitleChange;
+    private onCountryChange;
+    private onPinInput;
+    private onPinKeydown;
+    private get showsEndIconArea();
+    private get showsIconArea();
+    private renderIconContent;
+    private renderEndIconContent;
+    private renderStandardControl;
+    private renderSelectControl;
+    private renderTextareaControl;
+    private renderChipControl;
+    private renderInitialsControl;
+    private renderCountryControl;
+    private renderControl;
+    private renderField;
+    private renderPinField;
     render(): any;
 }

package/dist/types/components/bs-input/bs-input.stories.d.ts

@@ -1,10 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+type BsInputType = 'text' | 'email' | 'password' | 'number' | 'search' | 'date' | 'dropdown' | 'select' | 'textarea' | 'chip' | 'initials' | 'country' | 'pin';
 interface BsInputArgs {
+    type: BsInputType;
     label: string;
     placeholder: string;
     description: string;
     error: string;
     disabled: boolean;
+    required: boolean;
+    icon: boolean;
+    endIcon: boolean;
 }
 declare const meta: Meta<BsInputArgs>;
 export default meta;
@@ -13,3 +18,17 @@ export declare const Default: Story;
 export declare const WithDescription: Story;
 export declare const WithError: Story;
 export declare const Disabled: Story;
+export declare const WithIcon: Story;
+export declare const WithEndIcon: Story;
+export declare const Required: Story;
+export declare const Search: Story;
+export declare const NumberInput: Story;
+export declare const Password: Story;
+export declare const DateInput: Story;
+export declare const Dropdown: Story;
+export declare const Select: Story;
+export declare const TextArea: Story;
+export declare const Chip: Story;
+export declare const Initials: Story;
+export declare const Country: Story;
+export declare const Pin: Story;

package/dist/types/components/bs-source-link/bs-source-link.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-source-link/bs-source-link.d.ts

@@ -0,0 +1,51 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A single citation row inside `bs-chatbot-sources-drawer` -- a file icon + filename on the first
+ * line, the originating system and version on the second, and a trailing "open" arrow.
+ *
+ * ## When to use
+ * - One row per source Genie cited in a response, slotted into `bs-chatbot-sources-drawer`.
+ *
+ * ## When not to use
+ * - Outside the sources drawer context -- this is a purpose-built citation row, not a generic
+ *   link/list-item component.
+ *
+ * @slot icon - Overrides the default file icon.
+ * @part icon - The leading file-type icon.
+ * @part filename - The filename text.
+ * @part source - The source system name.
+ * @part version - The version label.
+ * @part arrow - The trailing "open" arrow icon.
+ * @prop --bs-source-link-radius - Corner radius of the row. Aliased to `--bs-border-radius-150`.
+ * @prop --bs-source-link-padding - Padding around the row. Aliased to `--bs-spacing-150`.
+ * @prop --bs-source-link-gap - Gap between the filename+meta block and the trailing arrow.
+ *   Aliased to `--bs-spacing-50`.
+ * @prop --bs-source-link-icon-gap - Gap between the leading icon and the filename text. Aliased
+ *   to `--bs-spacing-75`.
+ * @prop --bs-source-link-hover - Row background on hover/focus. Aliased to `--bs-surface-hover`.
+ * @prop --bs-source-link-pressed - Row background while active/pressed. Aliased to
+ *   `--bs-surface-pressed`.
+ * @prop --bs-source-link-focus - Focus-visible outline color. Aliased to
+ *   `--bs-border-neutral-focus`.
+ * @prop --bs-source-link-filename-color - Filename text color. Aliased to `--bs-text-default`.
+ * @prop --bs-source-link-meta-color - Source/version text color. Aliased to `--bs-text-secondary`.
+ * @prop --bs-source-link-icon-color - File icon and arrow color. Aliased to `--bs-icon-default`.
+ * @prop --bs-source-link-dot-color - Separator dot between source and version. Aliased to
+ *   `--bs-text-secondary`.
+ */
+export declare class BsSourceLink {
+    /** The cited document's filename. */
+    fileName: string;
+    /** The system/app the document came from (e.g. "HoltePortalen"). */
+    sourceName?: string;
+    /** The document's version label (e.g. "v3.2"). Omit if the source has no version. */
+    version?: string;
+    /** If set, renders the row as a link that opens this URL; otherwise as a button that only emits `bsOpen`. */
+    href?: string;
+    /** `target` used when `href` is set. */
+    target: string;
+    /** Fires on click/activation, whether or not `href` is set -- lets the consuming app log or handle the open. */
+    bsOpen: EventEmitter<void>;
+    private onClick;
+    render(): any;
+}

package/dist/types/components/bs-source-link/bs-source-link.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsSourceLinkArgs {
+    fileName: string;
+    sourceName: string;
+    version: string;
+    href: string;
+}
+declare const meta: Meta<BsSourceLinkArgs>;
+export default meta;
+type Story = StoryObj<BsSourceLinkArgs>;
+export declare const Default: Story;
+export declare const WithoutVersion: Story;
+export declare const WithoutSourceOrVersion: Story;