@politiet/sheriff-web-components 0.1.3 → 0.6.0

package/dist/sds-switch/sds-switch.styles.js

@@ -0,0 +1,125 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		display: inline-flex;
+		contain: layout style;
+		box-sizing: border-box;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host(:disabled),
+	:host(:disabled) * {
+		pointer-events: none;
+	}
+
+	:host(:disabled) .sds-switch__input:checked::before {
+		content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23C4C6C7' viewBox='0 0 24 24'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'></path></svg>");
+	}
+
+	:host(:disabled) .sds-switch__input:not(:checked)::before {
+		display: none;
+	}
+
+	:host(:disabled) .sds-switch__label {
+		color: var(--sds-color-semantic-text-disabled);
+	}
+
+	.sds-switch {
+		--_switch-motion-duration: 200ms;
+		--_switch-height: 32px;
+		--_switch-width: 60px;
+		--_switch-padding: 8px;
+		--_switch-icon-size: calc(var(--_switch-height) - (2 * var(--_switch-padding)));
+
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	.sds-switch--small {
+		--_switch-height: 24px;
+		--_switch-width: 48px;
+		--_switch-padding: 6px;
+	}
+
+	.sds-switch:has(.sds-switch__input:checked) {
+		--_switch-padding: 6px;
+	}
+
+	.sds-switch--small:has(.sds-switch__input:checked) {
+		--_switch-padding: 4px;
+	}
+
+	.sds-switch__label {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		user-select: none;
+		color: var(--sds-color-semantic-text-default);
+		font-family: var(--sds-typography-font-family);
+		font-size: 1rem;
+		font-weight: 400;
+		line-height: 1.25;
+	}
+
+	.sds-switch__label--hidden:not(:focus):not(:active):not(:focus-within) {
+		clip-path: inset(50%);
+		height: 1px;
+		overflow: hidden;
+		position: absolute;
+		white-space: nowrap;
+		width: 1px;
+	}
+
+	.sds-switch__input {
+		--_switch-icon-position: var(--_switch-padding);
+
+		appearance: none;
+		cursor: pointer;
+		user-select: none;
+
+		inline-size: var(--_switch-width);
+		block-size: var(--_switch-height);
+		margin: 0;
+
+		flex-shrink: 0;
+		display: grid;
+		align-items: center;
+		grid: [track] 1fr / [track] 1fr;
+
+		transition: background-color var(--_switch-motion-duration);
+		border-radius: 1rem;
+		background-color: var(--sds-color-global-gray-300);
+	}
+
+	.sds-switch__input::before {
+		content: '';
+		grid-area: track;
+		inline-size: var(--_switch-icon-size);
+		block-size: var(--_switch-icon-size);
+
+		background-color: var(--sds-color-semantic-border-default);
+		transition: transform var(--_switch-motion-duration);
+		border-radius: 50%;
+		transform: translateX(var(--_switch-icon-position));
+	}
+
+	.sds-switch__input:focus-visible {
+		outline: 2px solid var(--sds-color-semantic-border-focus);
+		outline-offset: 2px;
+	}
+
+	.sds-switch__input:checked {
+		--_switch-icon-position: calc(var(--_switch-width) - var(--_switch-icon-size) - var(--_switch-padding));
+	}
+
+	.sds-switch__input:checked::before {
+		content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%230072ce' viewBox='0 0 24 24'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'></path></svg>");
+		background-color: var(--sds-color-semantic-surface-default);
+	}
+`;
+//# sourceMappingURL=sds-switch.styles.js.map

package/dist/sds-switch/sds-switch.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-switch.styles.js","sourceRoot":"","sources":["../../src/sds-switch/sds-switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: inline-flex;\n\t\tcontain: layout style;\n\t\tbox-sizing: border-box;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\n\t:host([hidden]) {\n\t\tdisplay: none;\n\t}\n\n\t:host(:disabled),\n\t:host(:disabled) * {\n\t\tpointer-events: none;\n\t}\n\n\t:host(:disabled) .sds-switch__input:checked::before {\n\t\tcontent: url(\"data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23C4C6C7' viewBox='0 0 24 24'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'></path></svg>\");\n\t}\n\n\t:host(:disabled) .sds-switch__input:not(:checked)::before {\n\t\tdisplay: none;\n\t}\n\n\t:host(:disabled) .sds-switch__label {\n\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t}\n\n\t.sds-switch {\n\t\t--_switch-motion-duration: 200ms;\n\t\t--_switch-height: 32px;\n\t\t--_switch-width: 60px;\n\t\t--_switch-padding: 8px;\n\t\t--_switch-icon-size: calc(var(--_switch-height) - (2 * var(--_switch-padding)));\n\n\t\tdisplay: flex;\n\t\tgap: 0.5rem;\n\t}\n\n\t.sds-switch--small {\n\t\t--_switch-height: 24px;\n\t\t--_switch-width: 48px;\n\t\t--_switch-padding: 6px;\n\t}\n\n\t.sds-switch:has(.sds-switch__input:checked) {\n\t\t--_switch-padding: 6px;\n\t}\n\n\t.sds-switch--small:has(.sds-switch__input:checked) {\n\t\t--_switch-padding: 4px;\n\t}\n\n\t.sds-switch__label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\t\tuser-select: none;\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 1rem;\n\t\tfont-weight: 400;\n\t\tline-height: 1.25;\n\t}\n\n\t.sds-switch__label--hidden:not(:focus):not(:active):not(:focus-within) {\n\t\tclip-path: inset(50%);\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\twhite-space: nowrap;\n\t\twidth: 1px;\n\t}\n\n\t.sds-switch__input {\n\t\t--_switch-icon-position: var(--_switch-padding);\n\n\t\tappearance: none;\n\t\tcursor: pointer;\n\t\tuser-select: none;\n\n\t\tinline-size: var(--_switch-width);\n\t\tblock-size: var(--_switch-height);\n\t\tmargin: 0;\n\n\t\tflex-shrink: 0;\n\t\tdisplay: grid;\n\t\talign-items: center;\n\t\tgrid: [track] 1fr / [track] 1fr;\n\n\t\ttransition: background-color var(--_switch-motion-duration);\n\t\tborder-radius: 1rem;\n\t\tbackground-color: var(--sds-color-global-gray-300);\n\t}\n\n\t.sds-switch__input::before {\n\t\tcontent: '';\n\t\tgrid-area: track;\n\t\tinline-size: var(--_switch-icon-size);\n\t\tblock-size: var(--_switch-icon-size);\n\n\t\tbackground-color: var(--sds-color-semantic-border-default);\n\t\ttransition: transform var(--_switch-motion-duration);\n\t\tborder-radius: 50%;\n\t\ttransform: translateX(var(--_switch-icon-position));\n\t}\n\n\t.sds-switch__input:focus-visible {\n\t\toutline: 2px solid var(--sds-color-semantic-border-focus);\n\t\toutline-offset: 2px;\n\t}\n\n\t.sds-switch__input:checked {\n\t\t--_switch-icon-position: calc(var(--_switch-width) - var(--_switch-icon-size) - var(--_switch-padding));\n\t}\n\n\t.sds-switch__input:checked::before {\n\t\tcontent: url(\"data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%230072ce' viewBox='0 0 24 24'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'></path></svg>\");\n\t\tbackground-color: var(--sds-color-semantic-surface-default);\n\t}\n`;\n"]}

package/dist/sds-text/sds-text.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+type Size = 'l' | 'm' | 's';
+export declare class SDSText extends LitElement {
+    static styles: import("lit").CSSResult[];
+    size: Size;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-text': SDSText;
+    }
+}
+export {};
+//# sourceMappingURL=sds-text.d.ts.map

package/dist/sds-text/sds-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-text.d.ts","sourceRoot":"","sources":["../../src/sds-text/sds-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAE5B,qBACa,OAAQ,SAAQ,UAAU;IAEtC,OAAgB,MAAM,4BAAY;IAIlC,IAAI,EAAE,IAAI,CAAO;IAER,MAAM;CAYf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}

package/dist/sds-text/sds-text.js

@@ -0,0 +1,37 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './sds-text.styles';
+let SDSText = class SDSText extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Reactive Props
+        this.size = 'l';
+    }
+    render() {
+        const styleClasses = {
+            'sds-text': true,
+            'sds-text--l': this.size === 'l',
+            'sds-text--m': this.size === 'm',
+            'sds-text--s': this.size === 's',
+        };
+        const classes = classMap(styleClasses);
+        return html `<p class=${classes}><slot></slot></p>`;
+    }
+};
+// Styling
+SDSText.styles = [styles];
+__decorate([
+    property({ type: String })
+], SDSText.prototype, "size", void 0);
+SDSText = __decorate([
+    customElement('sds-text')
+], SDSText);
+export { SDSText };
+//# sourceMappingURL=sds-text.js.map

package/dist/sds-text/sds-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-text.js","sourceRoot":"","sources":["../../src/sds-text/sds-text.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAKpC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAIN,iBAAiB;QAEjB,SAAI,GAAS,GAAG,CAAC;IAclB,CAAC;IAZS,MAAM;QACd,MAAM,YAAY,GAAG;YACpB,UAAU,EAAE,IAAI;YAChB,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG;YAChC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG;YAChC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG;SAChC,CAAC;QAEF,MAAM,OAAO,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;QAEvC,OAAO,IAAI,CAAA,YAAY,OAAO,oBAAoB,CAAC;IACpD,CAAC;;AAlBD,UAAU;AACM,cAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAIlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACV;AANL,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAoBnB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-text.styles';\n\ntype Size = 'l' | 'm' | 's';\n\n@customElement('sds-text')\nexport class SDSText extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String })\n\tsize: Size = 'l';\n\n\toverride render() {\n\t\tconst styleClasses = {\n\t\t\t'sds-text': true,\n\t\t\t'sds-text--l': this.size === 'l',\n\t\t\t'sds-text--m': this.size === 'm',\n\t\t\t'sds-text--s': this.size === 's',\n\t\t};\n\n\t\tconst classes = classMap(styleClasses);\n\n\t\treturn html`<p class=${classes}><slot></slot></p>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-text': SDSText;\n\t}\n}\n"]}

package/dist/sds-text/sds-text.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=sds-text.styles.d.ts.map

package/dist/sds-text/sds-text.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-text.styles.d.ts","sourceRoot":"","sources":["../../src/sds-text/sds-text.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4BlB,CAAC"}

package/dist/sds-text/sds-text.styles.js

@@ -0,0 +1,31 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		display: block;
+	}
+
+	.sds-text {
+		font-family: var(--sds-typography-font-family);
+		font-weight: 400;
+		color: var(--sds-color-semantic-text-default);
+		margin: 0;
+		max-width: var(--sds-typography-max-line-width);
+		padding: 0;
+	}
+
+	.sds-text--l {
+		font-size: 1.125rem;
+		line-height: 1.222;
+	}
+
+	.sds-text--m {
+		font-size: 1rem;
+		line-height: 1.25;
+	}
+
+	.sds-text--s {
+		font-size: 0.875rem;
+		line-height: 1.285;
+	}
+`;
+//# sourceMappingURL=sds-text.styles.js.map

package/dist/sds-text/sds-text.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-text.styles.js","sourceRoot":"","sources":["../../src/sds-text/sds-text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t}\n\n\t.sds-text {\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-weight: 400;\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tmargin: 0;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t\tpadding: 0;\n\t}\n\n\t.sds-text--l {\n\t\tfont-size: 1.125rem;\n\t\tline-height: 1.222;\n\t}\n\n\t.sds-text--m {\n\t\tfont-size: 1rem;\n\t\tline-height: 1.25;\n\t}\n\n\t.sds-text--s {\n\t\tfont-size: 0.875rem;\n\t\tline-height: 1.285;\n\t}\n`;\n"]}

package/dist/sds-textfield/sds-textfield.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+import '../sds-icon/sds-icon';
+type InputType = 'text' | 'email' | 'tel' | 'number' | 'password' | 'search' | 'url';
+export declare class SDSTextField extends LitElement {
+    static styles: import("lit").CSSResult[];
+    type: InputType;
+    value?: string;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    helpText?: string;
+    errorMessage?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    autocomplete?: boolean;
+    private hasIcon;
+    private readonly handleSlotChange;
+    private readonly _handleInput;
+    private readonly _handleChange;
+    private readonly _handleSelect;
+    private readonly _handleFocus;
+    private readonly _handleBlur;
+    select(): void;
+    focus(): void;
+    blur(): void;
+    click(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-textfield': SDSTextField;
+    }
+}
+export {};
+//# sourceMappingURL=sds-textfield.d.ts.map

package/dist/sds-textfield/sds-textfield.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-textfield.d.ts","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAMhD,OAAO,sBAAsB,CAAC;AAE9B,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;AAErF,qBACa,YAAa,SAAQ,UAAU;IAE3C,OAAgB,MAAM,4BAAY;IAIlC,IAAI,EAAE,SAAS,CAAU;IAGzB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,QAAQ,CAAC,EAAE,OAAO,CAAS;IAG3B,QAAQ,CAAC,EAAE,OAAO,CAAS;IAG3B,YAAY,CAAC,EAAE,OAAO,CAAS;IAI/B,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAG/B;IAGF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAW3B;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAW5B;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAc5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAS3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAS1B;IAEF,MAAM,IAAI,IAAI;IAIL,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;CA+Cf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}

package/dist/sds-textfield/sds-textfield.js

@@ -0,0 +1,179 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './sds-textfield.styles';
+import '../sds-icon/sds-icon';
+let SDSTextField = class SDSTextField extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Props
+        this.type = 'text';
+        this.disabled = false;
+        this.readOnly = false;
+        this.autocomplete = false;
+        // State
+        this.hasIcon = false;
+        this.handleSlotChange = (e) => {
+            const slot = e.target;
+            this.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;
+        };
+        // Event handling
+        this._handleInput = (event) => {
+            event.stopImmediatePropagation();
+            if (!this.disabled) {
+                this.dispatchEvent(new CustomEvent('input', {
+                    detail: { value: event.target.value },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        };
+        this._handleChange = (event) => {
+            event.stopImmediatePropagation();
+            if (!this.disabled) {
+                this.dispatchEvent(new CustomEvent('change', {
+                    detail: { value: event.target.value },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        };
+        this._handleSelect = (event) => {
+            event.stopImmediatePropagation();
+            if (!this.disabled) {
+                const target = event.target;
+                const selectedText = target.value.substring(target.selectionStart ?? 0, target.selectionEnd ?? 0);
+                this.dispatchEvent(new CustomEvent('select', {
+                    detail: { selectedText },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        };
+        this._handleFocus = (event) => {
+            event.stopImmediatePropagation();
+            this.dispatchEvent(new CustomEvent('focus', {
+                detail: { value: event.target.value },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this._handleBlur = (event) => {
+            event.stopImmediatePropagation();
+            this.dispatchEvent(new CustomEvent('blur', {
+                detail: { value: event.target.value },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    select() {
+        if (!this.disabled)
+            this.shadowRoot?.querySelector('input')?.select();
+    }
+    focus() {
+        if (!this.disabled)
+            this.shadowRoot?.querySelector('input')?.focus();
+    }
+    blur() {
+        if (!this.disabled)
+            this.shadowRoot?.querySelector('input')?.blur();
+    }
+    click() {
+        if (!this.disabled)
+            this.shadowRoot?.querySelector('input')?.click();
+    }
+    render() {
+        const textfieldClasses = {
+            'sds-textfield': true,
+            'sds-textfield--error': Boolean(this.errorMessage),
+            'sds-textfield--disabled': Boolean(this.disabled),
+            'sds-textfield--readonly': Boolean(this.readOnly),
+            'sds-textfield--has-icon': this.hasIcon,
+        };
+        return html ` <div class="${classMap(textfieldClasses)}">
+			${this.label
+            ? html `<label for="sds-textfield" class="sds-textfield__label">${this.label}</label>`
+            : nothing}
+			${this.helpText ? html `<p class="sds-textfield__help-text">${this.helpText}</p>` : nothing}
+			<div class="sds-textfield__input-container">
+				<input
+					class="sds-textfield__input"
+					type="${this.type}"
+					id="sds-textfield"
+					?disabled="${this.disabled}"
+					?readonly="${this.readOnly}"
+					placeholder="${ifDefined(this.placeholder)}"
+					value="${ifDefined(this.value)}"
+					name="${ifDefined(this.name)}"
+					autocomplete="${this.autocomplete ? 'on' : 'off'}"
+					@input="${this._handleInput}"
+					@change="${this._handleChange}"
+					@select="${this._handleSelect}"
+					@focus="${this._handleFocus}"
+					@blur="${this._handleBlur}"
+				/>
+				<slot name="after" @slotchange="${this.handleSlotChange}" aria-hidden="true"></slot>
+			</div>
+			${this.errorMessage
+            ? html `<p class="sds-textfield__error-message">
+						<sds-icon
+							name="warning-material-filled"
+							size="m"
+							color="${!this.disabled
+                ? `var(--sds-color-semantic-icon-critical)`
+                : `var(--sds-color-semantic-icon-disabled)`}"
+						></sds-icon
+						>${this.errorMessage}
+					</p>`
+            : nothing}
+		</div>`;
+    }
+};
+// Styling
+SDSTextField.styles = [styles];
+__decorate([
+    property({ type: String })
+], SDSTextField.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], SDSTextField.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], SDSTextField.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], SDSTextField.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], SDSTextField.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String, attribute: 'help-text' })
+], SDSTextField.prototype, "helpText", void 0);
+__decorate([
+    property({ type: String, attribute: 'error-message' })
+], SDSTextField.prototype, "errorMessage", void 0);
+__decorate([
+    property({ type: Boolean })
+], SDSTextField.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'readonly' })
+], SDSTextField.prototype, "readOnly", void 0);
+__decorate([
+    property({ type: Boolean })
+], SDSTextField.prototype, "autocomplete", void 0);
+__decorate([
+    state()
+], SDSTextField.prototype, "hasIcon", void 0);
+SDSTextField = __decorate([
+    customElement('sds-textfield')
+], SDSTextField);
+export { SDSTextField };
+//# sourceMappingURL=sds-textfield.js.map

package/dist/sds-textfield/sds-textfield.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-textfield.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-textfield.styles';\n\nimport '../sds-icon/sds-icon';\n\ntype InputType = 'text' | 'email' | 'tel' | 'number' | 'password' | 'search' | 'url';\n\n@customElement('sds-textfield')\nexport class SDSTextField extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Props\n\t@property({ type: String })\n\ttype: InputType = 'text';\n\n\t@property({ type: String })\n\tvalue?: string;\n\n\t@property({ type: String })\n\tname?: string;\n\n\t@property({ type: String })\n\tlabel?: string;\n\n\t@property({ type: String })\n\tplaceholder?: string;\n\n\t@property({ type: String, attribute: 'help-text' })\n\thelpText?: string;\n\n\t@property({ type: String, attribute: 'error-message' })\n\terrorMessage?: string;\n\n\t@property({ type: Boolean })\n\tdisabled?: boolean = false;\n\n\t@property({ type: Boolean, attribute: 'readonly' })\n\treadOnly?: boolean = false;\n\n\t@property({ type: Boolean })\n\tautocomplete?: boolean = false;\n\n\t// State\n\t@state()\n\tprivate hasIcon = false;\n\n\tprivate readonly handleSlotChange = (e: Event) => {\n\t\tconst slot = e.target as HTMLSlotElement;\n\t\tthis.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;\n\t};\n\n\t// Event handling\n\tprivate readonly _handleInput = (event: InputEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('input', {\n\t\t\t\t\tdetail: { value: (event.target as HTMLInputElement).value },\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\tdetail: { value: (event.target as HTMLInputElement).value },\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate readonly _handleSelect = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst target = event.target as HTMLInputElement;\n\t\t\tconst selectedText = target.value.substring(target.selectionStart ?? 0, target.selectionEnd ?? 0);\n\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('select', {\n\t\t\t\t\tdetail: { selectedText },\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('focus', {\n\t\t\t\tdetail: { value: (event.target as HTMLInputElement).value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('blur', {\n\t\t\t\tdetail: { value: (event.target as HTMLInputElement).value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tselect(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.select();\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride render() {\n\t\tconst textfieldClasses = {\n\t\t\t'sds-textfield': true,\n\t\t\t'sds-textfield--error': Boolean(this.errorMessage),\n\t\t\t'sds-textfield--disabled': Boolean(this.disabled),\n\t\t\t'sds-textfield--readonly': Boolean(this.readOnly),\n\t\t\t'sds-textfield--has-icon': this.hasIcon,\n\t\t};\n\n\t\treturn html` <div class=\"${classMap(textfieldClasses)}\">\n\t\t\t${this.label\n\t\t\t\t? html`<label for=\"sds-textfield\" class=\"sds-textfield__label\">${this.label}</label>`\n\t\t\t\t: nothing}\n\t\t\t${this.helpText ? html`<p class=\"sds-textfield__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t<div class=\"sds-textfield__input-container\">\n\t\t\t\t<input\n\t\t\t\t\tclass=\"sds-textfield__input\"\n\t\t\t\t\ttype=\"${this.type}\"\n\t\t\t\t\tid=\"sds-textfield\"\n\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\tplaceholder=\"${ifDefined(this.placeholder)}\"\n\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\tautocomplete=\"${this.autocomplete ? 'on' : 'off'}\"\n\t\t\t\t\t@input=\"${this._handleInput}\"\n\t\t\t\t\t@change=\"${this._handleChange}\"\n\t\t\t\t\t@select=\"${this._handleSelect}\"\n\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t/>\n\t\t\t\t<slot name=\"after\" @slotchange=\"${this.handleSlotChange}\" aria-hidden=\"true\"></slot>\n\t\t\t</div>\n\t\t\t${this.errorMessage\n\t\t\t\t? html`<p class=\"sds-textfield__error-message\">\n\t\t\t\t\t\t<sds-icon\n\t\t\t\t\t\t\tname=\"warning-material-filled\"\n\t\t\t\t\t\t\tsize=\"m\"\n\t\t\t\t\t\t\tcolor=\"${!this.disabled\n\t\t\t\t\t\t\t\t? `var(--sds-color-semantic-icon-critical)`\n\t\t\t\t\t\t\t\t: `var(--sds-color-semantic-icon-disabled)`}\"\n\t\t\t\t\t\t></sds-icon\n\t\t\t\t\t\t>${this.errorMessage}\n\t\t\t\t\t</p>`\n\t\t\t\t: nothing}\n\t\t</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-textfield': SDSTextField;\n\t}\n}\n"]}

package/dist/sds-textfield/sds-textfield.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=sds-textfield.styles.d.ts.map

package/dist/sds-textfield/sds-textfield.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-textfield.styles.d.ts","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiHlB,CAAC"}

package/dist/sds-textfield/sds-textfield.styles.js

@@ -0,0 +1,116 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		all: unset;
+		display: block;
+		text-align: start;
+	}
+
+	.sds-textfield {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		font-family: var(--sds-typography-font-family);
+
+		.sds-textfield__input-container {
+			max-width: var(--sds-typography-max-line-width);
+			position: relative;
+		}
+
+		.sds-textfield__input {
+			box-sizing: border-box;
+			color: var(--sds-color-semantic-text-default);
+			padding: 0.75rem 1rem;
+			line-height: 1.25rem;
+			font-size: 1rem;
+			justify-content: flex-end;
+			border-radius: var(--sds-radius-4);
+			border: 1px solid var(--sds-color-semantic-border-default);
+			background: var(--sds-color-semantic-surface-default);
+			max-width: var(--sds-typography-max-line-width);
+			width: 100%;
+
+			&:hover {
+				border-color: var(--sds-color-semantic-border-strong);
+			}
+
+			&:focus {
+				outline: 2px solid var(--sds-color-semantic-border-focus);
+				outline-offset: 1px;
+			}
+
+			&:active {
+				border-color: var(--sds-color-semantic-border-action);
+				outline: none;
+			}
+		}
+
+		.sds-textfield__label {
+			color: var(--sds-color-semantic-text-default);
+			display: block;
+			font-size: 1rem;
+			font-weight: 500;
+			line-height: 1.5rem;
+			max-width: var(--sds-typography-max-line-width);
+		}
+
+		.sds-textfield__help-text {
+			color: var(--sds-color-semantic-text-subtle);
+			font-size: 1rem;
+			font-weight: 400;
+			line-height: 1.25rem;
+			margin: 0;
+			max-width: var(--sds-typography-max-line-width);
+		}
+
+		.sds-textfield__error-message {
+			margin: 0;
+			max-width: var(--sds-typography-max-line-width);
+			align-items: flex-start;
+			color: var(--sds-color-semantic-text-default);
+			display: flex;
+			line-height: 1.5rem;
+			gap: 0.25rem;
+		}
+	}
+
+	.sds-textfield--error {
+		color: var(--sds-color-semantic-text-default);
+		line-height: 1.5rem;
+
+		.sds-textfield__input,
+		.sds-textfield__input:hover {
+			border-color: var(--sds-color-semantic-border-critical);
+		}
+	}
+
+	.sds-textfield--disabled {
+		pointer-events: none;
+
+		.sds-textfield__label,
+		.sds-textfield__help-text,
+		.sds-textfield__error-message,
+		.sds-textfield__input {
+			color: var(--sds-color-semantic-text-disabled);
+		}
+
+		.sds-textfield__input {
+			border: 1px solid var(--sds-color-semantic-border-disabled);
+		}
+	}
+
+	.sds-textfield--has-icon {
+		.sds-textfield__input {
+			padding-right: 3.5rem;
+		}
+	}
+
+	::slotted([slot='after']) {
+		position: absolute;
+		top: 50%;
+		right: 1rem;
+		transform: translateY(-50%);
+		pointer-events: none;
+	}
+`;
+//# sourceMappingURL=sds-textfield.styles.js.map

package/dist/sds-textfield/sds-textfield.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-textfield.styles.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiHxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tall: unset;\n\t\tdisplay: block;\n\t\ttext-align: start;\n\t}\n\n\t.sds-textfield {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 0.25rem;\n\t\tfont-family: var(--sds-typography-font-family);\n\n\t\t.sds-textfield__input-container {\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t\tposition: relative;\n\t\t}\n\n\t\t.sds-textfield__input {\n\t\t\tbox-sizing: border-box;\n\t\t\tcolor: var(--sds-color-semantic-text-default);\n\t\t\tpadding: 0.75rem 1rem;\n\t\t\tline-height: 1.25rem;\n\t\t\tfont-size: 1rem;\n\t\t\tjustify-content: flex-end;\n\t\t\tborder-radius: var(--sds-radius-4);\n\t\t\tborder: 1px solid var(--sds-color-semantic-border-default);\n\t\t\tbackground: var(--sds-color-semantic-surface-default);\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t\twidth: 100%;\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: var(--sds-color-semantic-border-strong);\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\toutline: 2px solid var(--sds-color-semantic-border-focus);\n\t\t\t\toutline-offset: 1px;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tborder-color: var(--sds-color-semantic-border-action);\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t}\n\n\t\t.sds-textfield__label {\n\t\t\tcolor: var(--sds-color-semantic-text-default);\n\t\t\tdisplay: block;\n\t\t\tfont-size: 1rem;\n\t\t\tfont-weight: 500;\n\t\t\tline-height: 1.5rem;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\n\t\t.sds-textfield__help-text {\n\t\t\tcolor: var(--sds-color-semantic-text-subtle);\n\t\t\tfont-size: 1rem;\n\t\t\tfont-weight: 400;\n\t\t\tline-height: 1.25rem;\n\t\t\tmargin: 0;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\n\t\t.sds-textfield__error-message {\n\t\t\tmargin: 0;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t\talign-items: flex-start;\n\t\t\tcolor: var(--sds-color-semantic-text-default);\n\t\t\tdisplay: flex;\n\t\t\tline-height: 1.5rem;\n\t\t\tgap: 0.25rem;\n\t\t}\n\t}\n\n\t.sds-textfield--error {\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tline-height: 1.5rem;\n\n\t\t.sds-textfield__input,\n\t\t.sds-textfield__input:hover {\n\t\t\tborder-color: var(--sds-color-semantic-border-critical);\n\t\t}\n\t}\n\n\t.sds-textfield--disabled {\n\t\tpointer-events: none;\n\n\t\t.sds-textfield__label,\n\t\t.sds-textfield__help-text,\n\t\t.sds-textfield__error-message,\n\t\t.sds-textfield__input {\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t}\n\n\t\t.sds-textfield__input {\n\t\t\tborder: 1px solid var(--sds-color-semantic-border-disabled);\n\t\t}\n\t}\n\n\t.sds-textfield--has-icon {\n\t\t.sds-textfield__input {\n\t\t\tpadding-right: 3.5rem;\n\t\t}\n\t}\n\n\t::slotted([slot='after']) {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tright: 1rem;\n\t\ttransform: translateY(-50%);\n\t\tpointer-events: none;\n\t}\n`;\n"]}