@oti-adjei/ui 0.1.0-beta.5 → 0.1.0-beta.6

package/dist/angular.d.ts

@@ -0,0 +1,406 @@
+/**
+ * Angular type declarations for @oti-adjei/ui web components.
+ *
+ * Provides typed interfaces for each custom element so that Angular
+ * `@ViewChild` / `ElementRef` usages are fully type-safe.
+ *
+ * Usage:
+ *   import type { MhButtonElement } from '@oti-adjei/ui/angular';
+ *
+ *   @ViewChild('myBtn') btn!: ElementRef<MhButtonElement>;
+ *   this.btn.nativeElement.variant = 'primary'; // ✅ typed
+ *
+ * Angular setup:
+ *   // Standalone component
+ *   @Component({ ..., schemas: [CUSTOM_ELEMENTS_SCHEMA] })
+ *
+ *   // NgModule
+ *   @NgModule({ ..., schemas: [CUSTOM_ELEMENTS_SCHEMA] })
+ *
+ *   // main.ts — register elements
+ *   import '@oti-adjei/ui';
+ */
+
+// ─── Button ───────────────────────────────────────────────────────────────────
+
+export interface MhButtonElement extends HTMLElement {
+  /**
+   * Visual variant.
+   * @default 'primary'
+   */
+  variant: 'primary' | 'secondary' | 'ghost' | 'danger' | 'dark' | 'social';
+  /** @default 'md' */
+  size: 'sm' | 'md' | 'lg' | 'xl';
+  /** @default 'uppercase' */
+  textCase: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
+  disabled: boolean;
+  loading: boolean;
+  /** @default 'button' */
+  type: 'button' | 'submit' | 'reset';
+  href: string | undefined;
+  fullWidth: boolean;
+}
+
+// ─── Input ────────────────────────────────────────────────────────────────────
+
+export interface MhInputElement extends HTMLElement {
+  /** @default 'text' */
+  type: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' | 'date';
+  /** @default 'md' */
+  size: 'sm' | 'md' | 'lg';
+  value: string;
+  placeholder: string;
+  label: string;
+  helpText: string;
+  disabled: boolean;
+  readonly: boolean;
+  required: boolean;
+  /** @default 'default' */
+  state: 'default' | 'error' | 'success' | 'warning';
+  errorMessage: string;
+  clearable: boolean;
+  passwordToggle: boolean;
+}
+
+// ─── Modal ────────────────────────────────────────────────────────────────────
+
+export interface MhModalElement extends HTMLElement {
+  open: boolean;
+  label: string;
+  /** @default 'md' */
+  size: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  noHeader: boolean;
+  noClose: boolean;
+  noOverlayDismiss: boolean;
+  noEscDismiss: boolean;
+  /** Opens the modal. */
+  show(): void;
+  /** Closes the modal. */
+  hide(): void;
+}
+
+// ─── Alert ────────────────────────────────────────────────────────────────────
+
+export interface MhAlertElement extends HTMLElement {
+  /** @default 'info' */
+  variant: 'info' | 'success' | 'warning' | 'error' | 'solid-info' | 'solid-success' | 'solid-warning' | 'solid-error';
+  /** @default 'md' */
+  size: 'sm' | 'md' | 'lg';
+  closable: boolean;
+  open: boolean;
+  icon: string;
+  title: string;
+  description: string;
+}
+
+// ─── Avatar ───────────────────────────────────────────────────────────────────
+
+export interface MhAvatarElement extends HTMLElement {
+  src: string;
+  alt: string;
+  initials: string;
+  /** @default 'md' */
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /** @default 'circle' */
+  shape: 'circle' | 'rounded' | 'square';
+  /** @default 'none' */
+  status: 'online' | 'offline' | 'away' | 'busy' | 'none';
+  /** @default 'none' */
+  border: 'none' | 'subtle' | 'primary';
+  /** @default 'none' */
+  tone: 'cyan' | 'pink' | 'orange' | 'green' | 'yellow' | 'purple' | 'primary' | 'dark' | 'none';
+  clickable: boolean;
+}
+
+// ─── Badge ────────────────────────────────────────────────────────────────────
+
+export interface MhBadgeElement extends HTMLElement {
+  /** @default 'default' */
+  variant: 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info' | 'solid-primary' | 'solid-success' | 'solid-error' | 'solid-warning';
+  /** @default 'md' */
+  size: 'sm' | 'md' | 'lg';
+  dot: boolean;
+  pulse: boolean;
+  removable: boolean;
+  clickable: boolean;
+}
+
+// ─── Card ─────────────────────────────────────────────────────────────────────
+
+export interface MhCardElement extends HTMLElement {
+  /** @default 'default' */
+  variant: 'default' | 'featured' | 'compact' | 'interactive';
+}
+
+// ─── Checkbox ─────────────────────────────────────────────────────────────────
+
+export interface MhCheckboxElement extends HTMLElement {
+  checked: boolean;
+  indeterminate: boolean;
+  disabled: boolean;
+  /** @default 'md' */
+  size: 'sm' | 'md' | 'lg';
+  label: string;
+  description: string;
+}
+
+// ─── Switch ───────────────────────────────────────────────────────────────────
+
+export interface MhSwitchElement extends HTMLElement {
+  checked: boolean;
+  /** @default 'md' */
+  size: 'sm' | 'md' | 'lg';
+  disabled: boolean;
+  label: string;
+  description: string;
+}
+
+// ─── Dropdown ─────────────────────────────────────────────────────────────────
+
+export interface MhDropdownElement extends HTMLElement {
+  /** @default 'default' */
+  variant: 'default' | 'black' | 'blue';
+  open: boolean;
+  disabled: boolean;
+  right: boolean;
+  up: boolean;
+}
+
+export interface MhDropdownItemElement extends HTMLElement {
+  value: string;
+  disabled: boolean;
+  selected: boolean;
+  /** @default true */
+  closeOnSelect: boolean;
+}
+
+// ─── Search ───────────────────────────────────────────────────────────────────
+
+export interface MhSearchElement extends HTMLElement {
+  value: string;
+  placeholder: string;
+  open: boolean;
+  clearable: boolean;
+  /** @default 'left' */
+  iconPosition: 'left' | 'right' | 'none';
+  /** @default 'md' */
+  size: 'sm' | 'md' | 'lg';
+}
+
+// ─── Progress ─────────────────────────────────────────────────────────────────
+
+export interface MhProgressElement extends HTMLElement {
+  value: number;
+  /** @default 100 */
+  max: number;
+  /** @default 'md' */
+  size: 'sm' | 'md' | 'lg' | 'xl';
+  /** @default 'primary' */
+  variant: 'primary' | 'success' | 'warning' | 'error' | 'gradient' | 'striped' | 'ring';
+  indeterminate: boolean;
+  showLabel: boolean;
+  label: string;
+}
+
+// ─── Pagination ───────────────────────────────────────────────────────────────
+
+export interface MhPaginationElement extends HTMLElement {
+  page: number;
+  total: number;
+  /** @default 10 */
+  pageSize: number;
+  /** @default 'md' */
+  size: 'sm' | 'md' | 'lg';
+  simple: boolean;
+  disabled: boolean;
+}
+
+// ─── Navigation ───────────────────────────────────────────────────────────────
+
+export interface MhNavElement extends HTMLElement {
+  open: boolean;
+}
+
+export interface MhNavItemElement extends HTMLElement {
+  href: string;
+  active: boolean;
+  dropdown: boolean;
+}
+
+// ─── Footer ───────────────────────────────────────────────────────────────────
+
+export interface MhFooterElement extends HTMLElement {
+  tagline: string;
+  copyright: string;
+}
+
+export interface MhFooterGroupElement extends HTMLElement {
+  heading: string;
+}
+
+// ─── Table ────────────────────────────────────────────────────────────────────
+
+export interface MhTableElement extends HTMLElement {
+  striped: boolean;
+  compact: boolean;
+  bordered: boolean;
+  fixedHeader: boolean;
+}
+
+export interface MhTableRowElement extends HTMLElement {
+  header: boolean;
+  highlight: boolean;
+}
+
+export interface MhTableCellElement extends HTMLElement {
+  header: boolean;
+  /** @default 'left' */
+  align: 'left' | 'center' | 'right';
+  sortable: boolean;
+}
+
+// ─── Scroll ───────────────────────────────────────────────────────────────────
+
+export interface MhScrollElement extends HTMLElement {
+  /** @default 'default' */
+  variant: 'default' | 'thin' | 'minimal' | 'primary' | 'hidden' | 'global';
+  /** @default 'vertical' */
+  axis: 'both' | 'horizontal' | 'vertical';
+  smooth: boolean;
+}
+
+// ─── Logo ─────────────────────────────────────────────────────────────────────
+
+export interface MhLogoElement extends HTMLElement {
+  src: string;
+  alt: string;
+  href: string;
+  /** @default 'lockup' */
+  variant: 'lockup' | 'icon' | 'wordmark';
+  /** @default 'md' */
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+// ─── Tab Nav ──────────────────────────────────────────────────────────────────
+
+export interface MhTabNavElement extends HTMLElement {}
+
+export interface MhTabItemElement extends HTMLElement {
+  href: string;
+  active: boolean;
+  value: string;
+}
+
+// ─── Profile ──────────────────────────────────────────────────────────────────
+
+export interface MhProfileElement extends HTMLElement {
+  src: string;
+  alt: string;
+  initials: string;
+  name: string;
+  /** @default 'md' */
+  size: 'sm' | 'md' | 'lg';
+}
+
+// ─── User Card ────────────────────────────────────────────────────────────────
+
+export interface MhUserCardElement extends HTMLElement {
+  avatar: string;
+  tag: string;
+  username: string;
+  badge: string;
+  handle: string;
+  verified: boolean;
+  stat: string;
+}
+
+// ─── Tournament Card ──────────────────────────────────────────────────────────
+
+export interface MhTournamentCardElement extends HTMLElement {
+  image: string;
+  /** @default 'not-started' */
+  status: 'not-started' | 'live' | 'upcoming' | 'completed';
+  statusLabel: string;
+  date: string;
+  heading: string;
+  description: string;
+  prizePool: string;
+  participants: string;
+  organizerName: string;
+  organizerImage: string;
+}
+
+// ─── Game Card ────────────────────────────────────────────────────────────────
+
+export interface MhGameCardElement extends HTMLElement {
+  image: string;
+  heading: string;
+  description: string;
+  likes: string;
+  players: string;
+}
+
+// ─── League Card ──────────────────────────────────────────────────────────────
+
+export interface MhLeagueCardElement extends HTMLElement {
+  heading: string;
+  description: string;
+  badge: string;
+  prizePool: string;
+  participants: string;
+  progress: number;
+}
+
+// ─── Event Card ───────────────────────────────────────────────────────────────
+
+export interface MhEventCardElement extends HTMLElement {
+  /** @default 'vertical' */
+  variant: 'vertical' | 'horizontal';
+  image: string;
+  status: string;
+  date: string;
+  heading: string;
+  description: string;
+  location: string;
+  organizerName: string;
+  organizerImage: string;
+  participants: string;
+}
+
+// ─── Banner ───────────────────────────────────────────────────────────────────
+
+export interface MhBannerElement extends HTMLElement {
+  /** @default 'default' */
+  variant: 'default' | 'search' | 'detail' | 'feature';
+  image: string;
+  heading: string;
+  description: string;
+  badge: string;
+  searchPlaceholder: string;
+  gameImage: string;
+  organizerName: string;
+  stat1: string;
+  stat1Label: string;
+  stat2: string;
+  stat2Label: string;
+  /** @default 3 */
+  dotCount: number;
+  /** @default 0 */
+  activeDot: number;
+}
+
+// ─── Stat ─────────────────────────────────────────────────────────────────────
+
+export interface MhStatElement extends HTMLElement {
+  /** @default 'md' */
+  size: 'sm' | 'md' | 'lg';
+}
+
+// ─── Icon Box ─────────────────────────────────────────────────────────────────
+
+export interface MhIconBoxElement extends HTMLElement {
+  /** @default 'primary' */
+  variant: 'primary' | 'success' | 'error' | 'warning' | 'dark';
+  /** @default 'md' */
+  size: 'sm' | 'md' | 'lg';
+}

package/dist/components/alert/alert.d.ts

@@ -10,19 +10,30 @@ import { MhElement } from '../../mh-element.js';
  */
 export declare class MhAlert extends MhElement {
     static styles: import("lit").CSSResult;
-    /** Visual variant */
+    /**
+     * Semantic colour variant.
+     * - `info` — Blue tint (informational, default).
+     * - `success` — Green tint (operation succeeded).
+     * - `warning` — Yellow tint (proceed with caution).
+     * - `error` — Red tint (operation failed / destructive).
+     * - `solid-*` — High-contrast filled versions of the above.
+     * @default 'info'
+     */
     variant: 'info' | 'success' | 'warning' | 'error' | 'solid-info' | 'solid-success' | 'solid-warning' | 'solid-error';
-    /** Size variant */
+    /**
+     * Alert size preset (affects padding and font size).
+     * @default 'md'
+     */
     size: 'sm' | 'md' | 'lg';
-    /** Show close button */
+    /** When `true`, shows a ✕ dismiss button in the top-right corner. */
     closable: boolean;
-    /** Control visibility */
+    /** Controls visibility. Set to `false` to hide the alert without removing it from the DOM. */
     open: boolean;
-    /** Optional icon text */
+    /** Custom icon content (SVG string or text) that overrides the default semantic icon. */
     icon?: string;
-    /** Optional title text */
+    /** Bold heading text rendered above the description. */
     heading: string;
-    /** Optional description text */
+    /** Secondary body text rendered below the heading. */
     description?: string;
     private isDismissing;
     private handleClose;

package/dist/components/alert/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGhD;;;;;;;;GAQG;AACH,qBACa,OAAQ,SAAQ,SAAS;IACpC,MAAM,CAAC,MAAM,0BAAe;IAE5B,qBAAqB;IAErB,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,YAAY,GAAG,eAAe,GAAG,eAAe,GAAG,aAAa,CAC3G;IAET,mBAAmB;IAEnB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC,wBAAwB;IAExB,QAAQ,UAAS;IAEjB,yBAAyB;IAEzB,IAAI,UAAQ;IAEZ,yBAAyB;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IAE1B,0BAA0B;IACQ,OAAO,SAAM;IAE/C,gCAAgC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IAExB,OAAO,CAAC,YAAY,CAAS;IAEtC,OAAO,CAAC,WAAW;IAYnB,MAAM;CA2CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGhD;;;;;;;;GAQG;AACH,qBACa,OAAQ,SAAQ,SAAS;IACpC,MAAM,CAAC,MAAM,0BAAe;IAE5B;;;;;;;;OAQG;IAEH,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,YAAY,GAAG,eAAe,GAAG,eAAe,GAAG,aAAa,CAC3G;IAET;;;OAGG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC,qEAAqE;IAErE,QAAQ,UAAS;IAEjB,8FAA8F;IAE9F,IAAI,UAAQ;IAEZ,yFAAyF;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IAE1B,wDAAwD;IACtB,OAAO,SAAM;IAE/C,sDAAsD;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IAExB,OAAO,CAAC,YAAY,CAAS;IAEtC,OAAO,CAAC,WAAW;IAYnB,MAAM;CA2CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/avatar/avatar.d.ts

@@ -6,23 +6,50 @@ import { MhElement } from '../../mh-element.js';
  */
 export declare class MhAvatar extends MhElement {
     static styles: import("lit").CSSResult;
-    /** Image source */
+    /** Profile image URL. Shows initials fallback if absent or fails to load. */
     src?: string;
-    /** Image alt text */
+    /** Alt text for the avatar image (used by screen readers). */
     alt?: string;
-    /** Initials text when no image is provided */
+    /** Initials (up to 2 characters) shown inside the avatar when no image is available. */
     initials?: string;
-    /** Size variant */
+    /**
+     * Avatar size preset.
+     * @default 'md'
+     */
     size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-    /** Shape variant */
+    /**
+     * Shape of the avatar container.
+     * - `circle` — Fully rounded (default).
+     * - `rounded` — Rounded corners (8px radius).
+     * - `square` — No border radius.
+     * @default 'circle'
+     */
     shape: 'circle' | 'rounded' | 'square';
-    /** Status indicator */
+    /**
+     * Presence status indicator dot rendered at the bottom-right corner.
+     * - `online` — Green dot.
+     * - `offline` — Gray dot.
+     * - `away` — Yellow dot.
+     * - `busy` — Red dot.
+     * - `none` — No dot (default).
+     * @default 'none'
+     */
     status: 'online' | 'offline' | 'away' | 'busy' | 'none';
-    /** Border style */
+    /**
+     * Border ring style rendered around the avatar.
+     * - `none` — No border (default).
+     * - `subtle` — Faint gray ring.
+     * - `primary` — Solid blue ring matching brand colour.
+     * @default 'none'
+     */
     border: 'none' | 'subtle' | 'primary';
-    /** Background tone for initials */
+    /**
+     * Background colour tone for the initials fallback circle.
+     * Each tone applies a matching accent colour. Use `none` for the default dark background.
+     * @default 'none'
+     */
     tone: 'cyan' | 'pink' | 'orange' | 'green' | 'yellow' | 'purple' | 'primary' | 'dark' | 'none';
-    /** Clickable styling */
+    /** When `true`, applies a pointer cursor to signal the avatar is interactive. */
     clickable: boolean;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/avatar/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGhD;;;;GAIG;AACH,qBACa,QAAS,SAAQ,SAAS;IACrC,MAAM,CAAC,MAAM,0BAAgB;IAE7B,mBAAmB;IACP,GAAG,CAAC,EAAE,MAAM,CAAC;IAEzB,qBAAqB;IACT,GAAG,CAAC,EAAE,MAAM,CAAC;IAEzB,8CAA8C;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE9B,mBAAmB;IAEnB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAQ;IAEtD,oBAAoB;IAEpB,KAAK,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAY;IAElD,uBAAuB;IAEvB,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAU;IAEjE,mBAAmB;IAEnB,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAU;IAE/C,mCAAmC;IAEnC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAU;IAExG,wBAAwB;IAExB,SAAS,UAAS;IAElB,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGhD;;;;GAIG;AACH,qBACa,QAAS,SAAQ,SAAS;IACrC,MAAM,CAAC,MAAM,0BAAgB;IAE7B,6EAA6E;IACjE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEzB,8DAA8D;IAClD,GAAG,CAAC,EAAE,MAAM,CAAC;IAEzB,wFAAwF;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE9B;;;OAGG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAQ;IAEtD;;;;;;OAMG;IAEH,KAAK,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAY;IAElD;;;;;;;;OAQG;IAEH,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAU;IAEjE;;;;;;OAMG;IAEH,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAU;IAE/C;;;;OAIG;IAEH,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAU;IAExG,iFAAiF;IAEjF,SAAS,UAAS;IAElB,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/badge/badge.d.ts

@@ -7,17 +7,30 @@ import { MhElement } from '../../mh-element.js';
  */
 export declare class MhBadge extends MhElement {
     static styles: import("lit").CSSResult;
-    /** Visual variant */
+    /**
+     * Colour variant of the badge.
+     * - `default` — Subtle gray (neutral, unclassified).
+     * - `primary` — Blue.
+     * - `success` — Green.
+     * - `error` — Red.
+     * - `warning` — Yellow.
+     * - `info` — Blue tint (informational).
+     * - `solid-primary` / `solid-success` / `solid-error` / `solid-warning` — High-contrast filled variants.
+     * @default 'default'
+     */
     variant: 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info' | 'solid-primary' | 'solid-success' | 'solid-error' | 'solid-warning';
-    /** Size variant */
+    /**
+     * Badge size preset.
+     * @default 'md'
+     */
     size: 'sm' | 'md' | 'lg';
-    /** Show dot indicator */
+    /** When `true`, shows only a small coloured circle — no text is displayed. */
     dot: boolean;
-    /** Pulsing animation */
+    /** When `true` (and `dot` is also `true`), animates the dot with a pulsing ring. */
     pulse: boolean;
-    /** Show remove button */
+    /** When `true`, displays a ✕ remove button inside the badge. */
     removable: boolean;
-    /** Clickable styling */
+    /** When `true`, applies a pointer cursor to indicate the badge is interactive. */
     clickable: boolean;
     private handleRemove;
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/badge/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGhD;;;;;GAKG;AACH,qBACa,OAAQ,SAAQ,SAAS;IACpC,MAAM,CAAC,MAAM,0BAAe;IAE5B,qBAAqB;IAErB,OAAO,EACH,SAAS,GACT,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,GACN,eAAe,GACf,eAAe,GACf,aAAa,GACb,eAAe,CAAa;IAEhC,mBAAmB;IAEnB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC,yBAAyB;IAEzB,GAAG,UAAS;IAEZ,wBAAwB;IAExB,KAAK,UAAS;IAEd,yBAAyB;IAEzB,SAAS,UAAS;IAElB,wBAAwB;IAExB,SAAS,UAAS;IAElB,OAAO,CAAC,YAAY;IAKpB,MAAM;CAkCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGhD;;;;;GAKG;AACH,qBACa,OAAQ,SAAQ,SAAS;IACpC,MAAM,CAAC,MAAM,0BAAe;IAE5B;;;;;;;;;;OAUG;IAEH,OAAO,EACH,SAAS,GACT,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,GACN,eAAe,GACf,eAAe,GACf,aAAa,GACb,eAAe,CAAa;IAEhC;;;OAGG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC,8EAA8E;IAE9E,GAAG,UAAS;IAEZ,oFAAoF;IAEpF,KAAK,UAAS;IAEd,gEAAgE;IAEhE,SAAS,UAAS;IAElB,kFAAkF;IAElF,SAAS,UAAS;IAElB,OAAO,CAAC,YAAY;IAKpB,MAAM;CAkCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/banner/banner.d.ts

@@ -32,9 +32,16 @@ import { MhElement } from '../../mh-element.js';
  */
 export declare class MhBanner extends MhElement {
     static styles: import("lit").CSSResult;
-    /** Layout variant */
+    /**
+     * Layout variant controlling the banner's content structure.
+     * - `default` — Background image + dark overlay + default slot for custom content.
+     * - `search` — Centered heading + built-in search bar.
+     * - `detail` — Game artwork panel, info grid, stats, and search bar (game detail pages).
+     * - `feature` — Full-width promo with badge, organizer row, heading, and carousel dots.
+     * @default 'default'
+     */
     variant: 'default' | 'search' | 'detail' | 'feature';
-    /** Background image URL */
+    /** Background image URL for the banner. A dark fallback is shown when absent. */
     image: string;
     /** Main heading text */
     heading: string;
@@ -42,23 +49,23 @@ export declare class MhBanner extends MhElement {
     description: string;
     /** Badge label (e.g., "CIRCUIT", "POPULAR") */
     badge: string;
-    /** Search placeholder text */
+    /** Placeholder text for the built-in search bar (search and detail variants). */
     searchPlaceholder: string;
-    /** Game artwork image URL (detail variant) */
+    /** Game artwork image URL displayed in the left panel of the detail variant. */
     gameImage: string;
-    /** Organizer display name (feature variant) */
+    /** Organizer display name rendered in the organizer row of the feature variant. */
     organizerName: string;
-    /** First stat value (detail variant) */
+    /** Primary stat value shown in the stats row of the detail variant (e.g., "1st Place"). */
     stat1: string;
-    /** First stat label (detail variant) */
+    /** Label beneath the primary stat value (e.g., "Prize"). */
     stat1Label: string;
-    /** Second stat value (detail variant) */
+    /** Secondary stat value shown in the stats row of the detail variant (e.g., "32"). */
     stat2: string;
-    /** Second stat label (detail variant) */
+    /** Label beneath the secondary stat value (e.g., "Players"). */
     stat2Label: string;
-    /** Number of carousel dots (feature variant) */
+    /** Number of carousel navigation dots to render (feature variant). */
     dotCount: number;
-    /** Active dot index (0-based, feature variant) */
+    /** Zero-based index of the currently active (filled) carousel dot. */
     activeDot: number;
     private _renderBg;
     private _renderSearch;

package/dist/components/banner/banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../../src/components/banner/banner.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBACa,QAAS,SAAQ,SAAS;IACrC,MAAM,CAAC,MAAM,0BAAgB;IAE7B,qBAAqB;IAErB,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAa;IAEjE,2BAA2B;IAE3B,KAAK,SAAM;IAEX,wBAAwB;IAExB,OAAO,SAAM;IAEb,uBAAuB;IAEvB,WAAW,SAAM;IAEjB,+CAA+C;IAE/C,KAAK,SAAM;IAEX,8BAA8B;IAE9B,iBAAiB,SAAmD;IAEpE,8CAA8C;IAE9C,SAAS,SAAM;IAEf,+CAA+C;IAE/C,aAAa,SAAM;IAEnB,wCAAwC;IAExC,KAAK,SAAM;IAEX,wCAAwC;IAExC,UAAU,SAAM;IAEhB,yCAAyC;IAEzC,KAAK,SAAM;IAEX,yCAAyC;IAEzC,UAAU,SAAM;IAEhB,gDAAgD;IAEhD,QAAQ,SAAK;IAEb,kDAAkD;IAElD,SAAS,SAAK;IAEd,OAAO,CAAC,SAAS;IAYjB,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,aAAa;IA6FrB,OAAO,CAAC,cAAc;IAgDtB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,WAAW;IAKnB,MAAM;CAwBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../../src/components/banner/banner.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBACa,QAAS,SAAQ,SAAS;IACrC,MAAM,CAAC,MAAM,0BAAgB;IAE7B;;;;;;;OAOG;IAEH,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAa;IAEjE,iFAAiF;IAEjF,KAAK,SAAM;IAEX,wBAAwB;IAExB,OAAO,SAAM;IAEb,uBAAuB;IAEvB,WAAW,SAAM;IAEjB,+CAA+C;IAE/C,KAAK,SAAM;IAEX,iFAAiF;IAEjF,iBAAiB,SAAmD;IAEpE,gFAAgF;IAEhF,SAAS,SAAM;IAEf,mFAAmF;IAEnF,aAAa,SAAM;IAEnB,2FAA2F;IAE3F,KAAK,SAAM;IAEX,4DAA4D;IAE5D,UAAU,SAAM;IAEhB,sFAAsF;IAEtF,KAAK,SAAM;IAEX,gEAAgE;IAEhE,UAAU,SAAM;IAEhB,sEAAsE;IAEtE,QAAQ,SAAK;IAEb,sEAAsE;IAEtE,SAAS,SAAK;IAEd,OAAO,CAAC,SAAS;IAYjB,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,aAAa;IA6FrB,OAAO,CAAC,cAAc;IAgDtB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,WAAW;IAKnB,MAAM;CAwBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}