@public-ui/components 4.0.0-beta.0 → 4.0.0-ee1678914efc9a51fdc688bac71b570e768a8032.0

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

@@ -13,6 +13,8 @@ export declare let KolCardTag: "kol-card";
 export declare let KolCardWcTag: "kol-card-wc";
 export declare let KolComboboxTag: "kol-combobox";
 export declare let KolDetailsTag: "kol-details";
+export declare let KolDialogTag: "kol-dialog";
+export declare let KolDialogWcTag: "kol-dialog-wc";
 export declare let KolDrawerTag: "kol-drawer";
 export declare let KolFormTag: "kol-form";
 export declare let KolHeadingTag: "kol-heading";

package/dist/types/schema/components/dialog.d.ts

@@ -0,0 +1,19 @@
+import type { Generic } from 'adopted-style-sheets';
+import type { PropLabel } from '../props';
+import type { PropDialogVariant } from '../props/variant/dialog';
+import type { KoliBriModalEventCallbacks } from '../types';
+type RequiredProps = PropLabel;
+type OptionalProps = {
+    on: KoliBriModalEventCallbacks;
+    width: string;
+} & PropDialogVariant;
+type RequiredStates = {
+    width: string;
+} & PropLabel;
+type OptionalStates = {
+    on: KoliBriModalEventCallbacks;
+} & PropDialogVariant;
+export type DialogProps = Generic.Element.Members<RequiredProps, OptionalProps>;
+export type DialogStates = Generic.Element.Members<RequiredStates, OptionalStates>;
+export type DialogAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;
+export {};

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

@@ -1 +1 @@
-export*from"./abbr";export*from"./accordion";export*from"./alert";export*from"./avatar";export*from"./badge";export*from"./breadcrumb";export*from"./button";export*from"./button-link";export*from"./card";export*from"./combobox";export*from"./details";export*from"./drawer";export*from"./form";export*from"./heading";export*from"./icon";export*from"./image";export*from"./input-checkbox";export*from"./input-color";export*from"./input-date";export*from"./input-email";export*from"./input-file";export*from"./input-number";export*from"./input-password";export*from"./input-radio";export*from"./input-range";export*from"./input-text";export*from"./kolibri";export*from"./link";export*from"./link-button";export*from"./modal";export*from"./nav";export*from"./pagination";export*from"./popover";export*from"./popover-button";export*from"./progress";export*from"./quote";export*from"./select";export*from"./single-select";export*from"./skip-nav";export*from"./span";export*from"./spin";export*from"./split-button";export*from"./table";export*from"./tableStateless";export*from"./tabs";export*from"./textarea";export*from"./toaster";export*from"./toolbar";export*from"./tooltip";export*from"./tree";export*from"./tree-item";export*from"./version";
+export*from"./abbr";export*from"./accordion";export*from"./alert";export*from"./avatar";export*from"./badge";export*from"./breadcrumb";export*from"./button";export*from"./button-link";export*from"./card";export*from"./combobox";export*from"./details";export*from"./dialog";export*from"./drawer";export*from"./form";export*from"./heading";export*from"./icon";export*from"./image";export*from"./input-checkbox";export*from"./input-color";export*from"./input-date";export*from"./input-email";export*from"./input-file";export*from"./input-number";export*from"./input-password";export*from"./input-radio";export*from"./input-range";export*from"./input-text";export*from"./kolibri";export*from"./link";export*from"./link-button";export*from"./modal";export*from"./nav";export*from"./pagination";export*from"./popover";export*from"./popover-button";export*from"./progress";export*from"./quote";export*from"./select";export*from"./single-select";export*from"./skip-nav";export*from"./span";export*from"./spin";export*from"./split-button";export*from"./table";export*from"./tableStateless";export*from"./tabs";export*from"./textarea";export*from"./toaster";export*from"./toolbar";export*from"./tooltip";export*from"./tree";export*from"./tree-item";export*from"./version";

package/dist/types/schema/components/modal.d.ts

@@ -1,19 +1,4 @@
-import type { Generic } from 'adopted-style-sheets';
-import type { PropLabel } from '../props';
-import type { PropModalVariant } from '../props/variant/modal';
-import type { KoliBriModalEventCallbacks } from '../types';
-type RequiredProps = PropLabel;
-type OptionalProps = {
-    on: KoliBriModalEventCallbacks;
-    width: string;
-} & PropModalVariant;
-type RequiredStates = {
-    width: string;
-} & PropLabel;
-type OptionalStates = {
-    on: KoliBriModalEventCallbacks;
-} & PropModalVariant;
-export type ModalProps = Generic.Element.Members<RequiredProps, OptionalProps>;
-export type ModalStates = Generic.Element.Members<RequiredStates, OptionalStates>;
-export type ModalAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;
-export {};
+import type { DialogAPI, DialogProps, DialogStates } from './dialog';
+export type ModalProps = DialogProps;
+export type ModalStates = DialogStates;
+export type ModalAPI = DialogAPI;

package/dist/types/schema/components/table.d.ts

@@ -1,6 +1,5 @@
 import type { Generic } from 'adopted-style-sheets';
 import type { PropHasSettingsMenu, PropLabel, PropTableData, PropTableDataFoot, PropTableSelection, StatefulPropTableCallbacks } from '../props';
-import type { PropMinWidth } from '../props/min-width';
 import type { PropPaginationPosition } from '../props/pagination-position';
 import type { KoliBriSortDirection, KoliBriTableDataType, KoliBriTableHeaderCell, KoliBriTableSelection, Stringified } from '../types';
 import type { KoliBriPaginationProps } from './pagination';
@@ -28,7 +27,7 @@ type KoliBriTablePaginationStates = Generic.Element.Members<{
 }, KoliBriPaginationProps>;
 type RequiredProps = {
     headers: Stringified<KoliBriTableHeaders>;
-} & PropLabel & PropMinWidth & PropTableData;
+} & PropLabel & PropTableData;
 type OptionalProps = {
     allowMultiSort: boolean;
     pagination: boolean | Stringified<KoliBriTablePaginationProps>;
@@ -40,7 +39,7 @@ type RequiredStates = {
     headers: KoliBriTableHeaders;
     pagination: KoliBriTablePaginationStates;
     sortedData: KoliBriTableDataType[];
-} & PropLabel & PropMinWidth & PropPaginationPosition;
+} & PropLabel & PropPaginationPosition;
 type OptionalStates = {
     sortDirection: KoliBriSortDirection;
     selection: KoliBriTableSelection;

package/dist/types/schema/components/tableStateless.d.ts

@@ -1,15 +1,14 @@
 import type { Generic } from 'adopted-style-sheets';
 import type { PropLabel, PropTableCallbacks, PropTableData, PropTableDataFoot, PropTableSelection, TableHeaderCells } from '../props';
 import type { PropHasSettingsMenu } from '../props/has-settings-menu';
-import type { PropMinWidth } from '../props/min-width';
 import type { PropTableHeaderCells } from '../props/table-header-cells';
 import type { KoliBriTableDataType, KoliBriTableSelection } from '../types';
-type RequiredProps = PropLabel & PropMinWidth & PropTableData & PropTableHeaderCells;
+type RequiredProps = PropLabel & PropTableData & PropTableHeaderCells;
 type OptionalProps = PropTableCallbacks & PropTableDataFoot & PropTableSelection & PropHasSettingsMenu;
 type RequiredStates = {
     headerCells: TableHeaderCells;
     data: KoliBriTableDataType[];
-} & PropLabel & PropMinWidth;
+} & PropLabel;
 type OptionalStates = {
     dataFoot: KoliBriTableDataType[];
     selection: KoliBriTableSelection;

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" | "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" | "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 * from './components';
 export * from './interfaces';
 export * from './props';

package/dist/types/schema/interfaces/FocusableElement.d.ts

@@ -1,3 +1,3 @@
 export interface FocusableElement {
-    kolFocus(): Promise<void>;
+    focus(): Promise<void>;
 }

package/dist/types/schema/props/variant/dialog.d.ts

@@ -0,0 +1,8 @@
+import type { Generic } from 'adopted-style-sheets';
+declare const DialogVariantPropTypeOptions: readonly ["blank", "card"];
+export type DialogVariantPropType = (typeof DialogVariantPropTypeOptions)[number];
+export type PropDialogVariant = {
+    variant: DialogVariantPropType;
+};
+export declare const validateDialogVariant: (component: Generic.Element.Component, value?: DialogVariantPropType) => void;
+export {};

package/dist/types/schema/props/variant/modal.d.ts

@@ -1,8 +1,4 @@
-import type { Generic } from 'adopted-style-sheets';
-declare const ModalVariantPropTypeOptions: readonly ["blank", "card"];
-export type ModalVariantPropType = (typeof ModalVariantPropTypeOptions)[number];
-export type PropModalVariant = {
-    variant: ModalVariantPropType;
-};
-export declare const validateModalVariant: (component: Generic.Element.Component, value?: ModalVariantPropType) => void;
-export {};
+import type { DialogVariantPropType, PropDialogVariant } from './dialog';
+export { validateDialogVariant as validateModalVariant } from './dialog';
+export type ModalVariantPropType = DialogVariantPropType;
+export type PropModalVariant = PropDialogVariant;

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

@@ -10,45 +10,46 @@ export declare enum TagEnum {
     'card' = 8,
     'combobox' = 9,
     'details' = 10,
-    'drawer' = 11,
-    'form' = 12,
-    'heading' = 13,
-    'icon' = 14,
-    'image' = 15,
-    'input-checkbox' = 16,
-    'input-color' = 17,
-    'input-date' = 18,
-    'input-email' = 19,
-    'input-file' = 20,
-    'input-number' = 21,
-    'input-password' = 22,
-    'input-radio' = 23,
-    'input-range' = 24,
-    'input-text' = 25,
-    'kolibri' = 26,
-    'link' = 27,
-    'link-button' = 28,
-    'logo' = 29,
-    'modal' = 30,
-    'nav' = 31,
-    'pagination' = 32,
-    'popover-button' = 33,
-    'progress' = 34,
-    'quote' = 35,
-    'select' = 36,
-    'single-select' = 37,
-    'skip-nav' = 38,
-    'spin' = 39,
-    'split-button' = 40,
-    'symbol' = 41,
-    'table' = 42,
-    'table-stateful' = 43,
-    'table-stateless' = 44,
-    'tabs' = 45,
-    'textarea' = 46,
-    'toast-container' = 47,
-    'toolbar' = 48,
-    'tooltip' = 49,
-    'tree' = 50,
-    'tree-item' = 51
+    'dialog' = 11,
+    'drawer' = 12,
+    'form' = 13,
+    'heading' = 14,
+    'icon' = 15,
+    'image' = 16,
+    'input-checkbox' = 17,
+    'input-color' = 18,
+    'input-date' = 19,
+    'input-email' = 20,
+    'input-file' = 21,
+    'input-number' = 22,
+    'input-password' = 23,
+    'input-radio' = 24,
+    'input-range' = 25,
+    'input-text' = 26,
+    'kolibri' = 27,
+    '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
 }

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

@@ -0,0 +1,2 @@
+import type { KoliBriModalEventCallbacks } from './modal';
+export type KoliBriDialogEventCallbacks = KoliBriModalEventCallbacks;

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

@@ -1 +1 @@
-export*from"./aria";export*from"./button-link-text";export*from"./callbacks";export*from"./common";export*from"./icons";export*from"./input/iso8601";export*from"./input/numberString";export*from"./input/types";export*from"./modal";export*from"./table";export*from"./unknown";export*from"./w3c";
+export*from"./aria";export*from"./button-link-text";export*from"./callbacks";export*from"./common";export*from"./dialog";export*from"./icons";export*from"./input/iso8601";export*from"./input/numberString";export*from"./input/types";export*from"./modal";export*from"./table";export*from"./unknown";export*from"./w3c";

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

@@ -6,26 +6,26 @@ export type KoliBriTableSelectionKey = string | number;
 export type KoliBriTableSelectionKeys = KoliBriTableSelectionKey[];
 export type KoliBriTableCell = {
     colSpan?: number;
+    data?: KoliBriTableDataType;
     label: string;
     render?: KoliBriTableRender;
     rowSpan?: number;
     textAlign?: KoliBriTableCellTextAlign;
-    width?: string;
-    data?: KoliBriTableDataType;
+    width?: number;
 };
 export type KoliBriTableHeaderCell = KoliBriTableCell & {
-    key?: string;
-    sortDirection?: KoliBriSortDirection;
     hidable?: boolean;
+    key?: string;
+    resizable?: boolean;
     sortable?: boolean;
+    sortDirection?: KoliBriSortDirection;
     sortOrder?: number;
-    resizable?: boolean;
     visible?: boolean;
 };
 export type KoliBriTableSelection = {
-    label: (row: KoliBriTableDataType) => string;
+    disabledKeys?: KoliBriTableSelectionKeys;
     keyPropertyName?: string;
+    label: (row: KoliBriTableDataType) => string;
     multiple?: boolean;
     selectedKeys?: KoliBriTableSelectionKeys;
-    disabledKeys?: KoliBriTableSelectionKeys;
 };

package/dist/types/utils/events.d.ts

@@ -1,22 +1,22 @@
 declare enum KolEvent {
-    blur = "kolBlur",
-    change = "kolChange",
-    changeHeaderCells = "changeHeaderCells",
-    changePage = "kolChangePage",
-    changePageSize = "kolChangePageSize",
-    click = "kolClick",
-    close = "kolClose",
-    create = "kolCreate",
-    focus = "kolFocus",
-    input = "kolInput",
-    keydown = "kolKeydown",
-    mousedown = "kolMousedown",
-    reset = "kolReset",
-    select = "kolSelect",
-    selectionChange = "kolSelectionChange",
-    sort = "kolSort",
-    submit = "kolSubmit",
-    toggle = "kolToggle"
+    blur = "blur",
+    change = "change",
+    changeHeaderCells = "changeheadercells",
+    changePage = "changepage",
+    changePageSize = "changepagesize",
+    click = "click",
+    close = "close",
+    create = "create",
+    focus = "focus",
+    input = "input",
+    keydown = "keydown",
+    mousedown = "mousedown",
+    reset = "reset",
+    select = "select",
+    selectionChange = "selectionchange",
+    sort = "sort",
+    submit = "submit",
+    toggle = "toggle"
 }
 declare function dispatchDomEvent<T>(target: HTMLElement, event: KolEvent, detail?: T): void;
 export { KolEvent, dispatchDomEvent };

package/doc/accordion.md

@@ -16,13 +16,13 @@
 
 ## Methods
 
-### `kolFocus() => Promise<void>`
+### `focus() => Promise<void | undefined>`
 
 Sets focus on the internal element.
 
 #### Returns
 
-Type: `Promise<void>`
+Type: `Promise<void | undefined>`
 
 
 

package/doc/badge.md

@@ -15,7 +15,7 @@
 
 ## Methods
 
-### `kolFocus() => Promise<void>`
+### `focus() => Promise<void>`
 
 Sets focus on the internal element.
 

package/doc/button-link.md

@@ -29,23 +29,23 @@
 
 ## Methods
 
-### `getValue() => Promise<StencilUnknown>`
+### `focus() => Promise<void | undefined>`
 
-Returns the current value.
+Sets focus on the internal element.
 
 #### Returns
 
-Type: `Promise<StencilUnknown>`
+Type: `Promise<void | undefined>`
 
 
 
-### `kolFocus() => Promise<void>`
+### `getValue() => Promise<StencilUnknown>`
 
-Sets focus on the internal element.
+Returns the current value.
 
 #### Returns
 
-Type: `Promise<void>`
+Type: `Promise<StencilUnknown>`
 
 
 

package/doc/button.md

@@ -31,23 +31,23 @@
 
 ## Methods
 
-### `getValue() => Promise<StencilUnknown>`
+### `focus() => Promise<void | undefined>`
 
-Returns the current value.
+Sets focus on the internal element.
 
 #### Returns
 
-Type: `Promise<StencilUnknown>`
+Type: `Promise<void | undefined>`
 
 
 
-### `kolFocus() => Promise<void>`
+### `getValue() => Promise<StencilUnknown>`
 
-Sets focus on the internal element.
+Returns the current value.
 
 #### Returns
 
-Type: `Promise<void>`
+Type: `Promise<StencilUnknown>`
 
 
 

package/doc/combobox.md

@@ -30,23 +30,23 @@
 
 ## Methods
 
-### `getValue() => Promise<string>`
+### `focus() => Promise<void | undefined>`
 
-Returns the current value.
+Sets focus on the internal element.
 
 #### Returns
 
-Type: `Promise<string>`
+Type: `Promise<void | undefined>`
 
 
 
-### `kolFocus() => Promise<void>`
+### `getValue() => Promise<string>`
 
-Sets focus on the internal element.
+Returns the current value.
 
 #### Returns
 
-Type: `Promise<void>`
+Type: `Promise<string>`
 
 
 

package/doc/details.md

@@ -16,13 +16,13 @@
 
 ## Methods
 
-### `kolFocus() => Promise<void>`
+### `focus() => Promise<void | undefined>`
 
 Sets focus on the internal element.
 
 #### Returns
 
-Type: `Promise<void>`
+Type: `Promise<void | undefined>`
 
 
 

package/doc/dialog.md

@@ -0,0 +1,48 @@
+# kol-dialog
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property              | Attribute  | Description                                                                                                        | Type                                                      | Default     |
+| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ----------- |
+| `_label` _(required)_ | `_label`   | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                  | `undefined` |
+| `_on`                 | --         | Defines the modal callback functions.                                                                              | `undefined \| ({ onClose?: (() => void) \| undefined; })` | `undefined` |
+| `_variant`            | `_variant` | Defines the variant of the modal.                                                                                  | `"blank" \| "card" \| undefined`                          | `'blank'`   |
+| `_width`              | `_width`   | Defines the width of the modal. (max-width: 100%)                                                                  | `string \| undefined`                                     | `'100%'`    |
+
+
+## Methods
+
+### `closeModal() => Promise<void>`
+
+Closes the dialog.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+### `openModal() => Promise<void>`
+
+Opens the dialog.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
+## Slots
+
+| Slot | Description            |
+| ---- | ---------------------- |
+|      | The dialog's contents. |
+
+
+----------------------------------------------
+
+

package/doc/input-checkbox.md

@@ -31,23 +31,23 @@
 
 ## Methods
 
-### `getValue() => Promise<StencilUnknown>`
+### `focus() => Promise<void | undefined>`
 
-Returns the current value.
+Sets focus on the internal element.
 
 #### Returns
 
-Type: `Promise<StencilUnknown>`
+Type: `Promise<void | undefined>`
 
 
 
-### `kolFocus() => Promise<void>`
+### `getValue() => Promise<StencilUnknown>`
 
-Sets focus on the internal element.
+Returns the current value.
 
 #### Returns
 
-Type: `Promise<void>`
+Type: `Promise<StencilUnknown>`
 
 
 

package/doc/input-color.md

@@ -29,23 +29,23 @@
 
 ## Methods
 
-### `getValue() => Promise<string | undefined>`
+### `focus() => Promise<void | undefined>`
 
-Returns the current value.
+Sets focus on the internal element.
 
 #### Returns
 
-Type: `Promise<string | undefined>`
+Type: `Promise<void | undefined>`
 
 
 
-### `kolFocus() => Promise<void>`
+### `getValue() => Promise<string | undefined>`
 
-Sets focus on the internal element.
+Returns the current value.
 
 #### Returns
 
-Type: `Promise<void>`
+Type: `Promise<string | undefined>`
 
 
 

package/doc/input-date.md

@@ -35,23 +35,23 @@
 
 ## Methods
 
-### `getValue() => Promise<string | Date | undefined | null>`
+### `focus() => Promise<void | undefined>`
 
-Returns the current value.
+Sets focus on the internal element.
 
 #### Returns
 
-Type: `Promise<string | Date | null | undefined>`
+Type: `Promise<void | undefined>`
 
 
 
-### `kolFocus() => Promise<void>`
+### `getValue() => Promise<string | Date | undefined | null>`
 
-Sets focus on the internal element.
+Returns the current value.
 
 #### Returns
 
-Type: `Promise<void>`
+Type: `Promise<string | Date | null | undefined>`
 
 
 

package/doc/input-email.md

@@ -37,23 +37,23 @@
 
 ## Methods
 
-### `getValue() => Promise<string | undefined>`
+### `focus() => Promise<void | undefined>`
 
-Returns the current value.
+Sets focus on the internal element.
 
 #### Returns
 
-Type: `Promise<string | undefined>`
+Type: `Promise<void | undefined>`
 
 
 
-### `kolFocus() => Promise<void>`
+### `getValue() => Promise<string | undefined>`
 
-Sets focus on the internal element.
+Returns the current value.
 
 #### Returns
 
-Type: `Promise<void>`
+Type: `Promise<string | undefined>`