ng-luna 0.0.1 → 0.1.2

package/README.md

@@ -1,10 +1,12 @@
 # ng-luna
 
-An Angular component library inspired by Windows XP aesthetics, built with XP.css and IBM Plex fonts.
+An Angular component library inspired by Windows XP aesthetics, built with IBM Plex fonts.
 
 ## Overview
 
-ng-luna provides a collection of Angular components styled to match the classic Windows XP design language. The library uses [XP.css](https://botoxparty.github.io/XP.css/) for styling and [IBM Plex](https://www.ibm.com/plex/) fonts for typography.
+ng-luna provides a collection of Angular components styled to match the classic Windows XP design language. The library uses custom styling inspired by Windows XP and [IBM Plex](https://www.ibm.com/plex/) fonts for typography.
+
+All components are **standalone** and implement Angular's reactive forms API where applicable, making them compatible with `FormControl`, `FormGroup`, and `ngModel`. Components are built on **Angular CDK** for enhanced accessibility, keyboard navigation, drag-and-drop, and cross-platform support.
 
 ## Installation
 
@@ -18,41 +20,86 @@ This library requires the following peer dependencies:
 
 - `@angular/common`: 19.2.15
 - `@angular/core`: 19.2.15
+- `@angular/forms`: 19.2.15
 
 ## Usage
 
-### Import the Module
+### Import Components
 
-Import the components you need in your Angular application:
+Import the components you need in your Angular application. All components are standalone:
 
 ```typescript
 import { ButtonComponent } from 'ng-luna';
+
+@Component({
+    imports: [ ButtonComponent ],
+    // ...
+})
 ```
 
-### Button Component
+### Using Bundled Fonts
 
-The `luna-button` component provides a Windows XP-styled button:
+The IBM Plex fonts are **automatically bundled and loaded** when you use any ng-luna component. No additional setup or configuration is required.
 
-```html
-<luna-button (click)="handleClick()">Click Me</luna-button>
+**Fonts are automatically available:**
+- ✅ Font files are bundled with the library
+- ✅ Fonts load automatically when you use any component
+- ✅ No imports or configuration needed
+- ✅ Works out of the box
+
+**Using fonts in your own styles:**
+
+Since the fonts are already loaded, you can use them directly in your CSS/SCSS:
+
+```scss
+.my-custom-class {
+    font-family: 'IBM Plex Sans', sans-serif;
+}
+
+.code-snippet {
+    font-family: 'IBM Plex Mono', monospace;
+}
+
+.heading {
+    font-family: 'IBM Plex Serif', serif;
+}
 ```
 
+**Available font families:**
+- `'IBM Plex Sans', sans-serif` - Default sans-serif font used by components
+- `'IBM Plex Mono', monospace` - Monospace font
+- `'IBM Plex Serif', serif` - Serif font
+
+## Components
+
+All components extend the `LunaControl` base class, which provides the following common inputs available on every component:
+
+- `id?: string` - Element ID
+- `name?: string` - Name attribute
+- `disabled: boolean` - Whether the control is disabled (default: `false`)
+- `tabindex?: number` - Tab index for keyboard navigation
+- `autofocus: boolean` - Whether the control should be autofocused (default: `false`)
+
+These inputs are inherited from the base class and available on all components unless otherwise noted in the component-specific documentation below.
+
+### Button Component
+
+The `luna-button` component provides a Windows XP-styled button.
+
+**Selector:** `luna-button`
+
 #### Inputs
 
-- `autofocus: boolean` - Whether the button should be autofocused (default: `false`)
 - `command?: string` - Command to invoke when the button is clicked
 - `commandfor?: string` - Element ID that the command is for
-- `disabled: boolean` - Whether the button is disabled (default: `false`)
 - `form?: string` - Form element ID to associate with
 - `formaction?: string` - URL to submit the form to (for submit buttons)
 - `formenctype?: FormEnctype` - Form encoding type: `'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'`
 - `formmethod?: FormMethod` - HTTP method for form submission: `'get' | 'post'`
 - `formnovalidate: boolean` - Whether to bypass form validation (default: `false`)
 - `formtarget?: FormTarget` - Where to display form response: `'_self' | '_blank' | '_parent' | '_top'`
-- `name?: string` - Name attribute for the button
 - `popovertarget?: string` - ID of popover element to control
 - `popovertargetaction?: PopoverTargetAction` - Popover action: `'show' | 'hide' | 'toggle'`
-- `tabindex?: number` - Tab index for keyboard navigation
 - `type: ButtonType` - Button type: `'button' | 'submit' | 'reset'` (default: `'button'`)
 - `value?: string` - Value attribute for the button
 
@@ -71,6 +118,356 @@ The `luna-button` component provides a Windows XP-styled button:
 </luna-button>
 ```
 
+### Checkbox Component
+
+The `luna-checkbox` component provides a Windows XP-styled checkbox that implements `ControlValueAccessor` for reactive forms support.
+
+**Selector:** `luna-checkbox`
+
+#### Inputs
+
+- `label?: string` - Label text for the checkbox
+- `value?: string` - Value attribute for the checkbox
+
+#### Outputs
+
+- `change: EventEmitter<boolean>` - Emitted when the checkbox state changes
+
+#### Example
+
+```html
+<luna-checkbox 
+    [(ngModel)]="isChecked"
+    label="Accept terms and conditions"
+    (change)="onCheckboxChange($event)">
+</luna-checkbox>
+```
+
+### Fieldset Component
+
+The `luna-fieldset` component provides a Windows XP-styled fieldset for grouping form controls.
+
+**Selector:** `luna-fieldset`
+
+#### Inputs
+
+- `legend?: string` - Legend text for the fieldset
+
+#### Example
+
+```html
+<luna-fieldset legend="User Information">
+    <!-- Form controls here -->
+</luna-fieldset>
+```
+
+### Input Component
+
+The `luna-input` component provides a Windows XP-styled text input that implements `ControlValueAccessor` for reactive forms support.
+
+**Selector:** `luna-input`
+
+#### Inputs
+
+- `placeholder?: string` - Placeholder text
+- `type: InputType` - Input type: `'text' | 'password' | 'email'` (default: `'text'`)
+- `readonly: boolean` - Whether the input is readonly (default: `false`)
+
+#### Outputs
+
+- `change: EventEmitter<string>` - Emitted when the input value changes
+- `blur: EventEmitter<FocusEvent>` - Emitted when the input loses focus
+
+#### Example
+
+```html
+<luna-input 
+    [(ngModel)]="username"
+    type="text"
+    placeholder="Enter username"
+    (change)="onInputChange($event)">
+</luna-input>
+```
+
+### Progress Component
+
+The `luna-progress` component provides a Windows XP-styled progress bar.
+
+**Selector:** `luna-progress`
+
+#### Inputs
+
+- `value?: number` - Current progress value
+- `max: number` - Maximum value (default: `100`)
+
+#### Example
+
+```html
+<luna-progress 
+    [value]="progressValue"
+    [max]="100">
+</luna-progress>
+```
+
+### Radio Component
+
+The `luna-radio` component provides a Windows XP-styled radio button that implements `ControlValueAccessor` for reactive forms support.
+
+**Selector:** `luna-radio`
+
+#### Inputs
+
+- `label?: string` - Label text for the radio button
+- `value?: string` - Value attribute for the radio button
+
+**Note:** The `name` attribute is required for grouping radio buttons together.
+
+#### Outputs
+
+- `change: EventEmitter<string>` - Emitted when the radio button is selected
+
+#### Example
+
+```html
+<luna-radio 
+    name="option"
+    value="option1"
+    label="Option 1"
+    [(ngModel)]="selectedOption">
+</luna-radio>
+<luna-radio 
+    name="option"
+    value="option2"
+    label="Option 2"
+    [(ngModel)]="selectedOption">
+</luna-radio>
+```
+
+### Select Component
+
+The `luna-select` component provides a Windows XP-styled select dropdown that implements `ControlValueAccessor` for reactive forms support.
+
+**Selector:** `luna-select`
+
+#### Inputs
+
+No additional inputs beyond the common base inputs.
+
+#### Outputs
+
+- `change: EventEmitter<string>` - Emitted when the selection changes
+
+#### Example
+
+```html
+<luna-select 
+    [(ngModel)]="selectedValue"
+    (change)="onSelectChange($event)">
+    <option value="option1">Option 1</option>
+    <option value="option2">Option 2</option>
+</luna-select>
+```
+
+### Slider Component
+
+The `luna-slider` component provides a Windows XP-styled range slider that implements `ControlValueAccessor` for reactive forms support.
+
+**Selector:** `luna-slider`
+
+#### Inputs
+
+- `min: number` - Minimum value (default: `0`)
+- `max: number` - Maximum value (default: `100`)
+- `step: number` - Step value (default: `1`)
+- `vertical: boolean` - Whether the slider is vertical (default: `false`)
+- `boxIndicator: boolean` - Whether to show a box indicator (default: `false`)
+
+#### Outputs
+
+- `change: EventEmitter<number>` - Emitted when the slider value changes
+
+#### Example
+
+```html
+<luna-slider 
+    [(ngModel)]="sliderValue"
+    [min]="0"
+    [max]="100"
+    [step]="1"
+    (change)="onSliderChange($event)">
+</luna-slider>
+```
+
+### Tabs Component
+
+The `luna-tabs` component provides a Windows XP-styled tab interface with keyboard navigation support.
+
+**Selector:** `luna-tabs`
+
+#### Inputs
+
+- `tabs: Tab[]` - Array of tab objects with `id`, `label`, and optional `content`
+- `activeTabId?: string` - ID of the currently active tab
+
+#### Outputs
+
+- `tabChange: EventEmitter<string>` - Emitted when a tab is selected
+
+#### Keyboard Navigation
+
+- **Arrow Left/Right** - Navigate between tabs
+- **Tab** - Move focus to tab panel content
+
+#### Example
+
+```html
+<luna-tabs 
+    [tabs]="tabs"
+    [activeTabId]="activeTabId"
+    (tabChange)="onTabChange($event)">
+</luna-tabs>
+```
+
+```typescript
+tabs: Tab[] = [
+    { id: 'tab1', label: 'Tab 1', content: 'Content 1' },
+    { id: 'tab2', label: 'Tab 2', content: 'Content 2' }
+];
+```
+
+### Textarea Component
+
+The `luna-textarea` component provides a Windows XP-styled textarea that implements `ControlValueAccessor` for reactive forms support.
+
+**Selector:** `luna-textarea`
+
+#### Inputs
+
+- `placeholder?: string` - Placeholder text
+- `rows?: number` - Number of visible rows
+- `cols?: number` - Number of visible columns
+- `readonly: boolean` - Whether the textarea is readonly (default: `false`)
+
+#### Outputs
+
+- `change: EventEmitter<string>` - Emitted when the textarea value changes
+- `blur: EventEmitter<FocusEvent>` - Emitted when the textarea loses focus
+
+#### Example
+
+```html
+<luna-textarea 
+    [(ngModel)]="message"
+    [rows]="5"
+    [cols]="40"
+    placeholder="Enter your message"
+    (change)="onTextareaChange($event)">
+</luna-textarea>
+```
+
+### Window Component
+
+The `luna-window` component provides a Windows XP-styled draggable window with title bar and controls.
+
+**Selector:** `luna-window`
+
+#### Inputs
+
+- `title?: string` - Window title text
+- `showMinimize: boolean` - Whether to show the minimize button (default: `true`)
+- `showMaximize: boolean` - Whether to show the maximize button (default: `true`)
+- `showHelp: boolean` - Whether to show the help button (default: `false`)
+- `showClose: boolean` - Whether to show the close button (default: `true`)
+- `isMaximized: boolean` - Whether the window is currently maximized (default: `false`)
+- `boundaryElement?: string` - CSS selector for element that constrains window dragging
+- `scrollable: boolean` - Whether the window body should be scrollable (default: `false`)
+
+#### Outputs
+
+- `minimize: EventEmitter<void>` - Emitted when the minimize button is clicked
+- `maximize: EventEmitter<void>` - Emitted when the maximize button is clicked
+- `restore: EventEmitter<void>` - Emitted when the restore button is clicked
+- `help: EventEmitter<void>` - Emitted when the help button is clicked
+- `close: EventEmitter<void>` - Emitted when the close button is clicked
+
+#### Dragging
+
+The window can be dragged by its title bar. Dragging is automatically disabled when the window is maximized.
+
+#### Example
+
+```html
+<luna-window 
+    title="My Application"
+    [showHelp]="true"
+    boundaryElement=".container"
+    [scrollable]="true"
+    (minimize)="onMinimize()"
+    (maximize)="onMaximize()"
+    (close)="onClose()">
+    <div class="window-body">
+        Window content goes here
+    </div>
+</luna-window>
+```
+
+## Accessibility & CDK Features
+
+All components leverage **Angular CDK** for enhanced functionality:
+
+- **Focus Management** - All form components track focus states for better accessibility
+- **Keyboard Navigation** - Tabs support arrow key navigation with focus management
+- **Screen Reader Support** - Components announce state changes via `LiveAnnouncer`
+- **Drag & Drop** - Window component supports draggable functionality with boundary constraints
+- **Scrolling** - Window body supports scrollable content areas
+- **Platform Detection** - Components adapt behavior based on platform/browser
+- **RTL Support** - Input and button components support right-to-left layouts
+- **Type Coercion** - Number inputs use type-safe coercion utilities
+
+Screen reader announcements are non-intrusive and only audible to assistive technology users.
+
+## Reactive Forms Support
+
+Components that implement `ControlValueAccessor` (checkbox, input, radio, select, slider, textarea) can be used with Angular's reactive forms:
+
+```typescript
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+
+export class MyComponent
+{
+    form: FormGroup;
+
+    constructor(private fb: FormBuilder)
+    {
+        this.form = this.fb.group({
+            username: [''],
+            email: [''],
+            agreeToTerms: [false]
+        });
+    }
+}
+```
+
+```html
+<form [formGroup]="form">
+    <luna-input 
+        formControlName="username"
+        placeholder="Username">
+    </luna-input>
+    
+    <luna-input 
+        formControlName="email"
+        type="email"
+        placeholder="Email">
+    </luna-input>
+    
+    <luna-checkbox 
+        formControlName="agreeToTerms"
+        label="I agree to the terms">
+    </luna-checkbox>
+</form>
+```
+
 ## Development
 
 ### Building the Library
@@ -86,9 +483,22 @@ ng-luna/
 ├── src/
 │   ├── controls/          # Component library controls
 │   │   ├── button/        # Button component
+│   │   ├── checkbox/      # Checkbox component
+│   │   ├── fieldset/      # Fieldset component
+│   │   ├── input/         # Input component
+│   │   ├── progress/      # Progress component
+│   │   ├── radio/         # Radio component
+│   │   ├── select/        # Select component
+│   │   ├── slider/        # Slider component
+│   │   ├── tabs/          # Tabs component
+│   │   ├── textarea/      # Textarea component
+│   │   ├── window/        # Window component
 │   │   └── index.ts       # Controls barrel export
 │   ├── theme/             # Theme files (fonts, styles)
-│   │   └── _fonts.scss    # IBM Plex font imports
+│   │   ├── _fonts.scss    # IBM Plex font imports
+│   │   ├── _palette.scss  # Color palette
+│   │   ├── _graphics.scss # SVG graphics
+│   │   └── _global.scss   # Global styles
 │   └── public-api.ts      # Public API surface
 ├── ng-package.json        # ng-packagr configuration
 ├── package.json           # Package dependencies
@@ -97,8 +507,7 @@ ng-luna/
 
 ## Dependencies
 
-- **XP.css** (v0.2.6) - Windows XP styling framework
-- **@ibm/plex** (v6.4.1) - IBM Plex font families
+- **@ibm/plex** (v6.4.1) - IBM Plex font families (fonts are bundled with the library)
 - **@angular/cdk** (v19.2.17) - Angular Component Dev Kit
 
 ## Publishing
@@ -155,4 +564,3 @@ npm publish ./dist
 MIT License - see [LICENSE](LICENSE) file for details.
 
 Copyright (c) 2025 Adam R Moss
-

package/controls/button/button.component.d.ts

@@ -1,29 +1,36 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, ElementRef, OnDestroy, AfterViewInit } from '@angular/core';
+import { Dir } from '@angular/cdk/bidi';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { Platform } from '@angular/cdk/platform';
+import { LunaControl } from '../luna-control';
 import * as i0 from "@angular/core";
 export type ButtonType = 'button' | 'submit' | 'reset';
 export type FormEnctype = 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
 export type FormMethod = 'get' | 'post';
 export type FormTarget = '_self' | '_blank' | '_parent' | '_top';
 export type PopoverTargetAction = 'show' | 'hide' | 'toggle';
-export declare class ButtonComponent {
-    autofocus: boolean;
+export declare class ButtonComponent extends LunaControl implements AfterViewInit, OnDestroy {
+    private elementRef;
+    private focusMonitor;
+    platform: Platform;
+    dir: Dir;
     command?: string;
     commandfor?: string;
-    disabled: boolean;
     form?: string;
     formaction?: string;
     formenctype?: FormEnctype;
     formmethod?: FormMethod;
     formnovalidate: boolean;
     formtarget?: FormTarget;
-    name?: string;
     popovertarget?: string;
     popovertargetaction?: PopoverTargetAction;
-    tabindex?: number;
     type: ButtonType;
     value?: string;
     click: EventEmitter<MouseEvent>;
+    constructor(elementRef: ElementRef<HTMLElement>, focusMonitor: FocusMonitor, platform: Platform, dir: Dir);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     onClick(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "luna-button", never, { "autofocus": { "alias": "autofocus"; "required": false; }; "command": { "alias": "command"; "required": false; }; "commandfor": { "alias": "commandfor"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "form": { "alias": "form"; "required": false; }; "formaction": { "alias": "formaction"; "required": false; }; "formenctype": { "alias": "formenctype"; "required": false; }; "formmethod": { "alias": "formmethod"; "required": false; }; "formnovalidate": { "alias": "formnovalidate"; "required": false; }; "formtarget": { "alias": "formtarget"; "required": false; }; "name": { "alias": "name"; "required": false; }; "popovertarget": { "alias": "popovertarget"; "required": false; }; "popovertargetaction": { "alias": "popovertargetaction"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "click": "click"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "luna-button", never, { "command": { "alias": "command"; "required": false; }; "commandfor": { "alias": "commandfor"; "required": false; }; "form": { "alias": "form"; "required": false; }; "formaction": { "alias": "formaction"; "required": false; }; "formenctype": { "alias": "formenctype"; "required": false; }; "formmethod": { "alias": "formmethod"; "required": false; }; "formnovalidate": { "alias": "formnovalidate"; "required": false; }; "formtarget": { "alias": "formtarget"; "required": false; }; "popovertarget": { "alias": "popovertarget"; "required": false; }; "popovertargetaction": { "alias": "popovertargetaction"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "click": "click"; }, never, ["*"], true, never>;
 }

package/controls/checkbox/checkbox.component.d.ts

@@ -1,20 +1,28 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, ElementRef, OnDestroy, AfterViewInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { FocusMonitor, LiveAnnouncer } from '@angular/cdk/a11y';
+import { Platform } from '@angular/cdk/platform';
+import { LunaControl } from '../luna-control';
 import * as i0 from "@angular/core";
-export declare class CheckboxComponent implements ControlValueAccessor {
-    disabled: boolean;
+export declare class CheckboxComponent extends LunaControl implements ControlValueAccessor, AfterViewInit, OnDestroy {
+    private elementRef;
+    private focusMonitor;
+    private liveAnnouncer;
+    platform: Platform;
     label?: string;
-    name?: string;
     value?: string;
     change: EventEmitter<boolean>;
     checked: boolean;
     private onChange;
     private onTouched;
+    constructor(elementRef: ElementRef<HTMLElement>, focusMonitor: FocusMonitor, liveAnnouncer: LiveAnnouncer, platform: Platform);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     onCheckboxChange(event: Event): void;
     writeValue(value: boolean): void;
     registerOnChange(fn: (value: boolean) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "luna-checkbox", never, { "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "change": "change"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "luna-checkbox", never, { "label": { "alias": "label"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "change": "change"; }, never, ["*"], true, never>;
 }

package/controls/fieldset/fieldset.component.d.ts

@@ -1,5 +1,6 @@
+import { LunaControl } from '../luna-control';
 import * as i0 from "@angular/core";
-export declare class FieldsetComponent {
+export declare class FieldsetComponent extends LunaControl {
     legend?: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<FieldsetComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FieldsetComponent, "luna-fieldset", never, { "legend": { "alias": "legend"; "required": false; }; }, {}, never, ["*"], true, never>;

package/controls/input/input.component.d.ts

@@ -1,18 +1,31 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, ElementRef, OnDestroy, AfterViewInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { FocusMonitor, LiveAnnouncer } from '@angular/cdk/a11y';
+import { Platform } from '@angular/cdk/platform';
+import { Dir } from '@angular/cdk/bidi';
+import { Clipboard } from '@angular/cdk/clipboard';
+import { LunaControl } from '../luna-control';
 import * as i0 from "@angular/core";
 export type InputType = 'text' | 'password' | 'email';
-export declare class InputComponent implements ControlValueAccessor {
-    disabled: boolean;
-    name?: string;
+export declare class InputComponent extends LunaControl implements ControlValueAccessor, AfterViewInit, OnDestroy {
+    private elementRef;
+    private focusMonitor;
+    private liveAnnouncer;
+    platform: Platform;
+    dir: Dir;
+    private clipboard;
     placeholder?: string;
-    type: InputType;
     readonly: boolean;
+    type: InputType;
     change: EventEmitter<string>;
     blur: EventEmitter<FocusEvent>;
     value: string;
     private onChange;
     private onTouched;
+    inputElement?: ElementRef<HTMLInputElement>;
+    constructor(elementRef: ElementRef<HTMLElement>, focusMonitor: FocusMonitor, liveAnnouncer: LiveAnnouncer, platform: Platform, dir: Dir, clipboard: Clipboard);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     onInputChange(event: Event): void;
     onInputBlur(event: FocusEvent): void;
     writeValue(value: string): void;
@@ -20,5 +33,5 @@ export declare class InputComponent implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "luna-input", never, { "disabled": { "alias": "disabled"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "type": { "alias": "type"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "change": "change"; "blur": "blur"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "luna-input", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, { "change": "change"; "blur": "blur"; }, never, never, true, never>;
 }

package/controls/luna-control.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare abstract class LunaControl {
+    id?: string;
+    name?: string;
+    disabled: boolean;
+    tabindex?: number;
+    autofocus: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LunaControl, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<LunaControl, never, never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; }, {}, never, never, true, never>;
+}

package/controls/progress/progress.component.d.ts

@@ -1,7 +1,19 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { NumberInput } from '@angular/cdk/coercion';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { LunaControl } from '../luna-control';
 import * as i0 from "@angular/core";
-export declare class ProgressComponent {
-    value?: number;
-    max: number;
+export declare class ProgressComponent extends LunaControl implements OnChanges {
+    private liveAnnouncer;
+    set max(value: NumberInput);
+    get max(): number;
+    set value(value: NumberInput | undefined);
+    get value(): number | undefined;
+    private _max;
+    private _value?;
+    private _previousValue?;
+    constructor(liveAnnouncer: LiveAnnouncer);
+    ngOnChanges(changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ProgressComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressComponent, "luna-progress", never, { "value": { "alias": "value"; "required": false; }; "max": { "alias": "max"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressComponent, "luna-progress", never, { "max": { "alias": "max"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, true, never>;
 }