@uh-design-system/component-library 1.4.0-rc.2 → 1.4.0

package/dist/types/stencil-public-runtime.d.ts

@@ -63,6 +63,12 @@ export interface ShadowRootOptions {
      * focusable part is given focus, and the shadow host is given any available `:focus` styling.
      */
     delegatesFocus?: boolean;
+    /**
+     * Sets the slot assignment mode for the shadow root. When set to `'manual'`, enables imperative
+     * slotting using the `HTMLSlotElement.assign()` method. Defaults to `'named'` for standard
+     * declarative slotting behavior.
+     */
+    slotAssignment?: 'manual' | 'named';
 }
 export interface ModeStyles {
     [modeName: string]: string | string[];
@@ -119,12 +125,34 @@ export interface EventOptions {
      */
     composed?: boolean;
 }
+export interface AttachInternalsOptions {
+    /**
+     * Initial custom states to set on the ElementInternals.states CustomStateSet.
+     * Each key is the state name and the value is the initial boolean state.
+     *
+     * These states can be targeted with the CSS `:state()` pseudo-class.
+     *
+     * @example
+     * ```tsx
+     * @AttachInternals({ states: { open: true, active: false } })
+     * internals: ElementInternals;
+     * ```
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet
+     */
+    states?: {
+        [stateName: string]: boolean;
+    };
+}
 export interface AttachInternalsDecorator {
-    (): PropertyDecorator;
+    (opts?: AttachInternalsOptions): PropertyDecorator;
 }
 export interface ListenDecorator {
     (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>;
 }
+export interface ResolveVarFunction {
+    <T>(variable: T): string;
+}
 export interface ListenOptions {
     /**
      * Handlers can also be registered for an event other than the host itself.
@@ -153,7 +181,9 @@ export interface StateDecorator {
     (): PropertyDecorator;
 }
 export interface WatchDecorator {
-    (propName: any): CustomMethodDecorator<(newValue?: any, oldValue?: any, propName?: any, ...args: any[]) => any | void>;
+    (propName: any, watchOptions?: {
+        immediate?: boolean;
+    }): CustomMethodDecorator<(newValue?: any, oldValue?: any, propName?: any, ...args: any[]) => any | void>;
 }
 export interface PropSerializeDecorator {
     (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => string | null>;
@@ -208,6 +238,24 @@ export declare const AttachInternals: AttachInternalsDecorator;
  * https://stenciljs.com/docs/events#listen-decorator
  */
 export declare const Listen: ListenDecorator;
+/**
+ * The `resolveVar()` function is a compile-time utility that resolves const variables
+ * and object properties to their string literal values. This allows variables to be
+ * used in `@Listen` and `@Event` decorators instead of hardcoded strings.
+ *
+ * @example
+ * ```ts
+ * const MY_EVENT = 'myEvent';
+ * @Listen(resolveVar(MY_EVENT))
+ * ```
+ *
+ * @example
+ * ```ts
+ * const EVENTS = { MY_EVENT: 'myEvent' } as const;
+ * @Event({ eventName: resolveVar(EVENTS.MY_EVENT) })
+ * ```
+ */
+export declare const resolveVar: ResolveVarFunction;
 /**
  * The `@Method()` decorator is used to expose methods on the public API.
  * Class methods decorated with the @Method() decorator can be called directly
@@ -339,7 +387,7 @@ export declare function forceUpdate(ref: any): void;
  * @returns the rendering ref
  */
 export declare function getRenderingRef(): any;
-export interface HTMLStencilElement extends Omit<HTMLElement, 'autocorrect'> {
+export interface HTMLStencilElement extends HTMLElement {
     componentOnReady(): Promise<this>;
 }
 /**
@@ -365,6 +413,27 @@ export declare function readTask(task: RafCallback): void;
  * Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.
  */
 export declare const setErrorHandler: (handler: ErrorHandler) => void;
+export type TagTransformer = (tag: string) => string;
+/**
+ * Sets a tag transformer to be used when rendering your custom elements.
+ * ```ts
+ * setTagTransformer((tag) => {
+ *  if (tag.startsWith('my-')) return `new-${tag}`
+ *  return tag;
+ * });
+ * ```
+ * Will mean all your components that start with `my-` are defined instead with `new-my-` prefix.
+ *
+ * @param transformer the transformer function to use which must return a string.
+ */
+export declare function setTagTransformer(transformer: TagTransformer): void;
+/**
+ * Transforms a tag name using a transformer set via `setTagTransformer`
+ *
+ * @param tag - the tag to transform e.g. `my-tag`
+ * @returns the transformed tag e.g. `new-my-tag`
+ */
+export declare function transformTag(tag: string): string;
 /**
  * @deprecated - Use `MixedInCtor` instead:
  * ```ts
@@ -568,7 +637,7 @@ export interface FunctionalUtilities {
     map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
 }
 export interface FunctionalComponent<T = {}> {
-    (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];
+    (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[] | null;
 }
 /**
  * A Child VDOM node
@@ -610,6 +679,7 @@ export declare namespace h {
     function h(sel: any, data: VNodeData | null, text: string): VNode;
     function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
     function h(sel: any, data: VNodeData | null, children: VNode): VNode;
+    function h(sel: any, data: VNodeData | null, ...children: (VNode | string | number)[]): VNode;
     namespace JSX {
         interface IntrinsicElements extends LocalJSX.IntrinsicElements, JSXBase.IntrinsicElements {
             [tagName: string]: any;
@@ -624,6 +694,36 @@ export declare function h(sel: any, children: Array<VNode | undefined | null>):
 export declare function h(sel: any, data: VNodeData | null, text: string): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
+export declare function h(sel: any, data: VNodeData | null, ...children: (VNode | string | number)[]): VNode;
+/**
+ * Automatic JSX runtime functions for TypeScript's react-jsx mode.
+ * These functions are called automatically by TypeScript when using "jsx": "react-jsx".
+ * @param type type of node
+ * @param props properties of node
+ * @param key optional key for the node
+ * @returns a jsx vnode
+ */
+export declare function jsx(type: any, props: any, key?: string): VNode;
+/**
+ * Automatic JSX runtime functions for TypeScript's react-jsxmode with multiple children.
+ * @param type type of node
+ * @param props properties of node
+ * @param key optional key for the node
+ * @returns a jsx vnode
+ */
+export declare function jsxs(type: any, props: any, key?: string): VNode;
+/**
+ * Automatic JSX runtime functions for TypeScript's react-jsxdev mode.
+ * These functions are called automatically by TypeScript when using "jsx": "react-jsxdev".
+ * @param type type of node
+ * @param props properties of node
+ * @param key optional key for the node
+ * @param isStaticChildren indicates if the children are static
+ * @param source source information
+ * @param self reference to the component instance
+ * @returns a jsx vnode
+ */
+export declare function jsxDEV(type: any, props: any, key?: string | number, isStaticChildren?: boolean, source?: any, self?: any): VNode;
 /**
  * A virtual DOM node
  */
@@ -653,7 +753,7 @@ declare namespace LocalJSX {
 export { LocalJSX as JSX };
 export declare namespace JSXBase {
     interface IntrinsicElements {
-        slot: JSXBase.SlotAttributes;
+        slot: JSXBase.SlotAttributes<HTMLSlotElement>;
         a: JSXBase.AnchorHTMLAttributes<HTMLAnchorElement>;
         abbr: JSXBase.HTMLAttributes;
         address: JSXBase.HTMLAttributes;
@@ -823,7 +923,7 @@ export declare namespace JSXBase {
         use: JSXBase.SVGAttributes;
         view: JSXBase.SVGAttributes;
     }
-    interface SlotAttributes extends JSXAttributes {
+    interface SlotAttributes<T = HTMLSlotElement> extends JSXAttributes<T> {
         name?: string;
         slot?: string;
         onSlotchange?: (event: Event) => void;
@@ -879,6 +979,9 @@ export declare namespace JSXBase {
         popoverTargetAction?: string;
         popoverTargetElement?: Element | null;
         popoverTarget?: string;
+        command?: string;
+        commandFor?: string;
+        commandfor?: string;
     }
     interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
         height?: number | string;
@@ -1747,6 +1850,7 @@ export interface CustomElementsDefineOptions {
     exclude?: string[];
     resourcesUrl?: string;
     syncQueue?: boolean;
+    /** @deprecated in-favour of `setTagTransformer` and `transformTag` */
     transformTagName?: (tagName: string) => string;
     jmp?: (c: Function) => any;
     raf?: (c: FrameRequestCallback) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uh-design-system/component-library",
-  "version": "1.4.0-rc.2",
+  "version": "1.4.0",
   "publishConfig": {
     "access": "public"
   },
@@ -73,7 +73,7 @@
     "@material-symbols/svg-700": "^0.30.0",
     "@pxtrn/storybook-addon-docs-stencil": "^8.0.0",
     "@stencil/core": "^4.38.2",
-    "@stencil/react-output-target": "1.4.1",
+    "@stencil/react-output-target": "1.4.2",
     "@stencil/sass": "^3.2.2",
     "@stencil/store": "^2.2.0",
     "@storybook/addon-a11y": "^8.6.14",
@@ -110,5 +110,5 @@
     "ts-node": "^10.9.2"
   },
   "license": "MIT",
-  "gitHead": "30dedb0ab72de01866178074d3a6fd015c80c82c"
+  "gitHead": "726b50fd598aee4d49cdc51e8de4b1d1f73fb6e1"
 }

package/dist/cjs/ariaDeprecationFactory-BWenwbgw.js

@@ -1,29 +0,0 @@
-'use strict';
-
-var index = require('./index-Cwc95KFn.js');
-var attributes = require('./attributes-5eBKMo1N.js');
-
-const ariaDeprecationFactory = (Base) => {
-    const AriaDeprecation = class extends Base {
-        constructor(hostRef) {
-            super();
-            index.registerInstance(this, hostRef);
-        }
-        dsMuteAriaDeprecationWarning = false;
-        getDeprecationWarningForAriaAttribute = (el, attr) => {
-            if (this.dsMuteAriaDeprecationWarning)
-                return;
-            if (el.hasAttribute(attr)) {
-                console.warn(`[DEPRECATION] The use of the '${attr}' attribute on <${el.tagName.toLowerCase()}> is deprecated and will be removed in a future version (tba). Please refer to the documentation for alternative ds-prefixed property name. If the attribute you are using does not have a corresponding ds-prefixed property name, please contact developers at #designsystem Slack channel. In the future, any aria-attributes set on the web component will remain on the host element. To mute all warnings on this component instance, set the "dsMuteAriaDeprecationWarning" property.`);
-            }
-        };
-        getDeprecationWarningsForAriaAttributes = (el) => {
-            if (this.dsMuteAriaDeprecationWarning)
-                return;
-            attributes.ariaAttributes.forEach(attr => this.getDeprecationWarningForAriaAttribute(el, attr));
-        };
-    };
-    return AriaDeprecation;
-};
-
-exports.ariaDeprecationFactory = ariaDeprecationFactory;

package/dist/cjs/controlUtils-BU68DU8D.js

@@ -1,421 +0,0 @@
-'use strict';
-
-var store = require('./store-CZlFszsx.js');
-
-const valueMissing = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Täytä tämä kenttä.';
-        case 'sv':
-            return 'Fyll i det här fältet.';
-        default:
-            return 'Fill in this field.';
-    }
-};
-const typeMismatch = (opts) => {
-    if (opts?.type === 'email') {
-        return emailMismatch();
-    }
-    if (opts?.type === 'url') {
-        return urlMismatch();
-    }
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Syötä arvo oikeassa muodossa.';
-        case 'sv':
-            return 'Ange värdet i rätt format.';
-        default:
-            return 'Enter a value in the correct format.';
-    }
-};
-const emailMismatch = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Syötä sähköpostiosoite oikeassa muodossa (esim. nimi@helsinki.fi).';
-        case 'sv':
-            return 'Ange e-postadressen i rätt format (t.ex. namn@helsinki.fi).';
-        default:
-            return 'Enter the email address in the correct format (e.g. name@helsinki.fi).';
-    }
-};
-const urlMismatch = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Syötä verkkosivun osoite oikeassa muodossa (esim. https://helsinki.fi).';
-        case 'sv':
-            return 'Ange webbadressen i rätt formatet (t.ex. https://helsinki.fi).';
-        default:
-            return 'Enter the web address in the correct format (e.g. https://helsinki.fi).';
-    }
-};
-const patternMismatch = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Syötä arvo vaaditussa muodossa.';
-        case 'sv':
-            return 'Ange värdet i det angivna formatet.';
-        default:
-            return 'Match the requested format.';
-    }
-};
-const tooLong = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Lyhennä tekstiä.';
-        case 'sv':
-            return 'Förkorta texten.';
-        default:
-            return 'Shorten your text.';
-    }
-};
-const tooShort = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Pidennä tekstiä.';
-        case 'sv':
-            return 'Förläng texten.';
-        default:
-            return 'Lengthen your text.';
-    }
-};
-const rangeUnderflow = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Syötä suurempi arvo.';
-        case 'sv':
-            return 'Ange ett större värde.';
-        default:
-            return 'Enter a larger value.';
-    }
-};
-const rangeOverflow = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Syötä pienempi arvo.';
-        case 'sv':
-            return 'Ange ett mindre värde.';
-        default:
-            return 'Enter a smaller value.';
-    }
-};
-const stepMismatch = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Syötä sallittu arvo.';
-        case 'sv':
-            return 'Ange ett tillåtet värde.';
-        default:
-            return 'Enter an allowed value.';
-    }
-};
-const badInput = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Anna kelvollinen arvo.';
-        case 'sv':
-            return 'Ange ett giltigt värde.';
-        default:
-            return 'Enter a valid value.';
-    }
-};
-const validityMessage = (flag, opts) => {
-    switch (flag) {
-        case 'valueMissing':
-            return valueMissing();
-        case 'typeMismatch':
-            return typeMismatch(opts);
-        case 'patternMismatch':
-            return patternMismatch();
-        case 'tooLong':
-            return tooLong();
-        case 'tooShort':
-            return tooShort();
-        case 'rangeUnderflow':
-            return rangeUnderflow();
-        case 'rangeOverflow':
-            return rangeOverflow();
-        case 'stepMismatch':
-            return stepMismatch();
-        case 'badInput':
-            return badInput();
-        default:
-            return '';
-    }
-};
-const getOptionalText = (text, optionalText) => {
-    let defaultText = '(optional)';
-    switch (store.getLanguage()) {
-        case 'fi':
-            defaultText = '(valinnainen)';
-            break;
-        case 'sv':
-            defaultText = '(valfritt)';
-            break;
-    }
-    return [text, optionalText || defaultText].join(' ');
-};
-const getRequiredText = (text) => [text, '*'].join(' ');
-const atLeastOneOption = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Valitse vähintään yksi vaihtoehto.';
-        case 'sv':
-            return 'Välj minst ett alternativ.';
-        default:
-            return 'Select at least one option.';
-    }
-};
-const allOptions = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Valitse kaikki vaihtoehdot.';
-        case 'sv':
-            return 'Välj alla alternativ.';
-        default:
-            return 'Select all options.';
-    }
-};
-const removeSelection = (capitalizeFirstLetter = false) => {
-    let text = '';
-    switch (store.getLanguage()) {
-        case 'fi':
-            text = 'poista valinta';
-            break;
-        case 'sv':
-            text = 'ta bort val';
-            break;
-        default:
-            text = 'remove selection';
-            break;
-    }
-    return capitalizeFirstLetter ? text[0].toUpperCase() + text.substring(1) : text;
-};
-const weCouldNotLoadOptions = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Emme voineet ladata vaihtoehtoja.';
-        case 'sv':
-            return 'Vi kunde inte ladda alternativen.';
-        default:
-            return 'We could not load options.';
-    }
-};
-const tryAgainOrIfTheProblemPersists = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Yritä uudelleen tai jos ongelma jatkuu, ota yhteyttä ylläpitoon.';
-        case 'sv':
-            return 'Försök igen eller om problemet kvarstår, kontakta supporten.';
-        default:
-            return 'Try again or if the problem persists, contact support.';
-    }
-};
-const loadingOptions = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Ladataan vaihtoehtoja...';
-        case 'sv':
-            return 'Laddar alternativ...';
-        default:
-            return 'Loading options...';
-    }
-};
-const searchOrSelectAnOption = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Kirjoita tai valitse...';
-        case 'sv':
-            return 'Sök eller välj...';
-        default:
-            return 'Search or select...';
-    }
-};
-const noResultsFound = (searchTerm) => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return searchTerm ? `Ei tuloksia haulle "${searchTerm}".` : `Ei tuloksia.`;
-        case 'sv':
-            return searchTerm ? `Inga resultat för sökningen "${searchTerm}".` : `Inga resultat.`;
-        default:
-            return searchTerm ? `No results found for "${searchTerm}".` : `No results found.`;
-    }
-};
-const tryADifferentSearchTerm = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Kokeile toista hakusanaa.';
-        case 'sv':
-            return 'Prova ett annat sökord.';
-        default:
-            return 'Try a different search term.';
-    }
-};
-const thereAreOptionsToBrowse = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Vaihtoehtoja on selattavissa.';
-        case 'sv':
-            return 'Det finns alternativ att bläddra i.';
-        default:
-            return 'There are options to browse.';
-    }
-};
-const characterOverage = (overage) => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return `${overage} merkkiä liian pitkä.`;
-        case 'sv':
-            return `${overage} tecken för mycket.`;
-        default:
-            return `${overage} characters too many.`;
-    }
-};
-const charactersRemaining = (remaining) => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return `${remaining} merkkiä jäljellä.`;
-        case 'sv':
-            return `${remaining} tecken kvar.`;
-        default:
-            return `${remaining} characters remaining.`;
-    }
-};
-const itemsShortage = (shortage) => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            if (shortage === 1) {
-                return `${shortage} valinta liian vähän.`;
-            }
-            return `${shortage} valintaa liian vähän.`;
-        case 'sv':
-            return `${shortage} val för lite.`;
-        default:
-            if (shortage === 1) {
-                return `${shortage} item too few.`;
-            }
-            return `${shortage} items too few.`;
-    }
-};
-const itemsOverage = (overage) => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            if (overage === 1) {
-                return `${overage} valinta liikaa.`;
-            }
-            return `${overage} valintaa liikaa.`;
-        case 'sv':
-            return `${overage} val för många.`;
-        default:
-            if (overage === 1) {
-                return `${overage} item too many.`;
-            }
-            return `${overage} items too many.`;
-    }
-};
-const clearField = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Tyhjennä kenttä';
-        case 'sv':
-            return 'Rensa fält';
-        default:
-            return 'Clear field';
-    }
-};
-const showPassword = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Näytä salasana';
-        case 'sv':
-            return 'Visa lösenord';
-        default:
-            return 'Show password';
-    }
-};
-const hidePassword = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Piilota salasana';
-        case 'sv':
-            return 'Dölj lösenord';
-        default:
-            return 'Hide password';
-    }
-};
-const selectAnOption = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Valitse vaihtoehto';
-        case 'sv':
-            return 'Välj alternativ';
-        default:
-            return 'Select an option';
-    }
-};
-const selections = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'valintaa';
-        case 'sv':
-            return 'val';
-        default:
-            return 'selections';
-    }
-};
-const multiselectable = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'monivalinta';
-        case 'sv':
-            return 'flerval';
-        default:
-            return 'multiselectable';
-    }
-};
-const ellipsis = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Kolme pistettä';
-        case 'sv':
-            return 'Tre punkter';
-        default:
-            return 'Ellipsis';
-    }
-};
-const openDatePicker = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Avaa päivämäärävalitsin';
-        case 'sv':
-            return 'Öppna datumväljare';
-        default:
-            return 'Open date picker';
-    }
-};
-
-exports.allOptions = allOptions;
-exports.atLeastOneOption = atLeastOneOption;
-exports.characterOverage = characterOverage;
-exports.charactersRemaining = charactersRemaining;
-exports.clearField = clearField;
-exports.ellipsis = ellipsis;
-exports.getOptionalText = getOptionalText;
-exports.getRequiredText = getRequiredText;
-exports.hidePassword = hidePassword;
-exports.itemsOverage = itemsOverage;
-exports.itemsShortage = itemsShortage;
-exports.loadingOptions = loadingOptions;
-exports.multiselectable = multiselectable;
-exports.noResultsFound = noResultsFound;
-exports.openDatePicker = openDatePicker;
-exports.removeSelection = removeSelection;
-exports.searchOrSelectAnOption = searchOrSelectAnOption;
-exports.selectAnOption = selectAnOption;
-exports.selections = selections;
-exports.showPassword = showPassword;
-exports.thereAreOptionsToBrowse = thereAreOptionsToBrowse;
-exports.tooLong = tooLong;
-exports.tryADifferentSearchTerm = tryADifferentSearchTerm;
-exports.tryAgainOrIfTheProblemPersists = tryAgainOrIfTheProblemPersists;
-exports.validityMessage = validityMessage;
-exports.weCouldNotLoadOptions = weCouldNotLoadOptions;

package/dist/cjs/cx-BxEHiZno.js

@@ -1,7 +0,0 @@
-'use strict';
-
-var index = require('./index-Cwc95KFn.js');
-
-const cx = (className) => `${className}__${index.Env.PACKAGE_VERSION}`;
-
-exports.cx = cx;