@uh-design-system/component-library 0.5.2 → 0.6.0

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

@@ -260,6 +260,25 @@ export declare function setPlatformHelpers(helpers: {
  * @returns the base path
  */
 export declare function getAssetPath(path: string): string;
+/**
+ * Method to render a virtual DOM tree to a container element.
+ *
+ * @example
+ * ```tsx
+ * import { render } from '@stencil/core';
+ *
+ * const vnode = (
+ *   <div>
+ *     <h1>Hello, world!</h1>
+ *   </div>
+ * );
+ * render(vnode, document.body);
+ * ```
+ *
+ * @param vnode - The virtual DOM tree to render
+ * @param container - The container element to render the virtual DOM tree to
+ */
+export declare function render(vnode: VNode, container: Element): void;
 /**
  * Used to manually set the base path where assets can be found. For lazy-loaded
  * builds the asset path is automatically set and assets copied to the correct
@@ -826,6 +845,7 @@ export declare namespace JSXBase {
     }
     interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
         open?: boolean;
+        name?: string;
         onToggle?: (event: Event) => void;
     }
     interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -1661,6 +1681,8 @@ export declare namespace JSXBase {
         onTransitionRunCapture?: (event: TransitionEvent) => void;
         onTransitionStart?: (event: TransitionEvent) => void;
         onTransitionStartCapture?: (event: TransitionEvent) => void;
+        [key: `aria-${string}`]: string | boolean | undefined;
+        [key: `aria${string}`]: string | boolean | undefined;
     }
 }
 export interface JSXAttributes<T = Element> {

package/dist/types/store.d.ts

@@ -1,10 +1,15 @@
 type Validation = 'client' | 'server';
+type Language = 'fi' | 'sv' | 'en';
 interface ConfigurationOptions {
     validation?: Validation;
+    language?: Language;
 }
 declare const state: {
     validation?: Validation;
+    language?: Language;
 };
 export declare const isValidation: (validation: Validation) => boolean;
-export declare const configure: ({ validation }: ConfigurationOptions) => void;
+export declare const getLanguage: () => Language;
+export declare const setLanguage: (language: Language) => void;
+export declare const configure: ({ validation, language }: ConfigurationOptions) => void;
 export default state;

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

@@ -6,4 +6,4 @@ export declare const ariaAttributes: readonly ["role", "aria-activedescendant",
 export type AriaKey = (typeof ariaAttributes)[number];
 export declare const getAriaAttributeArgTypes: (attrs: AriaKey[]) => {};
 export declare const inheritAriaAttributes: (el: HTMLElement, ignoreList?: AriaKey[]) => Attributes;
-export declare const inheritAttributes: (component: Record<string, any>, elem: HTMLElement) => Attributes;
+export declare const inheritAttributes: (component: Record<string, any>, elem: HTMLElement, attrsToIgnore?: string[]) => Attributes;

package/dist/types/utils/button/buttonUtils.d.ts

@@ -0,0 +1 @@
+export declare function handleButtonLoading(buttonElement: HTMLElement, originalValue: string, loadValue: string, loadingDuration?: number): void;

package/dist/types/utils/colours/colourTypes.d.ts

@@ -12,7 +12,7 @@ export declare const opaque: {
     '--ds-overlay-white': string;
 };
 export declare const semantic: {
-    '--ds-textColor': string;
-    '--ds-bgColor': string;
-    '--ds-borderColor': string;
+    $dsTextColor: string;
+    $dsBgColor: string;
+    $dsBorderColor: string;
 };

package/dist/types/utils/controls/controlUtils.d.ts

@@ -1,2 +1,4 @@
 export declare const getOptionalText: (text: string, optionalText?: string) => string;
 export declare const getRequiredText: (text: string) => string;
+export declare const atLeastOneOption: () => "Valitse vähintään yksi vaihtoehto." | "Vänligen välj minst ett alternativ." | "Please select at least one option.";
+export declare const allOptions: () => "Valitse kaikki vaihtoehdot." | "Vänligen välj alla alternativ." | "Please select all options.";

package/dist/types/utils/link/linkUtils.d.ts

@@ -1,2 +1,2 @@
 export declare const opensInNewTab: (target: string) => target is "_blank";
-export declare const visuallyHiddenAssistiveText: (lang: string) => "Avautuu uuteen välilehteen" | "Öppnas i en ny flik" | "Opens in a new tab";
+export declare const visuallyHiddenAssistiveText: () => "Avautuu uuteen välilehteen" | "Öppnas i en ny flik" | "Opens in a new tab";

package/dist/types/utils/spinner/spinnerUtils.d.ts

@@ -0,0 +1 @@
+export declare function toggleSpinnerLoad(buttonElement: HTMLElement, spinnerElement: HTMLElement, results: HTMLElement, buttonOriginalValue: string, loadValue: string, loadingDuration?: number): void;

package/dist/types/utils/tests/testUtils.d.ts

@@ -100,3 +100,4 @@ export declare const withinShadowRoot: (customElem: HTMLElement, selector: strin
 export declare const getShadowRoot: (customElem: HTMLElement, selector: string) => Promise<ShadowRoot>;
 export declare const getDsElem: (customElem: HTMLElement, selector: string) => Promise<Element>;
 export declare const addMockEventListener: (container: HTMLElement, selector: string, eventName: string) => import("@vitest/spy").Mock<(...args: any[]) => any>;
+export declare const sleep: (ms: number) => Promise<unknown>;

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

@@ -8,8 +8,9 @@ export declare const generateLoremIpsum: ({ paragraphs, wordsPerParagraph, start
 export declare const formatAs: (value: string, suffix: string) => string;
 export declare const formatAsRem: (value: string) => string;
 export declare const formatAsPx: (value: string) => string;
+export declare const slugifyText: (text: any) => any;
 export declare const remToPx: (remString: string) => string;
 export declare const pxToRem: (pxString: string) => string;
 export declare const litTemplateResultToString: (data: TemplateResult) => string;
 export declare function idGenerator(id: string): Generator<string, void, unknown>;
-export declare const getAriaLabel: (text: string, ariaLabel?: string) => string;
+export type ValueOf<T> = T[keyof T];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uh-design-system/component-library",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "publishConfig": {
     "access": "public"
   },
@@ -25,9 +25,14 @@
       "types": "./dist/components/*.d.ts"
     },
     "./loader": {
+      "types": "./dist/loader/index.d.ts",
       "import": "./dist/loader/index.js",
-      "require": "./dist/loader/index.cjs",
-      "types": "./dist/loader/index.d.ts"
+      "require": "./dist/loader/index.cjs"
+    },
+    "./hydrate": {
+      "types": "./dist/hydrate/index.d.ts",
+      "import": "./dist/hydrate/index.mjs",
+      "require": "./dist/hydrate/index.js"
     }
   },
   "repository": {
@@ -38,42 +43,45 @@
     "dist/"
   ],
   "scripts": {
-    "build": "stencil build",
-    "build.watch": "stencil build --watch",
-    "develop": "run-p build.watch storybook",
-    "start": "stencil build --dev --watch --serve",
-    "test-storybook": "test-storybook",
-    "test-storybook:update": "rm -rf __snapshots__ && test-storybook -u",
-    "test:unit": "stencil test --spec",
-    "test": "stencil test --spec --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll",
-    "generate": "stencil generate",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook-static": "storybook build",
-    "build-storybook": "run-s build build-storybook-static"
+    "build": "run-s stencil.build storybook.build styles.build",
+    "develop": "run-p stencil.build:watch storybook.dev",
+    "lint": "run-p eslint.lint stylelint.lint",
+    "eslint.lint": "eslint --ext .ts,.tsx,.js,.jsx ./src",
+    "stylelint.lint": "stylelint ./src/**/*.scss",
+    "stencil.build": "stencil build",
+    "stencil.build:watch": "stencil build --watch",
+    "stencil.test": "stencil test --spec",
+    "stencil.test:watch": "stencil test --spec --watchAll",
+    "stencil.generate": "stencil generate",
+    "storybook.dev": "storybook dev -p 6006",
+    "storybook.build": "storybook build",
+    "storybook.test": "test-storybook",
+    "storybook.test:update": "rm -rf __snapshots__ && storybook.test -- -u",
+    "styles.build": "sass src/styles/helpers.scss dist/styles/helpers.css && sass src/styles/variables.scss dist/styles/variables.css"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.5",
-    "@material-symbols/svg-700": "^0.26.0",
-    "@stencil/core": "^4.27.2",
-    "@stencil/react-output-target": "^0.8.2",
-    "@stencil/sass": "^3.1.9",
+    "@chromatic-com/storybook": "^3.2.6",
+    "@material-symbols/svg-700": "^0.30.0",
+    "@pxtrn/storybook-addon-docs-stencil": "^8.0.0",
+    "@stencil/core": "^4.29.2",
+    "@stencil/react-output-target": "^1.0.2",
+    "@stencil/sass": "^3.2.1",
     "@stencil/store": "^2.1.2",
-    "@storybook/addon-a11y": "^8.6.4",
-    "@storybook/addon-essentials": "^8.6.4",
-    "@storybook/addon-interactions": "^8.6.4",
-    "@storybook/addon-links": "^8.6.4",
+    "@storybook/addon-a11y": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.6",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
     "@storybook/blocks": "^8.4.5",
     "@storybook/manager-api": "^8.4.5",
     "@storybook/test": "^8.4.5",
-    "@storybook/test-runner": "^0.19.1",
+    "@storybook/test-runner": "^0.22.0",
     "@storybook/theming": "^8.4.5",
     "@storybook/web-components": "^8.4.5",
-    "@storybook/web-components-webpack5": "^8.6.4",
+    "@storybook/web-components-webpack5": "^8.6.12",
     "@types/jest": "^29.5.14",
-    "@types/node": "^16.18.119",
+    "@types/node": "^22.14.0",
     "axe-playwright": "^2.1.0",
     "classnames": "^2.5.1",
     "css-loader": "^7.1.2",
@@ -83,17 +91,13 @@
     "lit": "^3.2.1",
     "npm-run-all": "^4.1.5",
     "raw-loader": "^4.0.2",
-    "sass": "^1.85.1",
+    "sass": "^1.86.3",
     "sass-loader": "^16.0.5",
     "stencil-inline-svg": "^1.1.0",
-    "storybook": "^8.6.4",
+    "storybook": "^8.6.12",
     "storybook-dark-mode": "^4.0.2",
     "style-loader": "^4.0.0"
   },
-  "overrides": {
-    "rimraf": "^4.0.0",
-    "glob": "^9.0.0"
-  },
   "license": "MIT",
-  "gitHead": "eed49403d98c03e19f57b8b391c9c9057d03b7c0"
+  "gitHead": "1026e4e8961028eed68d867686cfa134fda65f88"
 }

package/dist/cjs/controlUtils-041de0fd.js

@@ -1,7 +0,0 @@
-'use strict';
-
-const getOptionalText = (text, optionalText) => [text, Boolean(optionalText) ? optionalText : '(optional)'].join(' ');
-const getRequiredText = (text) => [text, '*'].join(' ');
-
-exports.getOptionalText = getOptionalText;
-exports.getRequiredText = getRequiredText;