@public-ui/components 2.0.0-rc.11 → 2.0.0-rc.12

package/dist/types/types/props/heading-variant.d.ts

@@ -2,7 +2,7 @@ import { Generic } from '@a11y-ui/core';
 declare const headingVariantPropTypeOptions: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "strong"];
 export type HeadingVariantPropType = (typeof headingVariantPropTypeOptions)[number];
 export type PropHeadingVariant = {
-  variant: HeadingVariantPropType;
+    variant: HeadingVariantPropType;
 };
 export declare const validateHeadingVariant: (component: Generic.Element.Component, value?: HeadingVariantPropType) => void;
 export {};

package/dist/types/types/props/hide-error.d.ts

@@ -2,6 +2,6 @@ import { Generic } from '@a11y-ui/core';
 import { WatchBooleanOptions } from '../../utils/prop.validators';
 export type HideErrorPropType = boolean;
 export type PropHideError = {
-  hideError: HideErrorPropType;
+    hideError: HideErrorPropType;
 };
 export declare const validateHideError: (component: Generic.Element.Component, value?: HideErrorPropType, options?: WatchBooleanOptions) => void;

package/dist/types/types/props/hide-label.d.ts

@@ -2,6 +2,6 @@ import { Generic } from '@a11y-ui/core';
 import { WatchBooleanOptions } from '../../utils/prop.validators';
 export type HideLabelPropType = boolean;
 export type PropHideLabel = {
-  hideLabel: HideLabelPropType;
+    hideLabel: HideLabelPropType;
 };
 export declare const validateHideLabel: (component: Generic.Element.Component, value?: HideLabelPropType, options?: WatchBooleanOptions) => void;

package/dist/types/types/props/href.d.ts

@@ -2,7 +2,7 @@ import { Generic } from '@a11y-ui/core';
 import { WatchStringOptions } from '../../utils/prop.validators';
 export type HrefPropType = string;
 export type PropHref = {
-  href: HrefPropType;
+    href: HrefPropType;
 };
 export type HrefProp = Generic.Element.Members<PropHref, unknown>;
 export declare const validateHref: (component: Generic.Element.Component, value?: HrefPropType, options?: WatchStringOptions) => void;

package/dist/types/types/props/icons.d.ts

@@ -3,7 +3,7 @@ import { Stringified } from '../common';
 import { KoliBriIconsProp, KoliBriIconsState } from '../icons';
 export type IconsPropType = Stringified<KoliBriIconsProp>;
 export type PropIcons = {
-  icons: IconsPropType;
+    icons: IconsPropType;
 };
 export declare const mapIconProp2State: (icon: KoliBriIconsProp) => KoliBriIconsState;
 export declare const isIcon: (value?: unknown) => boolean;

package/dist/types/types/props/id.d.ts

@@ -1,6 +1,6 @@
 import { Generic } from '@a11y-ui/core';
 export type IdPropType = string;
 export type PropId = {
-  id: IdPropType;
+    id: IdPropType;
 };
 export declare const validateId: (component: Generic.Element.Component, value?: IdPropType) => void;

package/dist/types/types/props/image-source.d.ts

@@ -2,6 +2,6 @@ import { Generic } from '@a11y-ui/core';
 import { WatchStringOptions } from '../../utils/prop.validators';
 export type ImageSourcePropType = string;
 export type PropImageSource = {
-  src: ImageSourcePropType;
+    src: ImageSourcePropType;
 };
 export declare const validateImageSource: (component: Generic.Element.Component, value?: ImageSourcePropType, options?: WatchStringOptions) => void;

package/dist/types/types/props/indeterminate.d.ts

@@ -1,6 +1,6 @@
 import { Generic } from '@a11y-ui/core';
 export type IndeterminatePropType = boolean;
 export type PropIndeterminate = {
-  indeterminate: IndeterminatePropType;
+    indeterminate: IndeterminatePropType;
 };
 export declare const validateIndeterminate: (component: Generic.Element.Component, value?: IndeterminatePropType) => void;

package/dist/types/types/props/label.d.ts

@@ -5,10 +5,10 @@ export declare function containsOnlyNumbers(str: string): boolean;
 export type LabelPropType = string;
 export type LabelWithExpertSlotPropType = LabelPropType | '';
 export type PropLabel = {
-  label: LabelPropType;
+    label: LabelPropType;
 };
 export type PropLabelWithExpertSlot = {
-  label: LabelWithExpertSlotPropType;
+    label: LabelWithExpertSlotPropType;
 };
 export type LabelProp = Generic.Element.Members<PropLabel, unknown>;
 export declare const validateLabel: (component: Generic.Element.Component, value?: LabelPropType, options?: WatchStringOptions) => void;

package/dist/types/types/props/link-on-callbacks.d.ts

@@ -2,9 +2,9 @@ import { Generic } from '@a11y-ui/core';
 import { Events } from '../../enums/events';
 import { EventValueOrEventCallback } from '../callbacks';
 export type LinkOnCallbacksPropType = {
-  [Events.onClick]?: EventValueOrEventCallback<Event, string>;
+    [Events.onClick]?: EventValueOrEventCallback<Event, string>;
 };
 export type PropLinkOnCallbacks = {
-  on: LinkOnCallbacksPropType;
+    on: LinkOnCallbacksPropType;
 };
 export declare const validateLinkCallbacks: (component: Generic.Element.Component, value?: LinkOnCallbacksPropType) => void;

package/dist/types/types/props/link-target.d.ts

@@ -1,6 +1,6 @@
 import { Generic } from '@a11y-ui/core';
 export type LinkTargetPropType = '_blank' | '_parent' | '_self' | '_top' | string;
 export type PropLinkTarget = {
-  target: LinkTargetPropType;
+    target: LinkTargetPropType;
 };
 export declare const validateLinkTarget: (component: Generic.Element.Component, value?: LinkTargetPropType) => void;

package/dist/types/types/props/max.d.ts

@@ -3,6 +3,6 @@ import { WatchNumberOptions } from '../../utils/prop.validators';
 import { RowsPropType } from './rows';
 export type MaxPropType = number;
 export type PropMax = {
-  max: MaxPropType;
+    max: MaxPropType;
 };
 export declare const validateMax: (component: Generic.Element.Component, value?: RowsPropType, options?: WatchNumberOptions) => void;

package/dist/types/types/props/multiple.d.ts

@@ -1,6 +1,6 @@
 import { Generic } from '@a11y-ui/core';
 export type MultiplePropType = boolean;
 export type PropMultiple = {
-  multiple: MultiplePropType;
+    multiple: MultiplePropType;
 };
 export declare const validateMultiple: (component: Generic.Element.Component, value?: MultiplePropType) => void;

package/dist/types/types/props/name.d.ts

@@ -2,6 +2,6 @@ import { Generic } from '@a11y-ui/core';
 import { WatchStringOptions } from '../../utils/prop.validators';
 export type NamePropType = string;
 export type PropName = {
-  name: NamePropType;
+    name: NamePropType;
 };
 export declare const validateName: (component: Generic.Element.Component, value?: NamePropType, options?: WatchStringOptions) => void;

package/dist/types/types/props/open.d.ts

@@ -2,6 +2,6 @@ import { Generic } from '@a11y-ui/core';
 import { WatchBooleanOptions } from '../../utils/prop.validators';
 export type OpenPropType = boolean;
 export type PropOpen = {
-  open: OpenPropType;
+    open: OpenPropType;
 };
 export declare const validateOpen: (component: Generic.Element.Component, value: OpenPropType | undefined, options?: WatchBooleanOptions) => void;

package/dist/types/types/props/options.d.ts

@@ -6,10 +6,10 @@ import { W3CInputValue } from '../w3c';
 export type OptionsPropType = Stringified<Option<W3CInputValue>[]>;
 export type OptionsWithOptgroupPropType = Stringified<(Option<W3CInputValue> | Optgroup<W3CInputValue>)[]>;
 export type PropOptions = {
-  options: OptionsPropType;
+    options: OptionsPropType;
 };
 export type PropOptionsWithOptgroup = {
-  options: OptionsWithOptgroupPropType;
+    options: OptionsWithOptgroupPropType;
 };
 export declare const validateOptions: (component: Generic.Element.Component, value: OptionsPropType | undefined, options?: WatchOptions) => void;
 export declare const validateOptionsWithOptgroup: (component: Generic.Element.Component, value: OptionsWithOptgroupPropType | undefined, options?: WatchOptions) => void;

package/dist/types/types/props/read-only.d.ts

@@ -1,6 +1,6 @@
 import { Generic } from '@a11y-ui/core';
 export type ReadOnlyPropType = boolean;
 export type PropReadOnly = {
-  readOnly: ReadOnlyPropType;
+    readOnly: ReadOnlyPropType;
 };
 export declare const validateReadOnly: (component: Generic.Element.Component, value?: ReadOnlyPropType) => void;

package/dist/types/types/props/required.d.ts

@@ -1,7 +1,7 @@
 import { Generic } from '@a11y-ui/core';
 type RequiredPropType = boolean;
 export type PropRequired = {
-  required: RequiredPropType;
+    required: RequiredPropType;
 };
 export declare const validateRequired: (component: Generic.Element.Component, value?: RequiredPropType) => void;
 export {};

package/dist/types/types/props/rows.d.ts

@@ -1,6 +1,6 @@
 import { Generic } from '@a11y-ui/core';
 export type RowsPropType = number;
 export type PropRows = {
-  rows: RowsPropType;
+    rows: RowsPropType;
 };
 export declare const validateRows: (component: Generic.Element.Component, value?: RowsPropType) => void;

package/dist/types/types/props/show.d.ts

@@ -2,6 +2,6 @@ import { Generic } from '@a11y-ui/core';
 import { WatchBooleanOptions } from '../../utils/prop.validators';
 export type ShowPropType = boolean;
 export type PropShow = {
-  show: ShowPropType;
+    show: ShowPropType;
 };
 export declare const validateShow: (component: Generic.Element.Component, value?: ShowPropType, hooks?: WatchBooleanOptions) => void;

package/dist/types/types/props/suggestions.d.ts

@@ -3,6 +3,6 @@ import { Stringified } from '../common';
 import { W3CInputValue } from '../w3c';
 export type SuggestionsPropType = Stringified<W3CInputValue[]>;
 export type PropSuggestions = {
-  suggestions: SuggestionsPropType;
+    suggestions: SuggestionsPropType;
 };
 export declare const validateSuggestions: (component: Generic.Element.Component, value?: SuggestionsPropType) => void;

package/dist/types/types/props/sync-value-by-selector.d.ts

@@ -1,4 +1,4 @@
 export type SyncValueBySelectorPropType = string;
 export type PropSyncValueBySelector = {
-  syncValueBySelector: SyncValueBySelectorPropType;
+    syncValueBySelector: SyncValueBySelectorPropType;
 };

package/dist/types/types/props/tooltip-align.d.ts

@@ -2,6 +2,6 @@ import { Generic } from '@a11y-ui/core';
 import { AlignPropType } from './align';
 export type TooltipAlignPropType = AlignPropType;
 export type PropTooltipAlign = {
-  tooltipAlign: TooltipAlignPropType;
+    tooltipAlign: TooltipAlignPropType;
 };
 export declare const validateTooltipAlign: (component: Generic.Element.Component, value?: TooltipAlignPropType) => void;

package/dist/types/types/props/touched.d.ts

@@ -1,6 +1,6 @@
 import { Generic } from '@a11y-ui/core';
 export type TouchedPropType = boolean;
 export type PropTouched = {
-  touched: TouchedPropType;
+    touched: TouchedPropType;
 };
 export declare const validateTouched: (component: Generic.Element.Component, value?: TouchedPropType) => void;

package/dist/types/types/props/variant/spin.d.ts

@@ -2,7 +2,7 @@ import { Generic } from '@a11y-ui/core';
 declare const spinVariantPropTypeOptions: readonly ["cycle", "dot", "none"];
 export type SpinVariantPropType = (typeof spinVariantPropTypeOptions)[number];
 export type PropSpinVariant = {
-  variant: SpinVariantPropType;
+    variant: SpinVariantPropType;
 };
 export declare const validateSpinVariant: (component: Generic.Element.Component, value?: SpinVariantPropType) => void;
 export {};

package/dist/types/utils/a11y.tipps.d.ts

@@ -1,6 +1,6 @@
 type HintOptions = {
-  details?: unknown[];
-  force?: boolean;
+    details?: unknown[];
+    force?: boolean;
 };
 export declare const a11yHint: (msg: string, options?: HintOptions) => void;
 export declare const devHint: (msg: string, options?: HintOptions) => void;

package/dist/types/utils/align-floating-elements.d.ts

@@ -1,9 +1,9 @@
 import { AlignPropType } from '../types/props/align';
 type Arguments = {
-  floatingElement: HTMLElement;
-  referenceElement: Element;
-  arrowElement?: HTMLElement;
-  align?: AlignPropType;
+    floatingElement: HTMLElement;
+    referenceElement: Element;
+    arrowElement?: HTMLElement;
+    align?: AlignPropType;
 };
 export declare const alignFloatingElements: ({ floatingElement, referenceElement, arrowElement, align }: Arguments) => Promise<void>;
 export {};

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

@@ -2,14 +2,14 @@ import { CMYK } from 'color-convert/conversions';
 export declare const cmykSaturation: (cmyk: number[], saturation?: number) => CMYK;
 export declare const getHexBySat: (hex: string, saturation?: number) => string;
 interface KoliBriContrast {
-  color: {
-    background: string;
-    text: string;
-  };
-  contrast: {
-    value: number;
-    score: string;
-  };
+    color: {
+        background: string;
+        text: string;
+    };
+    contrast: {
+        value: number;
+        score: string;
+    };
 }
 export declare const getValues: (hex: string, saturation?: number) => KoliBriContrast;
 export {};

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

@@ -5,21 +5,21 @@ export declare const getDevMode: () => boolean;
 export declare const getExperimentalMode: () => boolean;
 export declare const getColorContrastAnalysis: () => boolean;
 type LogShieldOptions = {
-  classifier?: string;
-  forceLog?: boolean;
-  overwriteStyle?: string;
+    classifier?: string;
+    forceLog?: boolean;
+    overwriteStyle?: string;
 };
 export declare class Log {
-  private static shield;
-  private static mapToArray;
-  private static handleClassifier;
-  private static getShield;
-  static debug(msg: unknown | unknown[], options?: LogShieldOptions): void;
-  static info(msg: unknown | unknown[], options?: LogShieldOptions): void;
-  static trace(msg: unknown | unknown[], options?: LogShieldOptions): void;
-  static warn(msg: unknown | unknown[], options?: LogShieldOptions): void;
-  static error(msg: unknown | unknown[], options?: LogShieldOptions): void;
-  static throw(msg: unknown | unknown[], options?: LogShieldOptions): void;
+    private static shield;
+    private static mapToArray;
+    private static handleClassifier;
+    private static getShield;
+    static debug(msg: unknown | unknown[], options?: LogShieldOptions): void;
+    static info(msg: unknown | unknown[], options?: LogShieldOptions): void;
+    static trace(msg: unknown | unknown[], options?: LogShieldOptions): void;
+    static warn(msg: unknown | unknown[], options?: LogShieldOptions): void;
+    static error(msg: unknown | unknown[], options?: LogShieldOptions): void;
+    static throw(msg: unknown | unknown[], options?: LogShieldOptions): void;
 }
 declare let KoliBri: Record<string, unknown> | null;
 export declare const getKoliBri: () => Record<string, unknown>;

package/dist/types/utils/prop.validators.d.ts

@@ -5,27 +5,27 @@ export declare const objectObjectHandler: (value: unknown, cb: () => void) => vo
 export declare const emptyStringByArrayHandler: (value: unknown, cb: () => void) => void;
 export declare const setEventTarget: (event: Event, target?: HTMLElement) => void;
 type SetStateHooks = {
-  afterPatch?: Generic.Element.StateHooksCallback;
-  beforePatch?: Generic.Element.NextStateHooksCallback;
+    afterPatch?: Generic.Element.StateHooksCallback;
+    beforePatch?: Generic.Element.NextStateHooksCallback;
 };
 export declare const setState: <T>(component: Generic.Element.Component, propName: string, value?: T | null | undefined, hooks?: SetStateHooks) => void;
 export type WatchOptions = {
-  defaultValue?: unknown;
-  hooks?: SetStateHooks;
-  required?: boolean;
+    defaultValue?: unknown;
+    hooks?: SetStateHooks;
+    required?: boolean;
 };
 export type WatchBooleanOptions = WatchOptions & {
-  defaultValue?: boolean | null;
+    defaultValue?: boolean | null;
 };
 export type WatchStringOptions = WatchOptions & {
-  defaultValue?: string | null;
-  maxLength?: number;
-  minLength?: number;
+    defaultValue?: string | null;
+    maxLength?: number;
+    minLength?: number;
 };
 export type WatchNumberOptions = WatchOptions & {
-  defaultValue?: number | null;
-  min?: number;
-  max?: number;
+    defaultValue?: number | null;
+    min?: number;
+    max?: number;
 };
 export declare function watchValidator<T>(component: Generic.Element.Component, propName: string, validationFunction: (value?: T) => boolean, requiredGeneric: Set<string | null | undefined>, value?: T, options?: WatchOptions): void;
 export declare const watchBoolean: (component: Generic.Element.Component, propName: string, value?: boolean, options?: WatchBooleanOptions) => void;
@@ -40,24 +40,24 @@ export declare const mapStringOrBoolean2String: (value?: string | boolean) => st
 export declare const koliBriQuerySelector: <T extends Element>(selector: string, node?: Document | HTMLElement | ShadowRoot) => T | null;
 export declare const koliBriQuerySelectorAll: <T extends Element>(selector: string, node?: Document | HTMLElement | ShadowRoot) => T[];
 interface A11yColorContrast {
-  backgroundColor: string;
-  color: string;
-  domNode: HTMLElement | HTMLSlotElement;
-  level: string;
-  score: number;
+    backgroundColor: string;
+    color: string;
+    domNode: HTMLElement | HTMLSlotElement;
+    level: string;
+    score: number;
 }
 export declare const koliBriA11yColorContrast: (domNode: HTMLElement, a11yColorContrast?: A11yColorContrast) => A11yColorContrast;
 export declare const koliBriQuerySelectorColors: (selector: string, a11yColorContrast?: A11yColorContrast) => A11yColorContrast;
 export declare class KoliBriUtils {
-  private static executionLock;
-  private static cache;
-  static queryHtmlElementColors(targetNode: HTMLElement, a11yColorContrast: A11yColorContrast, recursion?: boolean, log?: boolean): A11yColorContrast | null;
+    private static executionLock;
+    private static cache;
+    static queryHtmlElementColors(targetNode: HTMLElement, a11yColorContrast: A11yColorContrast, recursion?: boolean, log?: boolean): A11yColorContrast | null;
 }
 export declare class KoliBriDevHelper {
-  static readonly patchTheme: (name: string, map: Generic.Theming.Map<string, string>, append?: boolean | undefined) => string;
-  static readonly patchThemeTag: (themeName: string, tagName: "GLOBAL" | "PROPERTIES" | `${Uppercase<string>}-${Uppercase<string>}`, css: string, append?: boolean | undefined) => void;
-  static readonly querySelector: <T extends Element>(selector: string, node?: HTMLElement | ShadowRoot | Document | undefined) => T | null;
-  static readonly querySelectorAll: <T extends Element>(selector: string, node?: HTMLElement | ShadowRoot | Document | undefined) => T[];
-  static readonly stringifyJson: (value: unknown) => string;
+    static readonly patchTheme: (name: string, map: Generic.Theming.Map<string, string>, append?: boolean | undefined) => string;
+    static readonly patchThemeTag: (themeName: string, tagName: "GLOBAL" | "PROPERTIES" | `${Uppercase<string>}-${Uppercase<string>}`, css: string, append?: boolean | undefined) => void;
+    static readonly querySelector: <T extends Element>(selector: string, node?: HTMLElement | ShadowRoot | Document | undefined) => T | null;
+    static readonly querySelectorAll: <T extends Element>(selector: string, node?: HTMLElement | ShadowRoot | Document | undefined) => T[];
+    static readonly stringifyJson: (value: unknown) => string;
 }
 export {};

package/doc/alert.md

@@ -7,13 +7,13 @@ Die **Alert**-Komponente gibt ein optisches Feedback an die Nutzer:innen. Sie be
 ### Code
 
 ```html
-<kol-alert _label="Überschrift im Alert" _level="1" _type="success" _variant="msg">Textbereich im Alert</kol-alert>
+<kol-alert _label="Überschrift im Alert" _level="1" _type="success">Textbereich im Alert</kol-alert>
 <kol-alert _label="Überschrift im Alert" _level="2" _type="info" _variant="card">Textbereich im Alert</kol-alert>
 ```
 
 ### Beispiel
 
-<kol-alert _label="Überschrift im Alert" _level="1" _type="success" _variant="msg">Textbereich im Alert</kol-alert>
+<kol-alert _label="Überschrift im Alert" _level="1" _type="success" >Textbereich im Alert</kol-alert>
 <kol-alert _label="Überschrift im Alert" _level="2" _type="info" _variant="card">Textbereich im Alert</kol-alert>
 
 ## Verwendung

package/doc/toaster.md

@@ -13,13 +13,16 @@ Die Toast-Komponenten werden nicht direkt verwendet, sondern immer über den Toa
 import { ToasterService } from '@public-ui/components';
 
 // Get the toaster instance for the current HTML document.
-const toaster = ToasterService.getInstance(document);
+const toaster = ToasterService.getInstance(document, {
+  defaultAlertType: 'msg', // Standard: 'card'
+}});
 
 // Enqueue a new toast to the toaster to display:
 toaster.enqueue({
 	label: 'This is the title',
 	description: 'Magna eu sit adipisicing cillum amet esse in aute quis in dolore.',
 	type: 'info',
+	alertType: 'msg', // Standard: 'card'
 });
 ```
 

package/doc/tooltip.md

@@ -16,6 +16,17 @@ Die Tooltip-Komponente wird bei Fokus oder bei Bewegen der Maus über dem Refere
 Aus Sicht des Barrierefreiheitstests können Tooltips ignoriert werden, solange zudem von der Entwicklung sichergestellt wurde, dass der Tooltip-Text auch in gleicher Weise vom Screenreader vorgelesen wird.
 </kol-alert>
 
+## Breite
+
+Die Breite des Tooltips richtet sich normalerweise nach ihrem Inhalt.
+Um die Breite eines Tooltips zu konfigurieren, kann auf dem umgebenden Container eine [CSS-Custom-Property](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) wie folgt definiert werden:
+
+```css
+.container {
+  --kol-tooltip-width': '40rem';
+}
+```
+
 ## Links und Referenzen
 
 - <kol-link _href="https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/titel-tooltips-toggletips" _target="_blank"></kol-link>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/components",
-  "version": "2.0.0-rc.11",
+  "version": "2.0.0-rc.12",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "bugs": {

package/dist/cjs/access-key-30674e1a.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";const prop_validators=require("./prop.validators-249e288b.js"),validateAccessKey=(e,s)=>{prop_validators.watchString(e,"_accessKey",s)};exports.validateAccessKey=validateAccessKey;