@public-ui/components 4.1.2-rc.5 → 4.1.2-rc.7

package/dist/types/core/component-names.d.ts

@@ -35,6 +35,7 @@ export declare let KolKolibriTag: "kol-kolibri";
 export declare let KolLinkButtonTag: "kol-link-button";
 export declare let KolLinkTag: "kol-link";
 export declare let KolLinkWcTag: "kol-link-wc";
+export declare let KolMeterTag: "kol-meter";
 export declare let KolModalTag: "kol-modal";
 export declare let KolNavTag: "kol-nav";
 export declare let KolPaginationTag: "kol-pagination";

package/dist/types/internal/functional-components/meter/api.d.ts

@@ -0,0 +1,15 @@
+import type { HighProp, LabelProp, LowProp, MaxProp, MinProp, NumberValueProp, OptimumProp, OrientationProp, UnitProp } from '../../props';
+import type { ComponentApi } from '../generic-types';
+export declare const meterPropsConfig: {
+    readonly optional: readonly [import("../../props").PropDefinition<number, MinProp>, import("../../props").PropDefinition<import("../../props").InternalPropValue<OrientationProp>, OrientationProp>, import("../../props").PropDefinition<string, UnitProp>];
+    readonly required: readonly [import("../../props").PropDefinition<string, LabelProp>, import("../../props").PropDefinition<number, MaxProp>, import("../../props").PropDefinition<number, NumberValueProp>];
+};
+export interface MeterApi extends ComponentApi {
+    Props: {
+        Optional: HighProp & LowProp & MinProp & OptimumProp & OrientationProp & UnitProp;
+        Required: LabelProp & MaxProp & NumberValueProp;
+    };
+    States: {
+        liveValue: number;
+    };
+}

package/dist/types/internal/functional-components/meter/component.d.ts

@@ -0,0 +1,10 @@
+import type { FunctionalComponent as FC } from '../../../stencil-public-runtime';
+import type { FunctionalComponentProps } from '../generic-types';
+import type { MeterApi } from './api';
+type MeterFCProps = Omit<FunctionalComponentProps<MeterApi>, 'high' | 'low' | 'optimum'> & {
+    high: number | undefined;
+    low: number | undefined;
+    optimum: number | undefined;
+};
+export declare const MeterFC: FC<MeterFCProps>;
+export {};

package/dist/types/internal/functional-components/meter/controller.d.ts

@@ -0,0 +1,27 @@
+import { BaseController } from '../base-controller';
+import type { ControllerInterface, GetStateFn, ResolvedInputProps, SetStateFn } from '../generic-types';
+import type { MeterApi } from './api';
+type MeterData = {
+    high: number | undefined;
+    low: number | undefined;
+    optimum: number | undefined;
+};
+export declare class MeterController extends BaseController<MeterApi> implements ControllerInterface<MeterApi> {
+    private interval?;
+    private meterData;
+    constructor(setState: SetStateFn<MeterApi>, getState: GetStateFn<MeterApi>);
+    componentWillLoad(props: ResolvedInputProps<MeterApi>): void;
+    destroy(): void;
+    getMeterData(): MeterData;
+    watchHigh(value?: number): void;
+    watchLabel(value?: string): void;
+    watchLow(value?: number): void;
+    watchMax(value?: number): void;
+    watchMin(value?: number): void;
+    watchOptimum(value?: number): void;
+    watchOrientation(value?: string): void;
+    watchUnit(value?: string): void;
+    watchValue(value?: number): void;
+    private startLiveValueInterval;
+}
+export {};

package/dist/types/internal/props/high.d.ts

@@ -0,0 +1,3 @@
+import type { SimpleProp } from './helpers/factory';
+export type HighProp = SimpleProp<'high', number>;
+export declare const highProp: import("./helpers/factory").PropDefinition<number, HighProp>;

package/dist/types/internal/props/index.d.ts

@@ -1 +1 @@
-export*from"./align";export*from"./allow-markdown";export*from"./alt";export*from"./badge-text";export*from"./color";export*from"./helpers/factory";export*from"./hide-label";export*from"./href";export*from"./icons";export*from"./label";export*from"./label-with-expert-slot";export*from"./level";export*from"./loading";export*from"./max";export*from"./name";export*from"./quote";export*from"./secondary-headline";export*from"./show";export*from"./sizes";export*from"./span-icons";export*from"./src";export*from"./srcset";export*from"./unit";export*from"./value-number";export*from"./value-number-clamped";export*from"./variant-progress";export*from"./variant-quote";
+export*from"./align";export*from"./allow-markdown";export*from"./alt";export*from"./badge-text";export*from"./color";export*from"./helpers/factory";export*from"./hide-label";export*from"./high";export*from"./href";export*from"./icons";export*from"./label";export*from"./label-with-expert-slot";export*from"./level";export*from"./loading";export*from"./low";export*from"./max";export*from"./min";export*from"./name";export*from"./optimum";export*from"./orientation";export*from"./quote";export*from"./secondary-headline";export*from"./show";export*from"./sizes";export*from"./span-icons";export*from"./src";export*from"./srcset";export*from"./unit";export*from"./value-number";export*from"./value-number-clamped";export*from"./variant-progress";export*from"./variant-quote";

package/dist/types/internal/props/low.d.ts

@@ -0,0 +1,3 @@
+import type { SimpleProp } from './helpers/factory';
+export type LowProp = SimpleProp<'low', number>;
+export declare const lowProp: import("./helpers/factory").PropDefinition<number, LowProp>;

package/dist/types/internal/props/min.d.ts

@@ -0,0 +1,3 @@
+import type { SimpleProp } from './helpers/factory';
+export type MinProp = SimpleProp<'min', number>;
+export declare const minProp: import("./helpers/factory").PropDefinition<number, MinProp>;

package/dist/types/internal/props/optimum.d.ts

@@ -0,0 +1,3 @@
+import type { SimpleProp } from './helpers/factory';
+export type OptimumProp = SimpleProp<'optimum', number>;
+export declare const optimumProp: import("./helpers/factory").PropDefinition<number, OptimumProp>;

package/dist/types/internal/props/orientation.d.ts

@@ -0,0 +1,5 @@
+import type { SimpleProp } from './helpers/factory';
+export declare const orientationOptions: readonly ["horizontal", "vertical"];
+export type OrientationPropType = (typeof orientationOptions)[number];
+export type OrientationProp = SimpleProp<'orientation', OrientationPropType>;
+export declare const orientationProp: import("./helpers/factory").PropDefinition<import("./helpers/factory").InternalPropValue<OrientationProp>, OrientationProp>;

package/dist/types/locales/de.d.ts

@@ -67,6 +67,11 @@ declare const _default: {
     'character-counter-current': string;
     'character-counter-current-of-max': string;
     'character-counter-current-of-max-aria': string;
+    'live-value-bounded': string;
+    'live-value': string;
     readonly: string;
+    'meter-state-optimum': string;
+    'meter-state-suboptimal': string;
+    'meter-state-critical': string;
 };
 export default _default;

package/dist/types/locales/en.d.ts

@@ -67,6 +67,11 @@ declare const _default: {
     'character-counter-current': string;
     'character-counter-current-of-max': string;
     'character-counter-current-of-max-aria': string;
+    'live-value-bounded': string;
+    'live-value': string;
     readonly: string;
+    'meter-state-optimum': string;
+    'meter-state-suboptimal': string;
+    'meter-state-critical': string;
 };
 export default _default;

package/dist/types/schema/bem-registry.d.ts

@@ -38,6 +38,41 @@ type KoliBriComponentsBemSchema = {
         };
         modifiers: null;
     };
+    'kol-meter': {
+        elements: {
+            bar: {
+                modifiers: null;
+            };
+            'bar-label': {
+                modifiers: null;
+            };
+            'bar-state': {
+                modifiers: Set<'optimum' | 'suboptimal' | 'critical'>;
+            };
+            'bar-track': {
+                modifiers: null;
+            };
+            'bar-fill': {
+                modifiers: Set<'optimum' | 'suboptimal' | 'critical'>;
+            };
+            'bar-background': {
+                modifiers: null;
+            };
+            'bar-border': {
+                modifiers: null;
+            };
+            'value-unit': {
+                modifiers: null;
+            };
+            value: {
+                modifiers: null;
+            };
+            unit: {
+                modifiers: null;
+            };
+        };
+        modifiers: Set<'vertical'>;
+    };
     'kol-quote': {
         elements: {
             blockquote: {

package/dist/types/schema/i18n-keys.d.ts

@@ -22,6 +22,8 @@ export declare enum KeyEnum {
     'page-selected' = 20,
     'page-per-site' = 21,
     'logo-description' = 22,
-    'open-link-in-tab' = 23,
-    'kolibri-logo' = 24
+    'live-value-bounded' = 23,
+    'live-value' = 24,
+    'open-link-in-tab' = 25,
+    'kolibri-logo' = 26
 }

package/dist/types/schema/index.d.ts

@@ -1,5 +1,5 @@
 import { Theme } from 'adopted-style-sheets';
-export declare const KoliBri: Theme<"kol", "info" | "success" | "warning" | "error" | "message" | "close" | "form-description" | "of" | "characters" | "new" | "no-entries" | "change-order" | "action-running" | "action-done" | "page-first" | "page-back" | "page-next" | "page-last" | "entries-per-site" | "page-current" | "page-selected" | "page-per-site" | "logo-description" | "open-link-in-tab" | "kolibri-logo", "symbol" | "abbr" | "button" | "details" | "dialog" | "form" | "link" | "nav" | "progress" | "select" | "table" | "textarea" | "image" | "icon" | "alert" | "card" | "accordion" | "avatar" | "badge" | "breadcrumb" | "button-link" | "combobox" | "drawer" | "heading" | "input-checkbox" | "input-color" | "input-date" | "input-email" | "input-file" | "input-number" | "input-password" | "input-radio" | "input-range" | "input-text" | "kolibri" | "link-button" | "logo" | "modal" | "pagination" | "popover-button" | "quote" | "single-select" | "skip-nav" | "spin" | "split-button" | "table-stateful" | "table-stateless" | "tabs" | "toast-container" | "toolbar" | "tooltip" | "tree" | "tree-item">;
+export declare const KoliBri: Theme<"kol", "info" | "success" | "warning" | "error" | "message" | "close" | "form-description" | "of" | "characters" | "new" | "no-entries" | "change-order" | "action-running" | "action-done" | "page-first" | "page-back" | "page-next" | "page-last" | "entries-per-site" | "page-current" | "page-selected" | "page-per-site" | "logo-description" | "live-value-bounded" | "live-value" | "open-link-in-tab" | "kolibri-logo", "symbol" | "abbr" | "button" | "details" | "dialog" | "form" | "link" | "meter" | "nav" | "progress" | "select" | "table" | "textarea" | "image" | "icon" | "alert" | "card" | "accordion" | "avatar" | "badge" | "breadcrumb" | "button-link" | "combobox" | "drawer" | "heading" | "input-checkbox" | "input-color" | "input-date" | "input-email" | "input-file" | "input-number" | "input-password" | "input-radio" | "input-range" | "input-text" | "kolibri" | "link-button" | "logo" | "modal" | "pagination" | "popover-button" | "quote" | "single-select" | "skip-nav" | "spin" | "split-button" | "table-stateful" | "table-stateless" | "tabs" | "toast-container" | "toolbar" | "tooltip" | "tree" | "tree-item">;
 export * from './components';
 export * from './interfaces';
 export * from './props';

package/dist/types/schema/tag-names.d.ts

@@ -30,26 +30,27 @@ export declare enum TagEnum {
     'link' = 28,
     'link-button' = 29,
     'logo' = 30,
-    'modal' = 31,
-    'nav' = 32,
-    'pagination' = 33,
-    'popover-button' = 34,
-    'progress' = 35,
-    'quote' = 36,
-    'select' = 37,
-    'single-select' = 38,
-    'skip-nav' = 39,
-    'spin' = 40,
-    'split-button' = 41,
-    'symbol' = 42,
-    'table' = 43,
-    'table-stateful' = 44,
-    'table-stateless' = 45,
-    'tabs' = 46,
-    'textarea' = 47,
-    'toast-container' = 48,
-    'toolbar' = 49,
-    'tooltip' = 50,
-    'tree' = 51,
-    'tree-item' = 52
+    'meter' = 31,
+    'modal' = 32,
+    'nav' = 33,
+    'pagination' = 34,
+    'popover-button' = 35,
+    'progress' = 36,
+    'quote' = 37,
+    'select' = 38,
+    'single-select' = 39,
+    'skip-nav' = 40,
+    'spin' = 41,
+    'split-button' = 42,
+    'symbol' = 43,
+    'table' = 44,
+    'table-stateful' = 45,
+    'table-stateless' = 46,
+    'tabs' = 47,
+    'textarea' = 48,
+    'toast-container' = 49,
+    'toolbar' = 50,
+    'tooltip' = 51,
+    'tree' = 52,
+    'tree-item' = 53
 }

package/dist/types/utils/element-click.d.ts

@@ -0,0 +1,5 @@
+export declare function delegateClick(host: HTMLElement, callback: () => Promise<void>): Promise<void>;
+export declare function setClick(element: HTMLElement): Promise<void>;
+export interface ClickableElement {
+    click(): Promise<void>;
+}

package/dist/types/utils/element-themed.d.ts

@@ -0,0 +1,3 @@
+declare const MAX_TIMEOUT_DURATION = 5000;
+declare function waitForThemed(host: HTMLElement): Promise<void>;
+export { MAX_TIMEOUT_DURATION, waitForThemed };

package/doc/accordion.md

@@ -22,6 +22,16 @@ Accordions are used whenever content associated with a thematic heading needs to
 
 ## Methods
 
+### `click() => Promise<void>`
+
+Triggers a click on the trigger button of the first section.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `focus() => Promise<void>`
 
 Sets focus on the internal element.

package/doc/button-link.md

@@ -41,6 +41,16 @@ Since a link, unlike a button, is not offered in multiple variants (`primary`, `
 
 ## Methods
 
+### `click() => Promise<void>`
+
+Clicks the primary interactive element inside this component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `focus() => Promise<void>`
 
 Sets focus on the internal element.

package/doc/button.md

@@ -34,6 +34,16 @@ The **Button** component is used to present users with action options and arrang
 
 ## Methods
 
+### `click() => Promise<void>`
+
+Clicks the primary interactive element inside this component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `focus() => Promise<void>`
 
 Sets focus on the internal element.

package/doc/combobox.md

@@ -29,6 +29,16 @@
 
 ## Methods
 
+### `click() => Promise<void>`
+
+Clicks the primary interactive element inside this component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `focus() => Promise<void>`
 
 Sets focus on the internal element.

package/doc/details.md

@@ -26,6 +26,16 @@ The component can also be closed again to hide the content.
 
 ## Methods
 
+### `click() => Promise<void>`
+
+Triggers a click on the summary/toggle button.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `focus() => Promise<void>`
 
 Sets focus on the internal element.

package/doc/input-checkbox.md

@@ -34,6 +34,16 @@ The **Checkbox** input type generates a rectangular box that can be activated an
 
 ## Methods
 
+### `click() => Promise<void>`
+
+Clicks the primary interactive element inside this component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `focus() => Promise<void>`
 
 Sets focus on the internal element.

package/doc/input-color.md

@@ -32,6 +32,16 @@ The **Color** input type creates a selection field for defining any color. The c
 
 ## Methods
 
+### `click() => Promise<void>`
+
+Clicks the primary interactive element inside this component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `focus() => Promise<void>`
 
 Sets focus on the internal element.

package/doc/input-date.md

@@ -38,6 +38,16 @@ The **Date** input type creates an input field for date values. These can be spe
 
 ## Methods
 
+### `click() => Promise<void>`
+
+Clicks the primary interactive element inside this component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `focus() => Promise<void>`
 
 Sets focus on the internal element.

package/doc/input-email.md

@@ -40,6 +40,16 @@ The **Email** input type creates an input field for email addresses. It supports
 
 ## Methods
 
+### `click() => Promise<void>`
+
+Clicks the primary interactive element inside this component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `focus() => Promise<void>`
 
 Sets focus on the internal element.

package/doc/input-file.md

@@ -32,6 +32,16 @@ The **File** input type creates an input field for file uploads. One or multiple
 
 ## Methods
 
+### `click() => Promise<void>`
+
+Clicks the primary interactive element inside this component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `focus() => Promise<void>`
 
 Sets focus on the internal element.

package/doc/input-number.md

@@ -38,6 +38,16 @@ The **Number** input type creates an input field for numeric values. Use the `_m
 
 ## Methods
 
+### `click() => Promise<void>`
+
+Clicks the primary interactive element inside this component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `focus() => Promise<void>`
 
 Sets focus on the internal element.

package/doc/input-password.md

@@ -39,6 +39,16 @@ The **Password** input type creates an input field for passwords. The input is m
 
 ## Methods
 
+### `click() => Promise<void>`
+
+Clicks the primary interactive element inside this component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `focus() => Promise<void>`
 
 Sets focus on the internal element.

package/doc/input-radio.md

@@ -29,6 +29,16 @@ The **InputRadio** input type consists of a collection of radio elements, provid
 
 ## Methods
 
+### `click() => Promise<void>`
+
+Clicks the primary interactive element inside this component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `focus() => Promise<void>`
 
 Sets focus on the internal element.

package/doc/input-range.md

@@ -34,6 +34,16 @@ The **Range** input type creates a slider control for selecting a numeric value
 
 ## Methods
 
+### `click() => Promise<void>`
+
+Clicks the primary interactive element inside this component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `focus() => Promise<void>`
 
 Sets focus on the internal element.

package/doc/input-text.md

@@ -41,6 +41,16 @@ The **Text** input type creates an input field for plain text, search terms, URL
 
 ## Methods
 
+### `click() => Promise<void>`
+
+Focuses the primary interactive element inside this component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `focus() => Promise<void>`
 
 Sets focus on the internal element.

package/doc/link-button.md

@@ -32,6 +32,16 @@ The **LinkButton** component is semantically a link but has the appearance of a
 
 ## Methods
 
+### `click() => Promise<void>`
+
+Clicks the primary interactive element inside this component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `focus() => Promise<void>`
 
 Sets focus on the internal element.

package/doc/meter.md

@@ -0,0 +1,23 @@
+# kol-meter
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property              | Attribute      | Description                                                                                                        | Type                         | Default        |
+| --------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------- |
+| `_high`               | `_high`        | Defines the upper boundary of the high range.                                                                      | `number \| undefined`        | `undefined`    |
+| `_label` _(required)_ | `_label`       | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                     | `undefined`    |
+| `_low`                | `_low`         | Defines the lower boundary of the low range.                                                                       | `number \| undefined`        | `undefined`    |
+| `_max` _(required)_   | `_max`         | Defines the maximum value of the element.                                                                          | `number`                     | `undefined`    |
+| `_min`                | `_min`         | Defines the minimum value of the element.                                                                          | `number \| undefined`        | `undefined`    |
+| `_optimum`            | `_optimum`     | Defines the optimal value of the element.                                                                          | `number \| undefined`        | `undefined`    |
+| `_orientation`        | `_orientation` | Defines whether the meter bar is displayed horizontally or vertically.                                             | `"horizontal" \| "vertical"` | `'horizontal'` |
+| `_unit`               | `_unit`        | Defines the unit of the step values (not shown).                                                                   | `string`                     | `'%'`          |
+| `_value` _(required)_ | `_value`       | Defines the value of the element.                                                                                  | `number`                     | `undefined`    |
+
+
+----------------------------------------------
+
+

package/doc/popover-button.md

@@ -32,6 +32,16 @@ The popover uses the native HTML Popover API for lightweight, non-modal overlays
 
 ## Methods
 
+### `click() => Promise<void>`
+
+Clicks the primary interactive element inside this component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `focus() => Promise<void>`
 
 Sets focus on the internal element.

package/doc/split-button.md

@@ -34,6 +34,16 @@ a main action, while the secondary button opens a context menu (`Popover`) that
 
 ## Methods
 
+### `click() => Promise<void>`
+
+Clicks the primary interactive element inside this component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `closePopup() => Promise<void>`
 
 Closes the dropdown.

package/doc/tabs.md

@@ -22,6 +22,16 @@ The **Tabs** component is used to organize related content on the same page and
 
 ## Methods
 
+### `click() => Promise<void>`
+
+Triggers a click on the currently selected tab.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `focus() => Promise<void>`
 
 Sets focus on the current tab button.

package/doc/textarea.md

@@ -39,6 +39,16 @@ The **Textarea** component provides a larger input field for content. Unlike Inp
 
 ## Methods
 
+### `click() => Promise<void>`
+
+Clicks the primary interactive element inside this component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `focus() => Promise<void>`
 
 Sets focus on the internal element.

package/doc/toolbar.md

@@ -14,6 +14,16 @@
 
 ## Methods
 
+### `click() => Promise<void>`
+
+Triggers a click on the currently active toolbar item.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `focus() => Promise<void>`
 
 Sets focus on the currently active toolbar item.