@dsn-starter-kit/components-web 2.0.0 → 3.1.0

package/dist/index.d.mts

@@ -0,0 +1,258 @@
+//#region src/button/Button.d.ts
+/**
+ * DSN Button Web Component
+ *
+ * A custom element that provides a styled button with multiple variants and sizes.
+ * Uses the same CSS classes and design tokens as the HTML and React button components.
+ *
+ * @example
+ * ```html
+ * <dsn-button variant="strong" size="default">Save</dsn-button>
+ * <dsn-button variant="strong-negative" size="small">Delete</dsn-button>
+ * <dsn-button variant="default" loading>Loading...</dsn-button>
+ * <dsn-button variant="subtle" icon-only aria-label="Close">×</dsn-button>
+ * ```
+ */
+type ButtonVariant = 'strong' | 'strong-negative' | 'strong-positive' | 'default' | 'default-negative' | 'default-positive' | 'subtle' | 'subtle-negative' | 'subtle-positive' | 'link';
+type ButtonSize = 'small' | 'default' | 'large';
+declare class DsnButton extends HTMLElement {
+  static get observedAttributes(): string[];
+  private _button;
+  private _iconStartSlot;
+  private _loaderEl;
+  constructor();
+  connectedCallback(): void;
+  attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void;
+  private _updateLoader;
+  private _createLoaderSvg;
+  private _updateClasses;
+  private _updateDisabled;
+  private _updateType;
+  get variant(): ButtonVariant;
+  set variant(value: ButtonVariant);
+  get size(): ButtonSize;
+  set size(value: ButtonSize);
+  get disabled(): boolean;
+  set disabled(value: boolean);
+  get loading(): boolean;
+  set loading(value: boolean);
+  get fullWidth(): boolean;
+  set fullWidth(value: boolean);
+  get iconOnly(): boolean;
+  set iconOnly(value: boolean);
+  get type(): string;
+  set type(value: string);
+  get form(): HTMLFormElement | null;
+  focus(options?: FocusOptions): void;
+  blur(): void;
+  click(): void;
+}
+declare function defineButton(tagName?: string): void;
+//#endregion
+//#region src/icon/icon-paths.generated.d.ts
+declare const iconPaths: Record<string, string[]>;
+//#endregion
+//#region src/icon/Icon.d.ts
+type IconSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+type IconName = keyof typeof iconPaths;
+declare class DsnIcon extends HTMLElement {
+  static get observedAttributes(): string[];
+  private _svg;
+  constructor();
+  connectedCallback(): void;
+  attributeChangedCallback(): void;
+  private _render;
+  get name(): string;
+  set name(value: string);
+  get size(): IconSize;
+  set size(value: IconSize);
+  get label(): string;
+  set label(value: string);
+}
+declare function defineIcon(tagName?: string): void;
+//#endregion
+//#region src/paragraph/Paragraph.d.ts
+/**
+ * DSN Paragraph Web Component
+ *
+ * A custom element that provides a styled paragraph with multiple variants.
+ * Uses the same CSS classes and design tokens as the HTML and React paragraph components.
+ *
+ * @example
+ * ```html
+ * <dsn-paragraph>Default body text</dsn-paragraph>
+ * <dsn-paragraph variant="lead">Introductory text</dsn-paragraph>
+ * <dsn-paragraph variant="small-print">Terms and conditions apply.</dsn-paragraph>
+ * ```
+ */
+type ParagraphVariant = 'default' | 'lead' | 'small-print';
+declare class DsnParagraph extends HTMLElement {
+  static get observedAttributes(): string[];
+  private _paragraph;
+  constructor();
+  connectedCallback(): void;
+  attributeChangedCallback(): void;
+  private _updateClasses;
+  get variant(): ParagraphVariant;
+  set variant(value: ParagraphVariant);
+}
+declare function defineParagraph(tagName?: string): void;
+//#endregion
+//#region src/heading/Heading.d.ts
+/**
+ * DSN Heading Web Component
+ *
+ * A custom element that provides styled headings with independent
+ * semantic level and visual appearance.
+ *
+ * @example
+ * ```html
+ * <dsn-heading>Default h2 heading</dsn-heading>
+ * <dsn-heading level="1">Page Title</dsn-heading>
+ * <dsn-heading level="2" appearance="heading-4">Smaller h2</dsn-heading>
+ * ```
+ */
+type HeadingLevel = '1' | '2' | '3' | '4' | '5' | '6';
+type HeadingAppearance = 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4' | 'heading-5' | 'heading-6';
+declare class DsnHeading extends HTMLElement {
+  static get observedAttributes(): string[];
+  private _heading;
+  constructor();
+  connectedCallback(): void;
+  attributeChangedCallback(name: string): void;
+  private _updateElement;
+  private _updateClasses;
+  get level(): HeadingLevel;
+  set level(value: HeadingLevel);
+  get appearance(): HeadingAppearance;
+  set appearance(value: HeadingAppearance);
+}
+declare function defineHeading(tagName?: string): void;
+//#endregion
+//#region src/link/Link.d.ts
+/**
+ * DSN Link Web Component
+ *
+ * A custom element that provides a styled anchor link with icon support.
+ * Uses the same CSS classes and design tokens as the HTML and React link components.
+ *
+ * @example
+ * ```html
+ * <dsn-link href="/about">About us</dsn-link>
+ * <dsn-link href="https://example.com" external>External (opens in new tab)</dsn-link>
+ * <dsn-link href="/dashboard" current>Dashboard</dsn-link>
+ * <dsn-link disabled>Unavailable</dsn-link>
+ * <dsn-link size="small" href="/small">Small link</dsn-link>
+ * <dsn-link size="large" href="/large">Large link</dsn-link>
+ * ```
+ */
+type LinkSize = 'small' | 'default' | 'large';
+declare class DsnLink extends HTMLElement {
+  static get observedAttributes(): string[];
+  private _anchor;
+  private _hintNode;
+  private _hrefBackup;
+  constructor();
+  connectedCallback(): void;
+  attributeChangedCallback(name: string): void;
+  private _updateClasses;
+  private _updateHref;
+  private _updateTarget;
+  private _updateRel;
+  private _updateDisabled;
+  private _updateCurrent;
+  private _updateExternal;
+  get href(): string | null;
+  set href(value: string | null);
+  get target(): string | null;
+  set target(value: string | null);
+  get rel(): string | null;
+  set rel(value: string | null);
+  get disabled(): boolean;
+  set disabled(value: boolean);
+  get current(): boolean;
+  set current(value: boolean);
+  get external(): boolean;
+  set external(value: boolean);
+  get size(): LinkSize;
+  set size(value: LinkSize);
+  focus(options?: FocusOptions): void;
+  blur(): void;
+  click(): void;
+}
+declare function defineLink(tagName?: string): void;
+//#endregion
+//#region src/unordered-list/UnorderedList.d.ts
+/**
+ * DSN Unordered List Web Component
+ *
+ * A custom element that provides a styled unordered list with accent-colored bullet markers.
+ * Uses the same CSS classes and design tokens as the HTML and React components.
+ *
+ * @example
+ * ```html
+ * <dsn-unordered-list>
+ *   <li>First item</li>
+ *   <li>Second item</li>
+ *   <li>Third item</li>
+ * </dsn-unordered-list>
+ * ```
+ */
+declare class DsnUnorderedList extends HTMLElement {
+  private _list;
+  constructor();
+  connectedCallback(): void;
+}
+declare function defineUnorderedList(tagName?: string): void;
+//#endregion
+//#region src/ordered-list/OrderedList.d.ts
+/**
+ * DSN Ordered List Web Component
+ *
+ * A custom element that provides a styled ordered list with numbered markers.
+ * Uses the same CSS classes and design tokens as the HTML and React components.
+ *
+ * @example
+ * ```html
+ * <dsn-ordered-list>
+ *   <li>First step</li>
+ *   <li>Second step</li>
+ *   <li>Third step</li>
+ * </dsn-ordered-list>
+ *
+ * <dsn-ordered-list start="5">
+ *   <li>Fifth step</li>
+ *   <li>Sixth step</li>
+ * </dsn-ordered-list>
+ * ```
+ */
+declare class DsnOrderedList extends HTMLElement {
+  static get observedAttributes(): string[];
+  private _list;
+  constructor();
+  connectedCallback(): void;
+  attributeChangedCallback(name: string): void;
+  private _updateStart;
+  get start(): number;
+  set start(value: number);
+}
+declare function defineOrderedList(tagName?: string): void;
+//#endregion
+//#region src/index.d.ts
+/**
+ * Register all components with their default tag names.
+ * Call this once in your application entry point.
+ *
+ * Default tag names:
+ * - dsn-button
+ * - dsn-icon
+ * - dsn-paragraph
+ * - dsn-heading
+ * - dsn-link
+ * - dsn-unordered-list
+ * - dsn-ordered-list
+ */
+declare function defineAllComponents(): void;
+//#endregion
+export { type ButtonSize, type ButtonVariant, DsnButton, DsnHeading, DsnIcon, DsnLink, DsnOrderedList, DsnParagraph, DsnUnorderedList, type HeadingAppearance, type HeadingLevel, type IconName, type IconSize, type ParagraphVariant, defineAllComponents, defineButton, defineHeading, defineIcon, defineLink, defineOrderedList, defineParagraph, defineUnorderedList };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/button/Button.ts","../src/icon/icon-paths.generated.ts","../src/icon/Icon.ts","../src/paragraph/Paragraph.ts","../src/heading/Heading.ts","../src/link/Link.ts","../src/unordered-list/UnorderedList.ts","../src/ordered-list/OrderedList.ts","../src/index.ts"],"mappings":";;;;;;;;;;;;;;;KAeY;KAYA;cAMC,kBAAkB;aAClB;UAYH;UACA;UACA;;EAyBR;EAMA,yBACE,cACA,0BACA;UAyBM;UAgBA;UA2BA;UA0BA;UAeA;MAKJ,WAAW;MAIX,QAAQ,OAAO;MAKf,QAAQ;MAIR,KAAK,OAAO;MAKZ;MAIA,SAAS;MAST;MAIA,QAAQ;MASR;MAIA,UAAU;MASV;MAIA,SAAS;MAST;MAIA,KAAK;MAKL,QAAQ;EAKZ,MAAM,UAAU;EAIhB;EAIA;;iBAMc,aAAa;;;cCpShB,WAAW;;;KCcZ;KACA,wBAAwB;cAEvB,gBAAgB;aAChB;UAIH;;EAWR;EAIA;UAIQ;MAwDJ;MAIA,KAAK;MAKL,QAAQ;MAIR,KAAK,OAAO;MAKZ;MAIA,MAAM;;iBAUI,WAAW;;;;;;;;;;;;;;;;KCrHf;cAKC,qBAAqB;aACrB;UAIH;;EAkBR;EAIA;UAIQ;MAYJ,WAAW;MAIX,QAAQ,OAAO;;iBAML,gBAAgB;;;;;;;;;;;;;;;;KC1DpB;KACA;cAWC,mBAAmB;aACnB;UAIH;;EAkBR;EAKA,yBAAyB;UAOjB;UAWA;MAOJ,SAAS;MAIT,MAAM,OAAO;MAKb,cAAc;MAKd,WAAW,OAAO;;iBAMR,cAAc;;;;;;;;;;;;;;;;;;;KClFlB;cAKC,gBAAgB;aAChB;UAIH;UACA;UACA;;EAoBR;EAUA,yBAAyB;UA0BjB;UAaA;UAUA;UASA;UASA;UAmBA;UAQA;MAyBJ;MAIA,KAAK;MASL;MAIA,OAAO;MASP;MAIA,IAAI;MASJ;MAIA,SAAS;MAST;MAIA,QAAQ;MASR;MAIA,SAAS;MAST,QAAQ;MAIR,KAAK,OAAO;EAKhB,MAAM,UAAU;EAIhB;EAIA;;iBAMc,WAAW;;;;;;;;;;;;;;;;;;cCpQd,yBAAyB;UAC5B;;EAmBR;;iBAMc,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;cCrBvB,uBAAuB;aACvB;UAIH;;EAmBR;EAKA,yBAAyB;UAMjB;MAUJ;MAIA,MAAM;;iBAMI,kBAAkB;;;;;;;;;;;;;;;;iBCLlB"}