@uh-design-system/component-library 0.2.0-alpha.0 → 0.2.1-alpha.0

package/dist/esm/loader.js

@@ -1,5 +1,5 @@
-import { b as bootstrapLazy } from './index-1d0a6586.js';
-export { s as setNonce } from './index-1d0a6586.js';
+import { b as bootstrapLazy } from './index-dfeefc7e.js';
+export { s as setNonce } from './index-dfeefc7e.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 const defineCustomElements = async (win, options) => {

package/dist/loader/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "uh-component-library-loader",
+  "name": "component-library-loader",
   "private": true,
   "typings": "./index.d.ts",
   "module": "./index.js",

package/dist/types/components/01-base-components/ds-accordion/stories/ds-accordion.examples.stories.d.ts

@@ -1,4 +1,3 @@
-/** src/components/01-base-components/ds-accordion/stories/ds-accordion.examples.stories.ts */
 import { Meta, StoryObj } from '@storybook/web-components';
 import { DsAccordion } from '../ds-accordion';
 declare const meta: Meta<typeof DsAccordion.prototype>;

package/dist/types/components/01-base-components/ds-accordion/stories/ds-accordion.features.stories.d.ts

@@ -1,4 +1,3 @@
-/** src/components/01-base-components/ds-accordion/stories/ds-accordion.features.stories.ts */
 import { Meta, StoryObj } from '@storybook/web-components';
 import { DsAccordion } from '../ds-accordion';
 declare const meta: Meta<typeof DsAccordion.prototype>;

package/dist/types/components/01-base-components/ds-accordion/stories/ds-accordion.stories.d.ts

@@ -1,4 +1,3 @@
-/** src/components/01-base-components/ds-accordion/stories/ds-accordion.stories.ts */
 import { Meta, StoryObj } from '@storybook/web-components';
 import { DsAccordion } from '../ds-accordion';
 declare const meta: Meta<typeof DsAccordion.prototype>;

package/dist/types/components/01-base-components/ds-button/ds-button.d.ts

@@ -3,19 +3,6 @@ export declare class DsButton {
     private buttonEl;
     private pressedKeys;
     el: HTMLElement;
-    /**
-     * Button text content.
-     *
-     * Uses a text prop instead of `<slot />` to avoid triggering another render to set correct CSS classes just after initial load.
-     *
-     * @example
-     *
-     * <ds-button value="button"></ds-button> // Do this
-     * <ds-button>button</ds-button> // Instead of this
-     *
-     * @see {@link https://stackoverflow.com/a/52445966}
-     * @see {@link https://github.com/ionic-team/stencil/issues/399}
-     */
     value: string;
     variant: 'primary' | 'secondary' | 'supplementary';
     colour: 'blue' | 'black' | 'white';

package/dist/types/components/01-base-components/ds-button/stories/ds-button.features.stories.d.ts

@@ -1,4 +1,3 @@
-/** src/components/01-base-components/ds-button/ds-button.stories.ts */
 import { Meta, StoryObj } from '@storybook/web-components';
 import { DsButton } from '../ds-button';
 declare const meta: Meta<typeof DsButton.prototype>;

package/dist/types/components/01-base-components/ds-button/stories/ds-button.stories.d.ts

@@ -1,4 +1,3 @@
-/** src/components/01-base-components/ds-button/ds-button.stories.ts */
 import { Meta, StoryObj } from '@storybook/web-components';
 import { DsButton } from '../ds-button';
 declare const meta: Meta<typeof DsButton.prototype>;

package/dist/types/components/01-base-components/ds-icon/ds-icon.stories.d.ts

@@ -1,4 +1,3 @@
-/** src/components/01-base-components/ds-icon/ds-icon.stories.ts */
 import { Meta, StoryObj } from '@storybook/web-components';
 import { DsIcon } from './ds-icon';
 declare const meta: Meta<typeof DsIcon.prototype>;

package/dist/types/components/01-base-components/ds-text-input/ds-text-input.examples.stories.d.ts

@@ -1,4 +1,3 @@
-/** src/components/01-base-components/ds-text-input/ds-text-input.examples.stories.ts */
 import { Meta, StoryObj } from '@storybook/web-components';
 import { DsTextInput } from './ds-text-input';
 declare const meta: Meta<typeof DsTextInput.prototype>;

package/dist/types/components/01-base-components/ds-text-input/ds-text-input.features.stories.d.ts

@@ -1,4 +1,3 @@
-/** src/components/01-base-components/ds-text-input/ds-text-input.features.stories.ts */
 import { Meta, StoryObj } from '@storybook/web-components';
 import { DsTextInput } from './ds-text-input';
 declare const meta: Meta<typeof DsTextInput.prototype>;

package/dist/types/components/01-base-components/ds-text-input/ds-text-input.stories.d.ts

@@ -1,4 +1,3 @@
-/** src/components/01-base-components/ds-text-input/ds-text-input.stories.ts */
 import { Meta, StoryObj } from '@storybook/web-components';
 import { DsTextInput } from './ds-text-input';
 declare const meta: Meta<typeof DsTextInput.prototype>;

package/dist/types/components/01-base-components/ds-visually-hidden/ds-visually-hidden.stories.d.ts

@@ -1,4 +1,3 @@
-/** src/components/01-base-components/ds-input/ds-input.stories.ts */
 import { Meta, StoryObj } from '@storybook/web-components';
 import { DsVisuallyHidden } from './ds-visually-hidden';
 declare const meta: Meta<typeof DsVisuallyHidden.prototype>;

package/dist/types/index.d.ts

@@ -1,10 +1 @@
-/**
- * @fileoverview entry point for your component library
- *
- * This is the entry point for your component library. Use this file to export utilities,
- * constants or data structure that accompany your components.
- *
- * DO NOT use this file to export your components. Instead, use the recommended approaches
- * to consume components of this package as outlined in the `README.md`.
- */
 export type * from './components.d.ts';

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

@@ -1,39 +1,8 @@
-/**
- * Copied from https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts
- */
 export type Attributes = {
     [key: string]: any;
 };
-/**
- * Copied from https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts
- *
- * Elements inside of web components sometimes need to inherit global attributes
- * set on the host. For example, the inner input in `ion-input` should inherit
- * the `title` attribute that developers set directly on `ion-input`. This
- * helper function should be called in componentWillLoad and assigned to a variable
- * that is later used in the render function.
- *
- * This does not need to be reactive as changing attributes on the host element
- * does not trigger a re-render.
- */
 export declare const inheritAttributes: (el: HTMLElement, attributes?: string[]) => Attributes;
-/**
- * Copied from https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts
- *
- * List of available ARIA attributes + `role`.
- * Removed deprecated attributes.
- * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes
- */
 export declare const ariaAttributes: readonly ["role", "aria-activedescendant", "aria-atomic", "aria-autocomplete", "aria-braillelabel", "aria-brailleroledescription", "aria-busy", "aria-checked", "aria-colcount", "aria-colindex", "aria-colindextext", "aria-colspan", "aria-controls", "aria-current", "aria-describedby", "aria-description", "aria-details", "aria-disabled", "aria-errormessage", "aria-expanded", "aria-flowto", "aria-haspopup", "aria-hidden", "aria-invalid", "aria-keyshortcuts", "aria-label", "aria-labelledby", "aria-level", "aria-live", "aria-multiline", "aria-multiselectable", "aria-orientation", "aria-owns", "aria-placeholder", "aria-posinset", "aria-pressed", "aria-readonly", "aria-relevant", "aria-required", "aria-roledescription", "aria-rowcount", "aria-rowindex", "aria-rowindextext", "aria-rowspan", "aria-selected", "aria-setsize", "aria-sort", "aria-valuemax", "aria-valuemin", "aria-valuenow", "aria-valuetext"];
 export type AriaKey = (typeof ariaAttributes)[number];
 export declare const getAriaAttributeArgTypes: (attrs: AriaKey[]) => {};
-/**
- * Copied from https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts
- *
- * Returns an array of aria attributes that should be copied from
- * the shadow host element to a target within the light DOM.
- * @param el The element that the attributes should be copied from.
- * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.
- * Use this in instances where we manually specify aria attributes on the `<Host>` element.
- */
 export declare const inheritAriaAttributes: (el: HTMLElement, ignoreList?: AriaKey[]) => Attributes;

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

@@ -1,7 +1,3 @@
-/**
- * Utility function for running storybook interaction tests in Shadow DOM containers.
- * Logic taken from https://github.com/storybookjs/testing-library/issues/24#issuecomment-1593709872
- */
 export declare const withinShadowRoot: (customElem: HTMLElement, selector: string) => Promise<{
     getByLabelText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions): ReturnType<import("@testing-library/dom").GetByText<T>>;
     getAllByLabelText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions): ReturnType<import("@testing-library/dom").AllByText<T>>;

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

@@ -1,17 +1,3 @@
-/**
- * Generates Lorem Ipsum text with configurable options
- * @param {Object} options - Configuration options for text generation
- * @param {number} [options.paragraphs=1] - Number of paragraphs to generate
- * @param {number} [options.wordsPerParagraph=50] - Average number of words per paragraph
- * @param {boolean} [options.startWithLorem=true] - Whether to start with "Lorem ipsum dolor sit amet"
- * @returns {string} Generated Lorem Ipsum text
- *
- *  Example usage:
- *  generateLoremIpsum(); // 1 paragraph, starts with Lorem Ipsum
- *  generateLoremIpsum({ paragraphs: 3, wordsPerParagraph: 30 });
- *  generateLoremIpsum({ startWithLorem: false });
- *  generateLoremIpsum({ consistent: true }); // Generate same text everytime
- */
 export declare function generateLoremIpsum({ paragraphs, wordsPerParagraph, startWithLorem, consistent }?: {
     paragraphs?: number;
     wordsPerParagraph?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uh-design-system/component-library",
-  "version": "0.2.0-alpha.0",
+  "version": "0.2.1-alpha.0",
   "publishConfig": {
     "access": "public"
   },
@@ -10,11 +10,11 @@
   "types": "dist/types/index.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
-  "unpkg": "dist/uh-component-library/uh-component-library.esm.js",
+  "unpkg": "dist/component-library/component-library.esm.js",
   "exports": {
     ".": {
-      "import": "./dist/uh-component-library/uh-component-library.esm.js",
-      "require": "./dist/uh-component-library/uh-component-library.cjs.js"
+      "import": "./dist/component-library/component-library.esm.js",
+      "require": "./dist/component-library/component-library.cjs.js"
     }
   },
   "repository": {
@@ -22,9 +22,7 @@
     "url": "https://version.helsinki.fi/uh-design-system/component-library.git"
   },
   "files": [
-    "dist/",
-    "react-wrapper/",
-    "docs/"
+    "dist/"
   ],
   "scripts": {
     "build": "stencil build",
@@ -70,7 +68,6 @@
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "jest-image-snapshot": "^6.4.0",
-    "lerna": "^8.1.9",
     "lit": "^3.2.1",
     "raw-loader": "^4.0.2",
     "sass": "^1.81.0",
@@ -85,5 +82,5 @@
     "glob": "^9.0.0"
   },
   "license": "MIT",
-  "gitHead": "bcfa85288c448bb2d737020d08bd14e3fa4f0d86"
+  "gitHead": "353e386b7e47a0b4331a26bfe3a07b16754f24b3"
 }

package/README.md

@@ -1,13 +0,0 @@
-# University of Helsinki Design System Component Library
-
-This project is a component library for the University of Helsinki Design System. It provides reusable components to ensure a consistent design across various applications.
-
-> **Warning:** This work is still in progress. At the moment, all the components should not be used in production.
-
-## Documentation
-
-- [DEVELOPMENT.md](docs/DEVELOPMENT.md)
-- [DEPLOYMENT.md](docs/DEPLOYMENT.md)
-- [TESTING.md](docs/TESTING.md)
-- [PUBLISHING.md](docs/PUBLISHING.md)
-- [USAGE.md](docs/USAGE.md)

package/dist/uh-component-library/ds-button_2.entry.js

@@ -1 +0,0 @@
-import{r as o,h as t,g as r}from"./index-1d0a6586.js";import{c as a}from"./index-097075ad.js";const s=(o,t=[])=>{const r={};return t.forEach((t=>{o.hasAttribute(t)&&(null!==o.getAttribute(t)&&(r[t]=o.getAttribute(t)),o.removeAttribute(t))})),r},e=["role","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-errormessage","aria-expanded","aria-flowto","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext"],n=class{constructor(t){o(this,t),this.inheritedAttributes={},this.pressedKeys=new Set,this.handleKeyDown=o=>{if(!o.repeat)switch(o.key){case"Enter":case" ":this.pressedKeys.add(o.key),this.buttonEl.classList.add(`${this.colour}--active`)}},this.handleKeyUp=o=>{switch(o.key){case"Enter":case" ":this.pressedKeys.delete(o.key),0===this.pressedKeys.size&&this.buttonEl.classList.remove(`${this.colour}--active`)}},this.value="",this.variant="primary",this.colour="blue",this.size="medium",this.fontWeight="normal",this.icon="",this.iconPosition="start",this.type="button",this.disabled=!1,this.ariaDisabled="false"}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},((o,t)=>{let r=[...e];return t&&t.length>0&&(r=r.filter((o=>!t.includes(o)))),s(o,r)})(this.el,["aria-disabled"])),s(this.el,["autofocus","form","formaction","formenctype","formmethod","formnovalidate","formtarget","name","popovertarget","popovertargetaction"]))}render(){const o=a(`${this.variant} ${this.colour} ${this.size}`,{"icon-start":this.icon&&"start"===this.iconPosition&&this.value,"icon-end":this.icon&&"end"===this.iconPosition&&this.value,"icon-only":this.icon&&!this.value}),r="small"===this.size?"1rem":void 0;return t("button",Object.assign({key:"1230108c308cc8a89f8202bef69e839e36b6912d",ref:o=>this.buttonEl=o,onKeyDown:this.handleKeyDown,onKeyUp:this.handleKeyUp,class:o,style:{fontWeight:this.fontWeight},type:this.type,"aria-disabled":this.disabled||"true"===this.ariaDisabled?"true":"false"},this.inheritedAttributes),t("slot",{key:"bb67886e636e7a5294a6fbbde4a8a013e1ace3ce",name:"prefix"},this.icon&&"start"===this.iconPosition&&t("ds-icon",{key:"6e93f6095ee4482d5026b42a67b7591712206146",name:this.icon,size:r})),this.value&&t("span",{key:"833424437f89ace4253e9daef6d8cda409563a4a",class:"button-value"},this.value),t("slot",{key:"162e459206000c3b1b5b4ede761f5600f88b3de1",name:"suffix"},this.icon&&"end"===this.iconPosition&&t("ds-icon",{key:"2e9bff6bdc4d5023374916bcbdc11151270113b6",name:this.icon,size:r})))}get el(){return r(this)}};n.style=".sc-ds-button-h{display:inline-block}button.sc-ds-button{align-items:center;border-radius:0;border-style:solid;display:flex;font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-bold);outline:4px solid transparent;border-width:var(--ds-borderWidth-thick);font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}button.sc-ds-button:focus{outline-offset:2px;outline-width:2px}button.icon-only.sc-ds-button{padding-left:0;padding-right:0;aspect-ratio:1;justify-content:center}button.sc-ds-button .button-value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}button.sc-ds-button ds-icon.sc-ds-button{height:1.5rem}button.icon-start.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}button.icon-end.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}button.primary.blue.sc-ds-button{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}button.primary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-primary-hover)}button.primary.blue.sc-ds-button:active,button.primary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-primary-active)}button.primary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.primary.blue[aria-disabled=true].sc-ds-button,button.primary.blue.disabled.sc-ds-button,button.primary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}button.primary.black.sc-ds-button{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}button.primary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-black-hover)}button.primary.black.sc-ds-button:active,button.primary.black--active.sc-ds-button{background-color:var(--ds-bgColor-black-active)}button.primary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.primary.black[aria-disabled=true].sc-ds-button,button.primary.black.disabled.sc-ds-button,button.primary.black.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}button.primary.white.sc-ds-button{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}button.primary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-white-hover)}button.primary.white.sc-ds-button:active,button.primary.white--active.sc-ds-button{background-color:var(--ds-bgColor-white-active)}button.primary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white)}button.primary.white[aria-disabled=true].sc-ds-button,button.primary.white.disabled.sc-ds-button,button.primary.white.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}button.secondary.blue.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}button.secondary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}button.secondary.blue.sc-ds-button:active,button.secondary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}button.secondary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.secondary.blue[aria-disabled=true].sc-ds-button,button.secondary.blue.disabled.sc-ds-button,button.secondary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}button.secondary.black.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}button.secondary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}button.secondary.black.sc-ds-button:active,button.secondary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}button.secondary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.secondary.black[aria-disabled=true].sc-ds-button,button.secondary.black.disabled.sc-ds-button,button.secondary.black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}button.secondary.white.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}button.secondary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}button.secondary.white.sc-ds-button:active,button.secondary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}button.secondary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white)}button.secondary.white[aria-disabled=true].sc-ds-button,button.secondary.white.disabled.sc-ds-button,button.secondary.white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}button.supplementary.blue.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-primary);padding-right:0;padding-left:0}button.supplementary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}button.supplementary.blue.sc-ds-button:active,button.supplementary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}button.supplementary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.supplementary.blue[aria-disabled=true].sc-ds-button,button.supplementary.blue.disabled.sc-ds-button,button.supplementary.blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}button.supplementary.black.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-default);padding-right:0;padding-left:0}button.supplementary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}button.supplementary.black.sc-ds-button:active,button.supplementary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}button.supplementary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.supplementary.black[aria-disabled=true].sc-ds-button,button.supplementary.black.disabled.sc-ds-button,button.supplementary.black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}button.supplementary.white.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-white);padding-right:0;padding-left:0}button.supplementary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}button.supplementary.white.sc-ds-button:active,button.supplementary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}button.supplementary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white)}button.supplementary.white[aria-disabled=true].sc-ds-button,button.supplementary.white.disabled.sc-ds-button,button.supplementary.white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onDark)}button.small.sc-ds-button{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall)}button.small.icon-only.sc-ds-button{width:32px}button.small.sc-ds-button ds-icon.sc-ds-button{height:1rem}";const d=class{constructor(t){o(this,t)}render(){return t("slot",{key:"390610148832811748f7700f0d438b257bdb354d"})}};d.style=":host{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";export{n as ds_button,d as ds_visually_hidden}

package/dist/uh-component-library/ds-text-input.entry.js

@@ -1 +0,0 @@
-import{r as t,h as i,F as s}from"./index-1d0a6586.js";import{c as e}from"./index-097075ad.js";function*n(t){let i=1;for(;;)yield`${t}-${i++}`}const r={search:"search"},a={search:({clearButtonVisible:t})=>t?"cancel_fill":"",password:({passwordInputVisible:t})=>t?"visibility_off_fill":"visibility_fill"},o=n("ds-assistive-text"),d=n("visually-hidden-assistive-text"),c=n("success-text"),l=n("error-text"),p=class{constructor(i){t(this,i),this.assistiveTextId=o.next().value,this.visuallyHiddenAssistiveTextId=d.next().value,this.successTextId=c.next().value,this.errorTextId=l.next().value,this.onActionButtonClicked=t=>{switch(t.stopPropagation(),this.type){case"password":return this.togglePasswordVisibility();case"search":this.clearInput();default:return}},this.label=void 0,this.placeholder=void 0,this.id="input",this.name=void 0,this.disabled=void 0,this.required=void 0,this.readonly=void 0,this.value=void 0,this.min=void 0,this.max=void 0,this.maxlength=void 0,this.pattern=void 0,this.autocomplete=void 0,this.errorText=void 0,this.successText=void 0,this.assistiveText=void 0,this.actionButtonAriaLabel=void 0,this.hiddenAssistiveText=void 0,this.prefixText=void 0,this.suffixText=void 0,this.icon="",this.type="text",this.ariaLabel=void 0,this.ariaLabelledBy=void 0,this.ariaDescribedby=void 0,this.hasFocus=!1,this.clearButtonVisible=!1,this.passwordInputVisible=!1,this.inputActive=!1}async togglePasswordVisibility(){return this.passwordInputVisible=!this.passwordInputVisible}async clearInput(){this.inputElement.value="",this.inputElement.focus(),this.clearButtonVisible=!1}renderValidityMessage(t){const s="success"===t?this.successTextId:this.errorTextId,e="success"===t?this.successText:this.errorText,n=t+"-text";return i("slot",{name:n},e&&i("div",{class:`${n}-container`},i("ds-icon",{name:"success"===t?"check_circle_fill":"warning_fill"}),i("small",{id:s,class:n},e)))}renderPrefixContent(){if(this.prefixText)return i("slot",{name:"prefix"},i("span",{class:"prefix"},this.prefixText));const t=this.icon||r[this.type];return t?i("slot",{name:"prefix"},i("ds-icon",{class:"prefix",name:t})):null}renderSuffixContent(){var t,s;if(this.suffixText)return i("slot",{name:"suffix"},i("span",{class:"suffix"},this.suffixText));const e=null!==(s=null===(t=a[this.type])||void 0===t?void 0:t.call(a,this))&&void 0!==s?s:"";return e?i("slot",{name:"suffix"},i("ds-button",{ref:t=>this.suffixButtonElement=t,variant:"supplementary",colour:"black",class:"suffix",disabled:!1,icon:e,onClick:this.onActionButtonClicked,"aria-pressed":"password"===this.type?this.passwordInputVisible:void 0,"aria-label":this.actionButtonAriaLabel})):null}handleInputContainerClick(t){t.target!==this.suffixButtonElement&&this.inputElement.focus()}render(){const t="password"===this.type&&this.passwordInputVisible?"text":this.type;return i(s,{key:"6d7c594001a3103009b407b8ff83d2c1280d014a"},i("div",{key:"76051b2e72023d0a11fe07f10390b787e7466f02",class:"label-container"},i("slot",{key:"3c6aa9d9ad95523cd241fddf19be9f3b61cc6a5e",name:"label"},i("label",{key:"9adea3cfcbd36030bdf66dd9ddc64a1483910c0f",class:e({required:this.required}),htmlFor:this.id},this.label)),i("slot",{key:"12466889750015207ac3f56159c70795e797d433",name:"help-text"},i("small",{key:"4c4ae48f06cb9633d5f306ae14da8ccc5d09699e",id:this.assistiveTextId},this.assistiveText),i("ds-visually-hidden",{key:"899469a328caf988e955bc2f3e4bc15664f01de3",id:this.visuallyHiddenAssistiveTextId},this.hiddenAssistiveText))),i("div",{key:"b8afbafcafc45a83b9bf177a09d585745ff2d7bf",onMouseDown:()=>this.inputActive=!0,onMouseUp:()=>this.inputActive=!1,onClick:t=>this.handleInputContainerClick(t),class:e("input-container",{disabled:this.disabled,readonly:this.readonly,valid:!!this.successText,invalid:!!this.errorText,focus:this.hasFocus,active:!!this.inputActive})},this.renderPrefixContent(),i("input",{key:"75b925eced73863f039c31f7c8abaf8996532f7c",ref:t=>this.inputElement=t,id:this.id,name:this.name,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledBy,"aria-describedby":this.ariaDescribedby||e(this.assistiveTextId,this.visuallyHiddenAssistiveTextId,{[this.successTextId]:this.successText,[this.errorTextId]:this.errorText}),disabled:this.disabled,required:this.required,readonly:this.readonly,value:this.value,type:t,min:this.min,max:this.max,maxlength:this.maxlength,pattern:this.pattern,placeholder:this.placeholder,autocomplete:this.autocomplete,onInput:t=>this.clearButtonVisible=!!t.target.value,onFocus:()=>this.hasFocus=!0,onBlur:()=>this.hasFocus=!1}),this.renderSuffixContent()),this.renderValidityMessage("error"),this.renderValidityMessage("success"))}};p.style='.sc-ds-text-input:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.sc-ds-text-input-h{display:block;width:288px}@media (min-width: 75rem){.sc-ds-text-input-h{width:320px}}.label-container.sc-ds-text-input{margin-block-end:var(--ds-spacing-2xSmall)}.label-container.sc-ds-text-input label.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-default)}.label-container.sc-ds-text-input label.required.sc-ds-text-input::after{content:" *";color:var(--ds-textColor-secondary)}.label-container.sc-ds-text-input small.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);display:block;margin-block-start:var(--ds-spacing-3xSmall);color:var(--ds-textColor-secondary)}.input-container.sc-ds-text-input{box-sizing:border-box;width:100%;display:inline-flex;position:relative;align-items:center;border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default);padding-inline:var(--ds-spacing-xSmall)}.input-container.invalid.sc-ds-text-input{background-color:var(--ds-palette-danger-light);border-color:var(--ds-borderColor-danger)}.input-container.valid.sc-ds-text-input{background-color:var(--ds-palette-success-light);border-color:var(--ds-borderColor-success)}.input-container.readonly.sc-ds-text-input,.input-container.disabled.sc-ds-text-input{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.input-container.sc-ds-text-input:has(input:active){outline:none}.input-container.sc-ds-text-input:has(input:active):not:has(input:disabled,input.sc-ds-text-input:readonly){border-color:var(--ds-borderColor-primary)}.input-container.active.sc-ds-text-input:not(.input-container.disabled,.input-container.readonly).sc-ds-text-input{border-color:var(--ds-borderColor-primary)}.input-container.sc-ds-text-input:hover:not(.input-container.disabled,.input-container.readonly.sc-ds-text-input,.input-container.active).sc-ds-text-input{border-color:var(--ds-borderColor-black)}.input-container.sc-ds-text-input:focus-within{outline-width:var(--ds-borderWidth-thin);outline-offset:1px;outline-style:solid;outline-color:var(--ds-palette-black)}.input-container.sc-ds-text-input:focus-within:not(.input-container:focus-within.invalid,.input-container.sc-ds-text-input:focus-within.valid,.input-container.sc-ds-text-input:focus-within.readonly){border-color:var(--ds-borderColor-primary)}.input-container.sc-ds-text-input:focus-within *.sc-ds-text-input>ds-button.suffix.sc-ds-text-input>button.sc-ds-text-input:focus-visible{background-clip:padding-box;outline-offset:-5px;box-shadow:none;height:var(--ds-spacing-xLarge);background-color:var(--ds-bgColor-transparent-onLight-hover)}.input-container.sc-ds-text-input>input.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);width:100%;box-sizing:border-box;background-color:unset;flex-grow:1;height:var(--ds-spacing-xLarge);line-height:var(--ds-fontSize-24);color:var(--ds-textColor-default);padding-block:var(--ds-spacing-4xSmall);border:none}.input-container.sc-ds-text-input>input.sc-ds-text-input:disabled{color:var(--ds-textColor-disabled-onLight)}.input-container.sc-ds-text-input>input.sc-ds-text-input:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.input-container.sc-ds-text-input>input.sc-ds-text-input::placeholder{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-secondary)}.input-container.sc-ds-text-input>input.sc-ds-text-input:focus{outline:none;border:none}.input-container.sc-ds-text-input>input[type=number].sc-ds-text-input{-moz-appearance:textfield}.input-container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-decoration,.input-container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-cancel-button,.input-container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-button,.input-container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-decoration,.input-container.sc-ds-text-input>input.sc-ds-text-input::-webkit-inner-spin-button,.input-container.sc-ds-text-input>input.sc-ds-text-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.input-container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input>input.sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.input-container.sc-ds-text-input:has(ds-button.suffix){padding-inline-end:unset}.input-container.sc-ds-text-input span.prefix.sc-ds-text-input,.input-container.sc-ds-text-input span.suffix.sc-ds-text-input{color:var(--ds-palette-black-70)}.input-container.sc-ds-text-input ds-icon.prefix.sc-ds-text-input,.input-container.sc-ds-text-input-s>[slot=prefix],.input-container .sc-ds-text-input-s>[slot=prefix]{height:1.5rem;color:var(--ds-textColor-default)}.input-container.sc-ds-text-input ds-button.suffix.sc-ds-text-input{margin-top:calc(var(--ds-spacing-3xSmall) * -1);margin-right:calc(var(--ds-spacing-4xSmall) * -1);max-height:40px}.error-text-container.sc-ds-text-input,.success-text-container.sc-ds-text-input{display:flex;align-items:center;margin-top:var(--ds-spacing-2xSmall);gap:var(--ds-spacing-2xSmall)}.error-text-container.sc-ds-text-input ds-icon.sc-ds-text-input,.success-text-container.sc-ds-text-input ds-icon.sc-ds-text-input{display:block;height:1.5rem}.error-text-container.sc-ds-text-input small.sc-ds-text-input,.success-text-container.sc-ds-text-input small.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.error-text-container.sc-ds-text-input{color:var(--ds-textColor-danger)}.success-text-container.sc-ds-text-input{color:var(--ds-textColor-success)}';export{p as ds_text_input}

package/dist/uh-component-library/index-1d0a6586.js

@@ -1,2 +0,0 @@
-var t=Object.defineProperty,e=new WeakMap,n=t=>e.get(t),o=(t,n)=>e.set(n.t=t,n),l=(t,e)=>e in t,s=(t,e)=>(0,console.error)(t,e),r=new Map,i=new Map,c="slot-fb{display:contents}slot-fb[hidden]{display:none}",f="http://www.w3.org/1999/xlink",u="undefined"!=typeof window?window:{},a=u.document||{head:{}},h={o:0,l:"",jmp:t=>t(),raf:t=>requestAnimationFrame(t),ael:(t,e,n,o)=>t.addEventListener(e,n,o),rel:(t,e,n,o)=>t.removeEventListener(e,n,o),ce:(t,e)=>new CustomEvent(t,e)},d=t=>Promise.resolve(t),p=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(t){}return!1})(),m=!1,y=[],v=[],$=(t,e)=>n=>{t.push(n),m||(m=!0,e&&4&h.o?S(w):h.raf(w))},b=t=>{for(let e=0;e<t.length;e++)try{t[e](performance.now())}catch(t){s(t)}t.length=0},w=()=>{b(y),b(v),(m=y.length>0)&&h.raf(w)},S=t=>d().then(t),g=$(v,!0),j={},k=t=>"object"==(t=typeof t)||"function"===t;function O(t){var e,n,o;return null!=(o=null==(n=null==(e=t.head)?void 0:e.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?o:void 0}((e,n)=>{for(var o in n)t(e,o,{get:n[o],enumerable:!0})})({},{err:()=>C,map:()=>x,ok:()=>E,unwrap:()=>R,unwrapErr:()=>T});var E=t=>({isOk:!0,isErr:!1,value:t}),C=t=>({isOk:!1,isErr:!0,value:t});function x(t,e){if(t.isOk){const n=e(t.value);return n instanceof Promise?n.then((t=>E(t))):E(n)}if(t.isErr)return C(t.value);throw"should never get here"}var M,A,P,R=t=>{if(t.isOk)return t.value;throw t.value},T=t=>{if(t.isErr)return t.value;throw t.value},F=(t,e,...n)=>{let o=null,l=null,s=null,r=!1,i=!1;const c=[],f=e=>{for(let n=0;n<e.length;n++)o=e[n],Array.isArray(o)?f(o):null!=o&&"boolean"!=typeof o&&((r="function"!=typeof t&&!k(o))&&(o+=""),r&&i?c[c.length-1].i+=o:c.push(r?H(null,o):o),i=r)};if(f(n),e){e.key&&(l=e.key),e.name&&(s=e.name);{const t=e.className||e.class;t&&(e.class="object"!=typeof t?t:Object.keys(t).filter((e=>t[e])).join(" "))}}if("function"==typeof t)return t(null===e?{}:e,c,D);const u=H(t,null);return u.u=e,c.length>0&&(u.h=c),u.p=l,u.m=s,u},H=(t,e)=>({o:0,v:t,i:e,$:null,h:null,u:null,p:null,m:null}),N={},D={forEach:(t,e)=>t.map(L).forEach(e),map:(t,e)=>t.map(L).map(e).map(U)},L=t=>({vattrs:t.u,vchildren:t.h,vkey:t.p,vname:t.m,vtag:t.v,vtext:t.i}),U=t=>{if("function"==typeof t.vtag){const e={...t.vattrs};return t.vkey&&(e.key=t.vkey),t.vname&&(e.name=t.vname),F(t.vtag,e,...t.vchildren||[])}const e=H(t.vtag,t.vtext);return e.u=t.vattrs,e.h=t.vchildren,e.p=t.vkey,e.m=t.vname,e},W=(t,e,n,o,s,r)=>{if(n!==o){let i=l(t,e),c=e.toLowerCase();if("class"===e){const e=t.classList,l=B(n),s=B(o);t["s-si"]&&s.indexOf(t["s-si"])<0&&s.push(t["s-si"]),e.remove(...l.filter((t=>t&&!s.includes(t)))),e.add(...s.filter((t=>t&&!l.includes(t))))}else if("style"===e){for(const e in n)o&&null!=o[e]||(e.includes("-")?t.style.removeProperty(e):t.style[e]="");for(const e in o)n&&o[e]===n[e]||(e.includes("-")?t.style.setProperty(e,o[e]):t.style[e]=o[e])}else if("key"===e);else if("ref"===e)o&&o(t);else if(i||"o"!==e[0]||"n"!==e[1]){const l=k(o);if((i||l&&null!==o)&&!s)try{if(t.tagName.includes("-"))t[e]=o;else{const l=null==o?"":o;"list"===e?i=!1:null!=n&&t[e]==l||("function"==typeof t.__lookupSetter__(e)?t[e]=l:t.setAttribute(e,l))}}catch(t){}let u=!1;c!==(c=c.replace(/^xlink\:?/,""))&&(e=c,u=!0),null==o||!1===o?!1===o&&""!==t.getAttribute(e)||(u?t.removeAttributeNS(f,e):t.removeAttribute(e)):(!i||4&r||s)&&!l&&(o=!0===o?"":o,u?t.setAttributeNS(f,e,o):t.setAttribute(e,o))}else if(e="-"===e[2]?e.slice(3):l(u,c)?c.slice(2):c[2]+e.slice(3),n||o){const l=e.endsWith(G);e=e.replace(I,""),n&&h.rel(t,e,n,l),o&&h.ael(t,e,o,l)}}},q=/\s/,B=t=>t?t.split(q):[],G="Capture",I=RegExp(G+"$"),V=(t,e,n)=>{const o=11===e.$.nodeType&&e.$.host?e.$.host:e.$,l=t&&t.u||j,s=e.u||j;for(const t of _(Object.keys(l)))t in s||W(o,t,l[t],void 0,n,e.o);for(const t of _(Object.keys(s)))W(o,t,l[t],s[t],n,e.o)};function _(t){return t.includes("ref")?[...t.filter((t=>"ref"!==t)),"ref"]:t}var z=!1,J=!1,K=!1,Q=!1,X=(t,e,n,o)=>{var l;const s=e.h[n];let r,i,c,f=0;if(z||(K=!0,"slot"===s.v&&(M&&o.classList.add(M+"-s"),s.o|=s.h?2:1)),null!==s.i)r=s.$=a.createTextNode(s.i);else if(1&s.o)r=s.$=a.createTextNode("");else if(r=s.$=a.createElement(!z&&2&s.o?"slot-fb":s.v),V(null,s,Q),!!r.getRootNode().querySelector("body")&&null!=M&&r["s-si"]!==M&&r.classList.add(r["s-si"]=M),ht(r,o),s.h)for(f=0;f<s.h.length;++f)i=X(t,s,f,r),i&&r.appendChild(i);return r["s-hn"]=P,3&s.o&&(r["s-sr"]=!0,r["s-cr"]=A,r["s-sn"]=s.m||"",r["s-rf"]=null==(l=s.u)?void 0:l.ref,c=t&&t.h&&t.h[n],c&&c.v===s.v&&t.$&&Y(t.$,!1)),r},Y=(t,e)=>{h.o|=1;const n=Array.from(t.__childNodes||t.childNodes);for(let t=n.length-1;t>=0;t--){const o=n[t];o["s-hn"]!==P&&o["s-ol"]&&(ut(ot(o),o,nt(o)),o["s-ol"].remove(),o["s-ol"]=void 0,o["s-sh"]=void 0,K=!0),e&&Y(o,e)}h.o&=-2},Z=(t,e,n,o,l,s)=>{let r,i=t["s-cr"]&&t["s-cr"].parentNode||t;for(i.shadowRoot&&i.tagName===P&&(i=i.shadowRoot);l<=s;++l)o[l]&&(r=X(null,n,l,t),r&&(o[l].$=r,ut(i,r,nt(e))))},tt=(t,e,n)=>{for(let o=e;o<=n;++o){const e=t[o];if(e){const t=e.$;ft(e),t&&(J=!0,t["s-ol"]?t["s-ol"].remove():Y(t,!0),t.remove())}}},et=(t,e,n=!1)=>!(t.v!==e.v||("slot"===t.v?"S"in t&&n&&8!==t.$.nodeType||t.m!==e.m:!n&&t.p!==e.p)),nt=t=>t&&t["s-ol"]||t,ot=t=>(t["s-ol"]?t["s-ol"]:t).parentNode,lt=(t,e,n=!1)=>{const o=e.$=t.$,l=t.h,s=e.h,r=e.i;let i;null===r?(("slot"!==e.v||z)&&V(t,e,Q),null!==l&&null!==s?((t,e,n,o,l=!1)=>{let s,r,i=0,c=0,f=0,u=0,a=e.length-1,h=e[0],d=e[a],p=o.length-1,m=o[0],y=o[p];for(;i<=a&&c<=p;)if(null==h)h=e[++i];else if(null==d)d=e[--a];else if(null==m)m=o[++c];else if(null==y)y=o[--p];else if(et(h,m,l))lt(h,m,l),h=e[++i],m=o[++c];else if(et(d,y,l))lt(d,y,l),d=e[--a],y=o[--p];else if(et(h,y,l))"slot"!==h.v&&"slot"!==y.v||Y(h.$.parentNode,!1),lt(h,y,l),ut(t,h.$,d.$.nextSibling),h=e[++i],y=o[--p];else if(et(d,m,l))"slot"!==h.v&&"slot"!==y.v||Y(d.$.parentNode,!1),lt(d,m,l),ut(t,d.$,h.$),d=e[--a],m=o[++c];else{for(f=-1,u=i;u<=a;++u)if(e[u]&&null!==e[u].p&&e[u].p===m.p){f=u;break}f>=0?(r=e[f],r.v!==m.v?s=X(e&&e[c],n,f,t):(lt(r,m,l),e[f]=void 0,s=r.$),m=o[++c]):(s=X(e&&e[c],n,c,t),m=o[++c]),s&&ut(ot(h.$),s,nt(h.$))}i>a?Z(t,null==o[p+1]?null:o[p+1].$,n,o,c,p):c>p&&tt(e,i,a)})(o,l,e,s,n):null!==s?(null!==t.i&&(o.textContent=""),Z(o,null,e,s,0,s.length-1)):!n&&null!==l&&tt(l,0,l.length-1)):(i=o["s-cr"])?i.parentNode.textContent=r:t.i!==r&&(o.data=r)},st=t=>{const e=t.__childNodes||t.childNodes;for(const t of e)if(1===t.nodeType){if(t["s-sr"]){const n=t["s-sn"];t.hidden=!1;for(const o of e)if(o!==t)if(o["s-hn"]!==t["s-hn"]||""!==n){if(1===o.nodeType&&(n===o.getAttribute("slot")||n===o["s-sn"])||3===o.nodeType&&n===o["s-sn"]){t.hidden=!0;break}}else if(n===o["s-sn"]&&(1===o.nodeType||3===o.nodeType&&""!==o.textContent.trim())){t.hidden=!0;break}}st(t)}},rt=[],it=t=>{let e,n,o;const l=t.__childNodes||t.childNodes;for(const t of l){if(t["s-sr"]&&(e=t["s-cr"])&&e.parentNode){n=e.parentNode.__childNodes||e.parentNode.childNodes;const l=t["s-sn"];for(o=n.length-1;o>=0;o--)if(e=n[o],!e["s-cn"]&&!e["s-nr"]&&e["s-hn"]!==t["s-hn"])if(ct(e,l)){let n=rt.find((t=>t.j===e));J=!0,e["s-sn"]=e["s-sn"]||l,n?(n.j["s-sh"]=t["s-hn"],n.k=t):(e["s-sh"]=t["s-hn"],rt.push({k:t,j:e})),e["s-sr"]&&rt.map((t=>{ct(t.j,e["s-sn"])&&(n=rt.find((t=>t.j===e)),n&&!t.k&&(t.k=n.k))}))}else rt.some((t=>t.j===e))||rt.push({j:e})}1===t.nodeType&&it(t)}},ct=(t,e)=>1===t.nodeType?null===t.getAttribute("slot")&&""===e||t.getAttribute("slot")===e:t["s-sn"]===e||""===e,ft=t=>{t.u&&t.u.ref&&t.u.ref(null),t.h&&t.h.map(ft)},ut=(t,e,n)=>{const o=null==t?void 0:t.insertBefore(e,n);return ht(e,t),o},at=t=>{const e=[];return t&&e.push(...t["s-scs"]||[],t["s-si"],t["s-sc"],...at(t.parentElement)),e},ht=(t,e,n=!1)=>{var o;if(t&&e&&1===t.nodeType){const l=new Set(at(e).filter(Boolean));if(l.size&&(null==(o=t.classList)||o.add(...t["s-scs"]=Array.from(l)),t["s-ol"]||n))for(const e of Array.from(t.__childNodes||t.childNodes))ht(e,t,!0)}},dt=(t,e)=>null==t||k(t)?t:4&e?"false"!==t&&(""===t||!!t):2&e?parseFloat(t):1&e?t+"":t,pt=t=>n(t).$hostElement$,mt=new WeakMap,yt=t=>"sc-"+t.O,vt=(t,e)=>{e&&!t.C&&e["s-p"]&&e["s-p"].push(new Promise((e=>t.C=e)))},$t=(t,e)=>{if(t.o|=16,!(4&t.o))return vt(t,t.M),g((()=>bt(t,e)));t.o|=512},bt=(t,e)=>{const n=t.t;if(!n)throw Error(`Can't render component <${t.$hostElement$.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let o;return e&&(o=Et(n,"componentWillLoad")),wt(o,(()=>gt(t,n,e)))},wt=(t,e)=>St(t)?t.then(e).catch((t=>{console.error(t),e()})):e(),St=t=>t instanceof Promise||t&&t.then&&"function"==typeof t.then,gt=async(t,e,n)=>{var o;const l=t.$hostElement$,s=l["s-rc"];n&&(t=>{const e=t.A,n=t.$hostElement$,o=e.o,l=((t,e)=>{var n;const o=yt(e),l=i.get(o);if(t=11===t.nodeType?t:a,l)if("string"==typeof l){let s,r=mt.get(t=t.head||t);if(r||mt.set(t,r=new Set),!r.has(o)){{s=a.createElement("style"),s.innerHTML=l;const o=null!=(n=h.P)?n:O(a);if(null!=o&&s.setAttribute("nonce",o),!(1&e.o))if("HEAD"===t.nodeName){const e=t.querySelectorAll("link[rel=preconnect]"),n=e.length>0?e[e.length-1].nextSibling:t.querySelector("style");t.insertBefore(s,n)}else if("host"in t)if(p){const e=new CSSStyleSheet;e.replaceSync(l),t.adoptedStyleSheets=[e,...t.adoptedStyleSheets]}else{const e=t.querySelector("style");e?e.innerHTML=l+e.innerHTML:t.prepend(s)}else t.append(s);1&e.o&&"HEAD"!==t.nodeName&&t.insertBefore(s,null)}4&e.o&&(s.innerHTML+=c),r&&r.add(o)}}else t.adoptedStyleSheets.includes(l)||(t.adoptedStyleSheets=[...t.adoptedStyleSheets,l]);return o})(n.shadowRoot?n.shadowRoot:n.getRootNode(),e);10&o&&2&o&&(n["s-sc"]=l,n.classList.add(l+"-h"),2&o&&n.classList.add(l+"-s"))})(t);jt(t,e,l,n),s&&(s.map((t=>t())),l["s-rc"]=void 0);{const e=null!=(o=l["s-p"])?o:[],n=()=>kt(t);0===e.length?n():(Promise.all(e).then(n),t.o|=4,e.length=0)}},jt=(t,e,n,o)=>{try{e=e.render(),t.o&=-17,t.o|=2,((t,e,n=!1)=>{var o,l,s,r;const i=t.$hostElement$,c=t.A,f=t.R||H(null,null),u=(t=>t&&t.v===N)(e)?e:F(null,null,e);if(P=i.tagName,n&&u.u)for(const t of Object.keys(u.u))i.hasAttribute(t)&&!["key","ref","style","class"].includes(t)&&(u.u[t]=i[t]);if(u.v=null,u.o|=4,t.R=u,u.$=f.$=i.shadowRoot||i,M=i["s-sc"],z=!!(1&c.o),A=i["s-cr"],J=!1,lt(f,u,n),h.o|=1,K){it(u.$);for(const t of rt){const e=t.j;if(!e["s-ol"]){const t=a.createTextNode("");t["s-nr"]=e,ut(e.parentNode,e["s-ol"]=t,e)}}for(const t of rt){const e=t.j,i=t.k;if(i){const t=i.parentNode;let n=i.nextSibling;{let s=null==(o=e["s-ol"])?void 0:o.previousSibling;for(;s;){let o=null!=(l=s["s-nr"])?l:null;if(o&&o["s-sn"]===e["s-sn"]&&t===o.parentNode){for(o=o.nextSibling;o===e||(null==o?void 0:o["s-sr"]);)o=null==o?void 0:o.nextSibling;if(!o||!o["s-nr"]){n=o;break}}s=s.previousSibling}}(!n&&t!==e.parentNode||e.nextSibling!==n)&&e!==n&&(!e["s-hn"]&&e["s-ol"]&&(e["s-hn"]=e["s-ol"].parentNode.nodeName),ut(t,e,n),1===e.nodeType&&(e.hidden=null!=(s=e["s-ih"])&&s)),e&&"function"==typeof i["s-rf"]&&i["s-rf"](e)}else 1===e.nodeType&&(n&&(e["s-ih"]=null!=(r=e.hidden)&&r),e.hidden=!0)}}J&&st(u.$),h.o&=-2,rt.length=0,A=void 0})(t,e,o)}catch(e){s(e,t.$hostElement$)}return null},kt=t=>{const e=t.$hostElement$,n=t.M;64&t.o||(t.o|=64,Ct(e),t.T(e),n||Ot()),t.F(e),t.C&&(t.C(),t.C=void 0),512&t.o&&S((()=>$t(t,!1))),t.o&=-517},Ot=()=>{Ct(a.documentElement),S((()=>(t=>{const e=h.ce("appload",{detail:{namespace:"uh-component-library"}});return t.dispatchEvent(e),e})(u)))},Et=(t,e,n)=>{if(t&&t[e])try{return t[e](n)}catch(t){s(t)}},Ct=t=>t.classList.add("hydrated"),xt=(t,e,o,l)=>{const r=n(t);if(!r)throw Error(`Couldn't find host element for "${l.O}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`);const i=r.$hostElement$,c=r.H.get(e),f=r.o,u=r.t;if(o=dt(o,l.N[e][0]),(!(8&f)||void 0===c)&&o!==c&&(!Number.isNaN(c)||!Number.isNaN(o))&&(r.H.set(e,o),u)){if(l.D&&128&f){const t=l.D[e];t&&t.map((t=>{try{u[t](o,c,e)}catch(t){s(t,i)}}))}2==(18&f)&&$t(r,!1)}},Mt=(t,e,o)=>{var l,s;const r=t.prototype;if(e.N||e.D||t.watchers){t.watchers&&!e.D&&(e.D=t.watchers);const i=Object.entries(null!=(l=e.N)?l:{});if(i.map((([t,[l]])=>{if(31&l||2&o&&32&l)if(2048&l){if(1&o&&2048&l&&(Object.defineProperty(r,t,{get(){const e=n(this),o=e?e.t:r;if(o)return o[t]},configurable:!0,enumerable:!0}),4096&l)){const o=Object.getOwnPropertyDescriptor(r,t).set;Object.defineProperty(r,t,{set(l){const s=n(this);if(o){const n=s.$hostElement$[t];return!s.H.get(t)&&n&&s.H.set(t,n),o.call(this,dt(l,e.N[t][0])),void xt(this,t,s.$hostElement$[t],e)}if(!s)return;const r=()=>{const n=s.t[t];!s.H.get(t)&&n&&s.H.set(t,n),s.t[t]=dt(l,e.N[t][0]),xt(this,t,s.t[t],e)};s.t?r():s.L.then((()=>r()))}})}}else Object.defineProperty(r,t,{get(){return((t,e)=>n(this).H.get(e))(0,t)},set(n){xt(this,t,n,e)},configurable:!0,enumerable:!0});else 1&o&&64&l&&Object.defineProperty(r,t,{value(...e){var o;const l=n(this);return null==(o=null==l?void 0:l.U)?void 0:o.then((()=>{var n;return null==(n=l.t)?void 0:n[t](...e)}))}})})),1&o){const o=new Map;r.attributeChangedCallback=function(t,l,s){h.jmp((()=>{var i;const c=o.get(t);if(this.hasOwnProperty(c))s=this[c],delete this[c];else{if(r.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==s)return;if(null==c){const o=n(this),r=null==o?void 0:o.o;if(r&&!(8&r)&&128&r&&s!==l){const n=o.t,r=null==(i=e.D)?void 0:i[t];null==r||r.forEach((e=>{null!=n[e]&&n[e].call(n,s,l,t)}))}return}}const f=Object.getOwnPropertyDescriptor(r,c);f.get&&!f.set||(this[c]=(null!==s||"boolean"!=typeof this[c])&&s)}))},t.observedAttributes=Array.from(new Set([...Object.keys(null!=(s=e.D)?s:{}),...i.filter((([t,e])=>15&e[0])).map((([t,e])=>{const n=e[1]||t;return o.set(n,t),n}))]))}}return t},At=(t,o={})=>{var l;const f=[],d=o.exclude||[],m=u.customElements,y=a.head,v=y.querySelector("meta[charset]"),$=a.createElement("style"),b=[];let w,S=!0;Object.assign(h,o),h.l=new URL(o.resourcesUrl||"./",a.baseURI).href;let g=!1;if(t.map((t=>{t[1].map((o=>{var l;const c={o:o[0],O:o[1],N:o[2],W:o[3]};4&c.o&&(g=!0),c.N=o[2],c.D=null!=(l=o[4])?l:{};const u=c.O,y=class extends HTMLElement{constructor(t){if(super(t),this.hasRegisteredEventListeners=!1,((t,n)=>{const o={o:0,$hostElement$:t,A:n,H:new Map};o.U=new Promise((t=>o.F=t)),o.L=new Promise((t=>o.T=t)),t["s-p"]=[],t["s-rc"]=[],e.set(t,o)})(t=this,c),1&c.o)if(t.shadowRoot){if("open"!==t.shadowRoot.mode)throw Error(`Unable to re-use existing shadow root for ${c.O}! Mode is set to ${t.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else t.attachShadow({mode:"open"})}connectedCallback(){this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0),w&&(clearTimeout(w),w=null),S?b.push(this):h.jmp((()=>(t=>{if(!(1&h.o)){const e=n(t),o=e.A,l=()=>{};if(1&e.o)(null==e?void 0:e.t)||(null==e?void 0:e.L)&&e.L.then((()=>{}));else{e.o|=1,12&o.o&&(t=>{const e=t["s-cr"]=a.createComment("");e["s-cn"]=!0,ut(t,e,t.firstChild)})(t);{let n=t;for(;n=n.parentNode||n.host;)if(n["s-p"]){vt(e,e.M=n);break}}o.N&&Object.entries(o.N).map((([e,[n]])=>{if(31&n&&t.hasOwnProperty(e)){const n=t[e];delete t[e],t[e]=n}})),(async(t,e,n)=>{let o;if(!(32&e.o)){if(e.o|=32,n.q){const t=(t=>{const e=t.O.replace(/-/g,"_"),n=t.q;if(!n)return;const o=r.get(n);return o?o[e]:import(`./${n}.entry.js`).then((t=>(r.set(n,t),t[e])),s)
-/*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n);if(t&&"then"in t){const e=()=>{};o=await t,e()}else o=t;if(!o)throw Error(`Constructor for "${n.O}#${e.B}" was not found`);o.isProxied||(n.D=o.watchers,Mt(o,n,2),o.isProxied=!0);const l=()=>{};e.o|=8;try{new o(e)}catch(t){s(t)}e.o&=-9,e.o|=128,l()}else o=t.constructor,customElements.whenDefined(t.localName).then((()=>e.o|=128));if(o&&o.style){let t;"string"==typeof o.style&&(t=o.style);const e=yt(n);if(!i.has(e)){const o=()=>{};((t,e,n)=>{let o=i.get(t);p&&n?(o=o||new CSSStyleSheet,"string"==typeof o?o=e:o.replaceSync(e)):o=e,i.set(t,o)})(e,t,!!(1&n.o)),o()}}}const l=e.M,c=()=>$t(e,!0);l&&l["s-rc"]?l["s-rc"].push(c):c()})(t,e,o)}l()}})(this)))}disconnectedCallback(){h.jmp((()=>(async()=>{if(!(1&h.o)){const t=n(this);(null==t?void 0:t.t)||(null==t?void 0:t.L)&&t.L.then((()=>{}))}})()))}componentOnReady(){return n(this).L}};c.q=t[0],d.includes(u)||m.get(u)||(f.push(u),m.define(u,Mt(y,c,1)))}))})),f.length>0&&(g&&($.textContent+=c),$.textContent+=f.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",$.innerHTML.length)){$.setAttribute("data-styles","");const t=null!=(l=h.P)?l:O(a);null!=t&&$.setAttribute("nonce",t),y.insertBefore($,v?v.nextSibling:y.firstChild)}S=!1,b.length?b.map((t=>t.connectedCallback())):h.jmp((()=>w=setTimeout(Ot,30)))},Pt=(t,e)=>e,Rt=t=>h.P=t;export{Pt as F,At as b,pt as g,F as h,d as p,o as r,Rt as s}

package/docs/DEPLOYMENT.md

@@ -1,52 +0,0 @@
-# Design System Component Library
-
-## Deployment
-
-### CI worker
-
-Atm. there is project specific Gitlab CI/CD runner in use. It is running as a Docker container. The runner is registered
-to Gitlab manually on opa-worker-2.it.helsinki.fi server with the following command:
-
-```bash
-docker exec -t uhds-gitlab-runner gitlab-runner register --non-interactive --executor docker \
-  --docker-image docker:stable --url https://version.helsinki.fi/ --token TOKEN --name uhds-runner --docker-privileged \
-  --docker-disable-cache=false --docker-volumes=/var/run/docker.sock:/var/run/docker.sock --docker-volumes=/builds:/builds
-```
-
-### Storybook
-
-There is two servers in use. Official names are:
-- designsystem-qa-24.it.helsinki.fi
-- designsystem-prod-24.it.helsinki.fi
-
-Design system was later decided to be published through 3rd party server, which will use domain name designsystem.helsinki.fi.
-
-These servers are used for static Storybook site in the following addresses:
-- https://storybook.it.helsinki.fi
-- https://storybook-qa.it.helsinki.fi
-
-Servers are provisioned using Ansible. At this point it means installing Nginx and configuring it. User with username
-deployer with correct permissions to `/var/www/html` dir has been created manually to the servers with following commands as root user:
-
-```bash
-adduser deployer
-usermod -aG hysudo deployer
-echo "deployer ALL=(ALL) NOPASSWD:ALL" | sudo tee /etc/sudoers.d/deployer
-mkdir -p /home/deployer/.ssh
-chmod 700 /home/deployer/.ssh
-echo "[deployer public key]" > /home/deployer/.ssh/authorized_keys
-chmod 600 /home/deployer/.ssh/authorized_keys
-chown -R deployer:deployer /home/deployer/.ssh
-```
-
-deployer user's private key has been added to Gitlab as a file variable to be used for authentication in Gitlab CI/CD pipeline.
-
-There is manual provision jobs in Gitlab CI/CD pipeline for both QA and production servers for setting up Nginx.
-
-There is also automatic deployment job for Storybook site in Gitlab CI/CD pipeline. It uses `rsync` to copy files to the server.
-
-Pushes to production branch will trigger automatic deployment to production server. Pushes to other branches will trigger automatic deployment to QA server.
-
-Url to the other branches are in the form of `https://storybook-qa.it.helsinki.fi/[branch-name-slug]`. URL to the deployment is shown in the pipeline job log.
-
-When the branch is deleted, the deployment job will remove the branch from the server except for the `main` and `production` branch.

package/docs/DEVELOPMENT.md

@@ -1,52 +0,0 @@
-# University of Helsinki Design System Component Library
-
-## Development Guide
-
-This guide will help you set up the development environment for the University of Helsinki Design System Component Library.
-
-### Cloning the Repository
-
-First, clone the repository to your local machine:
-
-```sh
-git clone git@version.helsinki.fi:uh-design-system/component-library.git
-cd component-library
-```
-
-### Installing Dependencies
-
-Install the necessary dependencies using npm:
-
-```sh
-npm install
-```
-
-### Building Components
-
-To build the components, run the following command:
-
-```sh
-npm run build
-```
-
-This will compile the components and output them to the `dist` directory.
-
-### Running Storybook
-
-To run Storybook for developing and testing components, use the following command:
-
-```sh
-npm run develop
-```
-
-This will start Storybook and watch for any changes in the components.
-
-### Running Static Storybook
-To build and serve a static version of Storybook, use the following commands:
-
-```sh
-npm run build-storybook-static
-npx http-server storybook-static
-```
-
-This will build the static Storybook files and serve them using a simple HTTP server.

package/docs/PUBLISHING.md

@@ -1,48 +0,0 @@
-# University of Helsinki Design System Component Library
-
-## Publishing Components
-
-This document provides instructions on how to publish components in the University of Helsinki Design System Component Library using Lerna.
-
-### Prerequisites
-
-- Ensure that Lerna is installed globally.
-
-```sh
-npm install -g lerna
-```
-
-### Steps to Publish
-
-1. **Build the components**: Ensure that all components are built and ready for publishing.
-
-```sh
-npm run build
-```
-
-2. **Publish with Lerna**: Use Lerna to publish the components. Lerna will handle versioning and pushing commits to GitLab.
-
-```sh
-npx lerna publish
-```
-
-### Notes
-
-- Ensure that you have the necessary permissions to publish the package.
-- Follow the organization's guidelines for versioning and releasing components.
-- Lerna will automatically update the version number and push the commit to GitLab.
-
-## Deleting Versions from npmjs
-If you need to delete a specific version of your package from npmjs, you can use the following command:
-
-```sh
-npm unpublish @uh-design-system/component-library@<version>
-```
-
-Replace `<version>` with the version number you want to delete. For example, to delete version `1.0.0`, you would run:
-
-```sh
-npm unpublish @uh-design-system/component-library@1.0.0
-```
-
-Note: Be cautious when unpublishing versions, as it can affect projects that depend on that version.

package/docs/TESTING.md

@@ -1,24 +0,0 @@
-# University of Helsinki Design System Component Library
-
-## Testing
-
-[Storybook test runner](https://storybook.js.org/docs/writing-tests/test-runner) is used to run automatic tests in the repository. The types of tests include
-- Visual testing using [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot)
-- Interaction testing using storybook test runner
-- Accessibility tests using [axe-playwright](https://github.com/abhinaba-ghosh/axe-playwright)
-
-Tests can be ran with command `npm run test-storybook`.
-
-Visual tests can be updated with `npm run test-storybook:update`.
-
-### Compatibility issues
-
-Different browsers and operating systems might render web content differently, so there's a possibility that visual tests
-results in different outcomes locally and when ran in CI.
-
-For this reason, there's also scripts to run tests and updating test snapshots using [docker](https://www.docker.com/).
-This uses the same image as what is used in CI, so it should match the environment used in CI.
-
-Tests using docker can be ran with command `npm run test-storybook:docker`.
-
-Visual tests can be updated with docker with the command `npm run test-storybook:update:docker`.

package/docs/USAGE.md

@@ -1,30 +0,0 @@
-# Using University of Helsinki Design System Components
-
-This guide will help you integrate the University of Helsinki Design System Component Library into your project.
-
-## Installation
-
-First, install the component library from npm:
-
-```sh
-npm install @uh-design-system/component-library
-```
-
-## Loading the Components
-To use the web components in your project, you need to define the custom elements. Add the following code to your project:
-
-```js
-import { defineCustomElements } from '@uh-design-system/component-library/loader';
-
-// Define the custom elements
-defineCustomElements(window);
-```
-
-## Example Usage
-Here is an example of how to use the `<ds-icon>` component in your web page:
-
-```html
-<ds-icon name="archive"></ds-icon>
-```
-
-In this example, the `<ds-icon>` component is used to display an icon with the name "archive".

package/react-wrapper/components.ts

@@ -1,24 +0,0 @@
-'use client';
-
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-
-/* eslint-disable */
-
-import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent } from '@stencil/react-output-target/runtime';
-import { DsIcon as DsIconElement, defineCustomElement as defineDsIcon } from "@uh-design-system/component-library/dist/components/ds-icon.js";
-import React from 'react';
-
-type DsIconEvents = NonNullable<unknown>;
-
-export const DsIcon: StencilReactComponent<DsIconElement, DsIconEvents> = /*@__PURE__*/ createComponent<DsIconElement, DsIconEvents>({
-    tagName: 'ds-icon',
-    elementClass: DsIconElement,
-    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
-    react: React,
-    events: {} as DsIconEvents,
-    defineCustomElement: defineDsIcon
-});