@prioticket/design-system-web 1.0.0

package/dist/types/components/pd-menu-item.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+import '@material/web/menu/menu-item.js';
+import '@material/web/icon/icon.js';
+/**
+ * @customElement pd-menu-item
+ * @summary A menu item component for use within pd-menu.
+ *
+ * @slot - The main content of the menu item
+ * @slot start - Content at the start of the menu item (e.g., icon)
+ * @slot end - Content at the end of the menu item (e.g., shortcut text)
+ *
+ * @fires close-menu - Fired when the menu should be closed (usually on selection)
+ */
+export declare class PdMenuItemM extends LitElement {
+    /** Whether the menu item is disabled */
+    disabled: boolean;
+    /** The type of menu item */
+    type: 'menuitem' | 'option' | 'button';
+    /** The href for link-type menu items */
+    href: string;
+    /** The target for link-type menu items */
+    target: string;
+    /** Whether to keep the menu open after selection */
+    keepOpen: boolean;
+    /** Whether the menu item is selected (for option type) */
+    selected: boolean;
+    /** Leading icon name */
+    leadingIcon: string;
+    /** Trailing icon name */
+    trailingIcon: string;
+    /** Text content for simple menu items */
+    text: string;
+    /** Supporting text (subtitle) */
+    supportingText: string;
+    private _handleClick;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}

package/dist/types/components/pd-menu.d.ts

@@ -0,0 +1,58 @@
+import { LitElement } from 'lit';
+import '@material/web/menu/menu-item.js';
+/**
+ * @customElement pd-menu
+ * @summary A thin wrapper around the Material Web Menu component.
+ *
+ * @slot - Default slot for `pd-menu-item` elements.
+ *
+ * @cssprop --pd-menu-container-shape - The shape of the menu container.
+ * @cssprop --pd-menu-container-color - The background color of the menu.
+ * @cssprop --pd-menu-container-elevation - The box-shadow for the menu container.
+ */
+export declare class PdMenu extends LitElement {
+    private readonly menu;
+    /**
+     * The ID of the element to anchor the menu to.
+     * The element must be in the same root node as the menu.
+     */
+    anchor: string;
+    /**
+     * Reference to the element to anchor the menu to.
+     * Overrides `anchor`.
+     */
+    anchorElement?: HTMLElement;
+    /** Controls whether the menu is open or closed. */
+    open: boolean;
+    /** The positioning strategy for the menu. */
+    positioning: 'absolute' | 'fixed' | 'document' | 'popover';
+    /** Corner of the anchor to align the menu to. */
+    anchorCorner: 'end-start' | 'end-end' | 'start-start' | 'start-end';
+    /** Corner of the menu to align with the anchor corner. */
+    menuCorner: 'end-start' | 'end-end' | 'start-start' | 'start-end';
+    /** Skips the opening and closing animations. */
+    quick: boolean;
+    /** Whether the menu has an overflow submenu. */
+    hasOverflow: boolean;
+    /** Horizontal offset of the menu from the anchor. */
+    xOffset: number;
+    /** Vertical offset of the menu from the anchor. */
+    yOffset: number;
+    /** Determines the default focus state of the menu. */
+    defaultFocus: 'none' | 'list-root' | 'first-item' | 'last-item';
+    /** Whether the menu should remain open when focus leaves the menu. */
+    stayOpenOnFocusout: boolean;
+    /** Whether the menu should remain open when clicking outside the menu. */
+    stayOpenOnOutsideClick: boolean;
+    /** Whether to skip restoring focus to the anchor when the menu closes. */
+    skipRestoreFocus: boolean;
+    /**
+     * FIX: This is the crucial change.
+     * Instead of `firstUpdated`, we use `updated` to react to property changes.
+     * We search for the anchor element within the component's root node,
+     * which correctly handles Shadow DOM boundaries.
+     */
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}

package/dist/types/components/pd-progress.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+import '@material/web/progress/circular-progress.js';
+import '@material/web/progress/linear-progress.js';
+/**
+ * @customElement pd-progress
+ * @summary A thin wrapper around the Material Web Progress components.
+ *
+ * @cssprop --pd-progress-active-indicator-color - The color of the active progress indicator.
+ * @cssprop --pd-progress-track-color - The color of the progress track.
+ */
+export declare class PdProgress extends LitElement {
+    /** The type of progress indicator. */
+    type: 'linear' | 'circular';
+    /** The progress value (0-1). When undefined, shows indeterminate progress. */
+    value?: number;
+    /** The maximum value for the progress (used for buffer). */
+    max: number;
+    /** The buffer value (0-max) for linear progress showing buffered content. */
+    buffer?: number;
+    /** Whether the progress indicator should be indeterminate. */
+    indeterminate: boolean;
+    /** Whether the progress indicator is visible. */
+    visible: boolean;
+    /** Size variant for circular progress. */
+    size: 'small' | 'medium' | 'large';
+    /** The aria label for accessibility. */
+    ariaLabel: string;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}

package/dist/types/components/pd-radio.d.ts

@@ -0,0 +1,54 @@
+import { LitElement } from 'lit';
+import '@material/web/radio/radio.js';
+/**
+ * @customElement pd-radio
+ * @summary A thin wrapper around the Material Web Radio component.
+ *
+ * @cssprop --pd-radio-selected-icon-color - The color of the selected radio icon.
+ * @cssprop --pd-radio-unselected-icon-color - The color of the unselected radio icon.
+ * @cssprop --pd-radio-icon-size - The size of the radio icon.
+ */
+export declare class PdRadio extends LitElement {
+    private readonly radio;
+    /** Whether the radio is checked. */
+    checked: boolean;
+    /** Whether the radio is disabled. */
+    disabled: boolean;
+    /** The name attribute for form grouping. */
+    name: string;
+    /** The value attribute for form submission. */
+    value: string;
+    /** The aria label for accessibility. */
+    ariaLabel: string;
+    /** The aria-describedby attribute for accessibility. */
+    ariaDescribedby: string;
+    /** Whether the radio is required in a form. */
+    required: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    private handleChange;
+    private handleInput;
+}
+/**
+ * @customElement pd-radio-group
+ * @summary A container for grouping pd-radio elements.
+ */
+export declare class PdRadioGroup extends LitElement {
+    /** The name for all radio buttons in this group. */
+    name: string;
+    /** The currently selected value. */
+    value: string;
+    /** Whether the radio group is disabled. */
+    disabled: boolean;
+    /** Whether the radio group is required. */
+    required: boolean;
+    /** The aria-label for the radio group. */
+    ariaLabel: string;
+    /** The aria-labelledby for the radio group. */
+    ariaLabelledby: string;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, any>): void;
+    private updateRadioButtons;
+    private handleChange;
+    static styles: import("lit").CSSResult;
+}

package/dist/types/components/pd-segmented-button.d.ts

@@ -0,0 +1,53 @@
+import { LitElement } from 'lit';
+import '@material/web/icon/icon.js';
+/**
+ * @customElement pd-segmented-button
+ * @summary A segmented button component that allows users to select from multiple options.
+ *
+ * @slot - The default slot for pd-segment-item elements.
+ *
+ * @fires selectionchange - Fired when the selection changes.
+ *
+ * @cssprop --md-segmented-button-container-height - Override the default container height.
+ * @cssprop --md-segmented-button-shape - Override the default border radius.
+ */
+export declare class PdSegmentedButton extends LitElement {
+    /** Whether multiple segments can be selected simultaneously. */
+    multiSelect: boolean;
+    /** The size of the segmented button. */
+    size: 'small' | 'medium' | 'large';
+    /** Whether the segmented button is disabled. */
+    disabled: boolean;
+    /** Array of selected segment values. */
+    selectedValues: string[];
+    private _segments;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private _updateSegments;
+    private _handleSegmentClick;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+/**
+ * @customElement pd-segment-item
+ * @summary An individual segment item for use within pd-segmented-button.
+ *
+ * @slot - The default slot for the segment's content.
+ * @slot icon - The slot for an icon.
+ */
+export declare class PdSegmentItem extends LitElement {
+    /** The value associated with this segment. */
+    value: string;
+    /** Whether this segment is selected. */
+    selected: boolean;
+    /** Whether this segment is disabled. */
+    disabled: boolean;
+    /** The icon to display in the segment. */
+    icon: string;
+    /** Whether to show only the icon (no text). */
+    iconOnly: boolean;
+    private _handleClick;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}

package/dist/types/components/pd-segmented-stepper.d.ts

@@ -0,0 +1,65 @@
+import { LitElement } from 'lit';
+import '@material/web/icon/icon.js';
+/**
+ * @customElement pd-segmented-stepper
+ * @summary A segmented button variant that functions as a stepper with completion tracking.
+ *
+ * @slot - The default slot for pd-stepper-item elements.
+ *
+ * @fires stepchange - Fired when the active step changes.
+ * @fires stepcomplete - Fired when a step is marked as completed.
+ */
+export declare class PdSegmentedStepper extends LitElement {
+    /** The currently active step index (0-based). */
+    activeStep: number;
+    /** Array of completed step indices. */
+    completedSteps: number[];
+    /** The size of the stepper. */
+    size: 'small' | 'medium' | 'large';
+    /** Whether the stepper is disabled. */
+    disabled: boolean;
+    /** Whether users can click on completed steps to go back. */
+    allowStepNavigation: boolean;
+    private _steps;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, any>): void;
+    private _updateSteps;
+    private _handleStepClick;
+    /** Navigate to a specific step. */
+    goToStep(stepIndex: number): void;
+    /** Move to the next step. */
+    nextStep(): void;
+    /** Move to the previous step. */
+    previousStep(): void;
+    /** Mark the current step as completed and move to the next step. */
+    completeCurrentStep(): void;
+    /** Mark a specific step as completed. */
+    completeStep(stepIndex: number): void;
+    /** Reset all steps to pending state. */
+    reset(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+/**
+ * @customElement pd-stepper-item
+ * @summary An individual step item for use within pd-segmented-stepper.
+ *
+ * @slot - The default slot for the step's content.
+ */
+export declare class PdStepperItem extends LitElement {
+    /** The step number (1-based, auto-assigned by parent). */
+    stepNumber: number;
+    /** The state of this step. */
+    state: 'pending' | 'active' | 'completed' | 'disabled';
+    /** Whether this step is disabled. */
+    disabled: boolean;
+    /** Whether this step can be clicked. */
+    clickable: boolean;
+    /** Optional icon to display instead of step number. */
+    icon: string;
+    private _handleClick;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}

package/dist/types/components/pd-select.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+import '@material/web/select/filled-select.js';
+import '@material/web/select/outlined-select.js';
+import '@material/web/select/select-option.js';
+import '@material/web/icon/icon.js';
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * @summary A thin wrapper around the Material Web Select component.
+ * @description This component uses a data-driven approach via the `options`
+ * property to provide a clean and robust API.
+ *
+ * @event change - Fired when the selected value changes.
+ */
+export declare class PdSelect extends LitElement {
+    private readonly select;
+    private readonly trailingIcon;
+    /** The variant of the select field. */
+    variant: 'filled' | 'outlined';
+    /** The label for the select field. */
+    label: string;
+    /** The selected value. */
+    value: string;
+    /** Whether the select is disabled. */
+    disabled: boolean;
+    /** Whether the select is required. */
+    required: boolean;
+    /** The error message to display when `error` is true. */
+    errorText: string;
+    /** Whether the select has an error state. */
+    error: boolean;
+    /** The supporting text to display below the select. */
+    supportingText: string;
+    /** An array of options to be rendered. */
+    options: SelectOption[];
+    /** The leading icon name. */
+    leadingIcon: string;
+    private handleChange;
+    private handleOpen;
+    private handleClose;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}

package/dist/types/components/pd-slider.d.ts

@@ -0,0 +1,43 @@
+import { LitElement } from 'lit';
+import '@material/web/slider/slider.js';
+/**
+ * @customElement pd-slider
+ * @summary A thin wrapper around the Material Web Slider component.
+ *
+ * @cssprop --pd-slider-handle-color - The color of the slider handle.
+ * @cssprop --pd-slider-track-color - The color of the active slider track.
+ * @cssprop --pd-slider-track-inactive-color - The color of the inactive slider track.
+ */
+export declare class PdSlider extends LitElement {
+    private readonly slider;
+    /** Whether the slider is disabled. */
+    disabled: boolean;
+    /** The minimum value of the slider. */
+    min: number;
+    /** The maximum value of the slider. */
+    max: number;
+    /** The current value of the slider. */
+    value: number;
+    /** The step increment of the slider. */
+    step: number;
+    /** Whether the slider should show tick marks. */
+    ticks: boolean;
+    /** Whether the slider should show labels. */
+    labeled: boolean;
+    /** Whether the slider should show value indicators on focus/hover. */
+    valueIndicator: boolean;
+    /** The start value for a range slider (when provided, creates a range slider). */
+    valueStart?: number;
+    /** The end value for a range slider. */
+    valueEnd?: number;
+    /** The aria label for the slider. */
+    ariaLabel: string;
+    /** The aria label for the start handle in range mode. */
+    ariaLabelStart: string;
+    /** The aria label for the end handle in range mode. */
+    ariaLabelEnd: string;
+    render(): import("lit-html").TemplateResult<1>;
+    private handleInput;
+    private handleChange;
+    static styles: import("lit").CSSResult;
+}

package/dist/types/components/pd-stepper.d.ts

@@ -0,0 +1,47 @@
+import { LitElement } from 'lit';
+export interface StepData {
+    label: string;
+    optional?: boolean;
+    error?: boolean;
+    content?: any;
+    completed?: boolean;
+}
+/**
+ * @customElement pd-stepper
+ * @summary A Material Design stepper component that displays progress through a sequence of steps.
+ *
+ * @cssprop --pd-stepper-active-color - The color of the active step indicator
+ * @cssprop --pd-stepper-completed-color - The color of completed step indicators
+ * @cssprop --pd-stepper-inactive-color - The color of inactive step indicators
+ * @cssprop --pd-stepper-error-color - The color of error step indicators
+ * @cssprop --pd-stepper-connector-color - The color of step connectors
+ */
+export declare class PdStepper extends LitElement {
+    /** The steps data array */
+    steps: StepData[];
+    /** The current active step index (0-based) */
+    currentStep: number;
+    /** The orientation of the stepper */
+    orientation: 'horizontal' | 'vertical';
+    /** Whether the stepper is linear (steps must be completed in order) */
+    linear: boolean;
+    /** Whether to show step content */
+    showContent: boolean;
+    /** Alternative labels layout for horizontal stepper */
+    alternativeLabel: boolean;
+    private _completedSteps;
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderStep;
+    private _renderContent;
+    private _handleStepClick;
+    /** Mark a step as completed */
+    completeStep(stepIndex: number): void;
+    /** Mark a step as incomplete */
+    resetStep(stepIndex: number): void;
+    /** Go to next step */
+    next(): void;
+    /** Go to previous step */
+    back(): void;
+    private _dispatchStepChange;
+    static styles: import("lit").CSSResult;
+}

package/dist/types/components/pd-switch.d.ts

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+import '@material/web/switch/switch.js';
+import '@material/web/icon/icon.js';
+/**
+ * @customElement pd-switch
+ * @summary A thin wrapper around the Material Web Switch component.
+ *
+ * @cssprop --pd-switch-selected-track-color - The color of the track when selected.
+ * @cssprop --pd-switch-selected-handle-color - The color of the handle when selected.
+ * @cssprop --pd-switch-unselected-track-color - The color of the track when unselected.
+ * @cssprop --pd-switch-unselected-handle-color - The color of the handle when unselected.
+ */
+export declare class PdSwitch extends LitElement {
+    private readonly switch;
+    /** Whether the switch is selected (on). */
+    selected: boolean;
+    /** Whether the switch is disabled. */
+    disabled: boolean;
+    /** The icon to display when the switch is selected. */
+    selectedIcon: string;
+    /** The icon to display when the switch is unselected. */
+    unselectedIcon: string;
+    /** Whether to show only the selected icon (hides unselected icon). */
+    showOnlySelectedIcon: boolean;
+    /** The name attribute for form submission. */
+    name: string;
+    /** The value attribute for form submission. */
+    value: string;
+    /** The aria label for accessibility. */
+    ariaLabel: string;
+    /** Whether the switch is required in a form. */
+    required: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    private handleChange;
+    private handleInput;
+    static styles: import("lit").CSSResult;
+}

package/dist/types/components/pd-tabs.d.ts

@@ -0,0 +1,54 @@
+import { LitElement } from 'lit';
+import '@material/web/tabs/tabs.js';
+import '@material/web/tabs/primary-tab.js';
+import '@material/web/tabs/secondary-tab.js';
+import '@material/web/icon/icon.js';
+export interface TabData {
+    label: string;
+    icon?: string;
+    secondary?: boolean;
+    inlineIcon?: boolean;
+    ariaLabel?: string;
+}
+/**
+ * @customElement pd-tabs
+ * @summary A thin wrapper around the Material Web Tabs component.
+ *
+ * @cssprop --pd-tabs-divider-color - The color of the divider line.
+ * @cssprop --pd-tabs-active-indicator-color - The color of the active tab indicator.
+ */
+export declare class PdTabs extends LitElement {
+    /** The index of the currently active tab. */
+    activeTabIndex: number;
+    /** Whether to automatically activate tabs on focus (vs requiring click/enter). */
+    autoActivate: boolean;
+    /** Array of tab data objects */
+    tabs: TabData[];
+    private slottedTabs;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    private collectTabsFromSlot;
+    private handleSlotChange;
+    private forceActiveTabUpdate;
+    private renderTab;
+    updated(changedProperties: Map<string, any>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private handleChange;
+}
+/**
+ * @customElement pd-tab
+ * @summary A placeholder element that provides tab data to pd-tabs.
+ * This element is not rendered directly but is used to collect tab information.
+ */
+export declare class PdTab extends LitElement {
+    /** Whether this is a secondary tab variant. */
+    secondary: boolean;
+    /** Whether the tab is inlined with the text. */
+    inlineIcon: boolean;
+    /** The icon to display in the tab. */
+    icon: string;
+    /** The aria label for accessibility. */
+    ariaLabel: string;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}

package/dist/types/components/pd-text-field.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+import '@material/web/textfield/filled-text-field.js';
+import '@material/web/textfield/outlined-text-field.js';
+import '@material/web/icon/icon.js';
+export declare class PdTextField extends LitElement {
+    variant: 'filled' | 'outlined';
+    label: string;
+    placeholder: string;
+    value: string;
+    supportingText: string;
+    errorText: string;
+    prefixText: string;
+    suffixText: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    error: boolean;
+    type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'textarea';
+    rows: number;
+    cols: number;
+    leadingIcon: string;
+    trailingIcon: string;
+    maxlength?: number;
+    minlength?: number;
+    private getTextFieldTemplate;
+    render(): import("lit-html").TemplateResult;
+    private _handleInput;
+    private _handleChange;
+    static styles: import("lit").CSSResult;
+}

package/dist/types/fonts.d.ts

@@ -0,0 +1 @@
+import '@prioticket/design-tokens-material-web/fonts.css';

package/dist/types/index.d.ts

@@ -0,0 +1,22 @@
+export * from './components/pd-button';
+export * from './components/pd-text-field';
+export * from './components/pd-card';
+export * from './components/pd-icon';
+export * from './components/pd-dialog';
+export * from './components/pd-expandable-card';
+export * from './components/pd-checkbox';
+export * from './components/pd-chip';
+export * from './components/pd-fab';
+export * from './components/pd-icon-button';
+export * from './components/pd-list';
+export * from './components/pd-menu';
+export * from './components/pd-menu-item';
+export * from './components/pd-progress';
+export * from './components/pd-radio';
+export * from './components/pd-select';
+export * from './components/pd-slider';
+export * from './components/pd-switch';
+export * from './components/pd-tabs';
+export * from './components/pd-segmented-button';
+export * from './components/pd-segmented-stepper';
+export * from './components/pd-stepper';

package/dist/types/theme-with-fonts.d.ts

@@ -0,0 +1,2 @@
+import '@prioticket/design-tokens-material-web/theme.css';
+import '@prioticket/design-tokens-material-web/fonts.css';

package/dist/types/theme.d.ts

@@ -0,0 +1 @@
+import '@prioticket/design-tokens-material-web/theme.css';