@politiet/sheriff-web-components 0.1.3 → 0.6.0

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

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

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

@@ -0,0 +1,160 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		display: block;
+		box-sizing: border-box;
+	}
+
+	.sds-notification {
+		font-family: var(--sds-typography-font-family);
+		font-size: 1rem;
+		font-weight: 400;
+		line-height: 1.25;
+
+		display: flex;
+		gap: 0.5rem;
+
+		background-color: var(--sds-color-semantic-surface-info-subtle);
+		border: 1px solid var(--sds-color-semantic-surface-info-xtreme);
+		color: var(--sds-color-semantic-text-default);
+
+		text-align: left;
+	}
+
+	.sds-notification--success {
+		background-color: var(--sds-color-semantic-surface-ok-subtle);
+		border-color: var(--sds-color-semantic-surface-ok-xtreme);
+
+		.sds-notification__type {
+			background-color: var(--sds-color-semantic-surface-ok-xtreme);
+		}
+	}
+
+	.sds-notification--attention {
+		background-color: var(--sds-color-semantic-surface-attention-subtle);
+		border-color: var(--sds-color-semantic-surface-attention-xtreme);
+
+		.sds-notification__type {
+			background-color: var(--sds-color-semantic-surface-attention-xtreme);
+		}
+	}
+
+	.sds-notification--warning {
+		background-color: var(--sds-color-semantic-surface-warning-subtle);
+		border-color: var(--sds-color-semantic-surface-warning-xtreme);
+
+		.sds-notification__type {
+			background-color: var(--sds-color-semantic-surface-warning-xtreme);
+		}
+
+		.sds-notification__icon::before {
+			width: 4px;
+			height: 14px;
+		}
+	}
+
+	.sds-notification--critical {
+		background-color: var(--sds-color-semantic-surface-critical-subtle);
+		border-color: var(--sds-color-semantic-surface-critical-xtreme);
+
+		.sds-notification__type {
+			background-color: var(--sds-color-semantic-surface-critical-xtreme);
+		}
+
+		.sds-notification__icon::before {
+			width: 10px;
+			height: 10px;
+		}
+	}
+
+	.sds-notification__type {
+		background-color: var(--sds-color-semantic-surface-info-xtreme);
+		color: white;
+		padding: 1rem 0.5rem;
+	}
+
+	.sds-notification__content {
+		display: flex;
+		flex: 1;
+		gap: 1rem;
+		padding: 1rem 0.5rem;
+	}
+
+	.sds-notification__content-text {
+		flex: 1;
+	}
+
+	::slotted([slot='title']),
+	::slotted(:is(h1, h2, h3, h4, h5, h6)) {
+		color: var(--sds-color-semantic-text-default) !important;
+		font-size: 1rem !important;
+		font-style: normal !important;
+		font-weight: 700 !important;
+		line-height: 1.5 !important;
+		margin: 0 !important;
+		max-width: var(--sds-typography-max-line-width) !important;
+	}
+
+	::slotted([slot='message']),
+	::slotted(:is(p)) {
+		color: var(--sds-color-semantic-text-default) !important;
+		font-size: 1rem !important;
+		font-style: normal !important;
+		font-weight: 400 !important;
+		line-height: 1.5 !important;
+		margin: 0 !important;
+		max-width: var(--sds-typography-max-line-width) !important;
+	}
+
+	.sds-notification__icon {
+		display: block;
+		position: relative;
+		z-index: 1;
+
+		&::before {
+			content: '';
+			display: block;
+			width: 14px;
+			height: 14px;
+			background-color: black;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			z-index: -1;
+		}
+	}
+
+	.sds-notification__remove-btn {
+		border: 0;
+		border-radius: var(--sds-radius-4);
+		background: transparent;
+		cursor: pointer;
+		flex: 0 1 auto;
+		padding: 0;
+		width: 24px;
+		height: 24px;
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		&:focus {
+			outline: 2px solid var(--sds-color-semantic-surface-action-default);
+			outline-offset: 1px;
+		}
+
+		&:hover {
+			background-color: var(--sds-color-semantic-surface-action-subtle);
+			border: 2px solid var(--sds-color-semantic-surface-action-hover);
+		}
+
+		&:active {
+			background-color: var(--sds-color-semantic-surface-action-active);
+			border: 2px solid var(--sds-color-semantic-surface-action-active);
+			color: var(--sds-color-semantic-text-on-action);
+			outline: 0;
+		}
+	}
+`;
+//# sourceMappingURL=sds-notification.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-notification.styles.js","sourceRoot":"","sources":["../../src/sds-notification/sds-notification.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6JxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-notification {\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\n\t\tdisplay: flex;\n\t\tgap: 0.5rem;\n\n\t\tbackground-color: var(--sds-color-semantic-surface-info-subtle);\n\t\tborder: 1px solid var(--sds-color-semantic-surface-info-xtreme);\n\t\tcolor: var(--sds-color-semantic-text-default);\n\n\t\ttext-align: left;\n\t}\n\n\t.sds-notification--success {\n\t\tbackground-color: var(--sds-color-semantic-surface-ok-subtle);\n\t\tborder-color: var(--sds-color-semantic-surface-ok-xtreme);\n\n\t\t.sds-notification__type {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-ok-xtreme);\n\t\t}\n\t}\n\n\t.sds-notification--attention {\n\t\tbackground-color: var(--sds-color-semantic-surface-attention-subtle);\n\t\tborder-color: var(--sds-color-semantic-surface-attention-xtreme);\n\n\t\t.sds-notification__type {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-attention-xtreme);\n\t\t}\n\t}\n\n\t.sds-notification--warning {\n\t\tbackground-color: var(--sds-color-semantic-surface-warning-subtle);\n\t\tborder-color: var(--sds-color-semantic-surface-warning-xtreme);\n\n\t\t.sds-notification__type {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-warning-xtreme);\n\t\t}\n\n\t\t.sds-notification__icon::before {\n\t\t\twidth: 4px;\n\t\t\theight: 14px;\n\t\t}\n\t}\n\n\t.sds-notification--critical {\n\t\tbackground-color: var(--sds-color-semantic-surface-critical-subtle);\n\t\tborder-color: var(--sds-color-semantic-surface-critical-xtreme);\n\n\t\t.sds-notification__type {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-critical-xtreme);\n\t\t}\n\n\t\t.sds-notification__icon::before {\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t}\n\t}\n\n\t.sds-notification__type {\n\t\tbackground-color: var(--sds-color-semantic-surface-info-xtreme);\n\t\tcolor: white;\n\t\tpadding: 1rem 0.5rem;\n\t}\n\n\t.sds-notification__content {\n\t\tdisplay: flex;\n\t\tflex: 1;\n\t\tgap: 1rem;\n\t\tpadding: 1rem 0.5rem;\n\t}\n\n\t.sds-notification__content-text {\n\t\tflex: 1;\n\t}\n\n\t::slotted([slot='title']),\n\t::slotted(:is(h1, h2, h3, h4, h5, h6)) {\n\t\tcolor: var(--sds-color-semantic-text-default) !important;\n\t\tfont-size: 1rem !important;\n\t\tfont-style: normal !important;\n\t\tfont-weight: 700 !important;\n\t\tline-height: 1.5 !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--sds-typography-max-line-width) !important;\n\t}\n\n\t::slotted([slot='message']),\n\t::slotted(:is(p)) {\n\t\tcolor: var(--sds-color-semantic-text-default) !important;\n\t\tfont-size: 1rem !important;\n\t\tfont-style: normal !important;\n\t\tfont-weight: 400 !important;\n\t\tline-height: 1.5 !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--sds-typography-max-line-width) !important;\n\t}\n\n\t.sds-notification__icon {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\tz-index: 1;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t\tbackground-color: black;\n\t\t\tposition: absolute;\n\t\t\ttop: 50%;\n\t\t\tleft: 50%;\n\t\t\ttransform: translate(-50%, -50%);\n\t\t\tz-index: -1;\n\t\t}\n\t}\n\n\t.sds-notification__remove-btn {\n\t\tborder: 0;\n\t\tborder-radius: var(--sds-radius-4);\n\t\tbackground: transparent;\n\t\tcursor: pointer;\n\t\tflex: 0 1 auto;\n\t\tpadding: 0;\n\t\twidth: 24px;\n\t\theight: 24px;\n\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t&:focus {\n\t\t\toutline: 2px solid var(--sds-color-semantic-surface-action-default);\n\t\t\toutline-offset: 1px;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-hover);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t}\n\t}\n`;\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-paragraph.d.ts","sourceRoot":"","sources":["../../src/sds-paragraph/sds-paragraph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,KAAK,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAE7B,qBACa,YAAa,SAAQ,UAAU;IAE3C,OAAgB,MAAM,4BAAY;IAIlC,IAAI,EAAE,IAAI,CAAQ;IAET,MAAM;CAYf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}

package/dist/sds-paragraph/sds-paragraph.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-paragraph.styles';
+let SDSParagraph = class SDSParagraph extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Reactive Props
+        this.size = 'xl';
+    }
+    render() {
+        const styleClasses = {
+            'sds-paragraph': true,
+            'sds-paragraph--xl': this.size === 'xl',
+            'sds-paragraph--l': this.size === 'l',
+            'sds-paragraph--m': this.size === 'm',
+        };
+        const classes = classMap(styleClasses);
+        return html `<p class=${classes}><slot></slot></p>`;
+    }
+};
+// Styling
+SDSParagraph.styles = [styles];
+__decorate([
+    property({ type: String })
+], SDSParagraph.prototype, "size", void 0);
+SDSParagraph = __decorate([
+    customElement('sds-paragraph')
+], SDSParagraph);
+export { SDSParagraph };
+//# sourceMappingURL=sds-paragraph.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-paragraph.js","sourceRoot":"","sources":["../../src/sds-paragraph/sds-paragraph.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,wBAAwB,CAAC;AAKzC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAIN,iBAAiB;QAEjB,SAAI,GAAS,IAAI,CAAC;IAcnB,CAAC;IAZS,MAAM;QACd,MAAM,YAAY,GAAG;YACpB,eAAe,EAAE,IAAI;YACrB,mBAAmB,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACvC,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG;YACrC,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG;SACrC,CAAC;QAEF,MAAM,OAAO,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;QAEvC,OAAO,IAAI,CAAA,YAAY,OAAO,oBAAoB,CAAC;IACpD,CAAC;;AAlBD,UAAU;AACM,mBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAIlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACT;AANN,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAoBxB","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-paragraph.styles';\n\ntype Size = 'xl' | 'l' | 'm';\n\n@customElement('sds-paragraph')\nexport class SDSParagraph extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String })\n\tsize: Size = 'xl';\n\n\toverride render() {\n\t\tconst styleClasses = {\n\t\t\t'sds-paragraph': true,\n\t\t\t'sds-paragraph--xl': this.size === 'xl',\n\t\t\t'sds-paragraph--l': this.size === 'l',\n\t\t\t'sds-paragraph--m': this.size === 'm',\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-paragraph': SDSParagraph;\n\t}\n}\n"]}

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

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

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

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

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

@@ -0,0 +1,37 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		display: block;
+	}
+
+	.sds-paragraph {
+		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-paragraph--xl {
+		font-size: 1.25rem;
+		line-height: 1.4;
+	}
+
+	.sds-paragraph--l {
+		font-size: 1.125rem;
+		line-height: 1.333;
+	}
+
+	.sds-paragraph--m {
+		font-size: 1rem;
+		line-height: 1.5;
+	}
+
+	@media (max-width: 640px) {
+		.sds-paragraph--m {
+			line-height: 1.375;
+		}
+	}
+`;
+//# sourceMappingURL=sds-paragraph.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-paragraph.styles.js","sourceRoot":"","sources":["../../src/sds-paragraph/sds-paragraph.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t}\n\n\t.sds-paragraph {\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-paragraph--xl {\n\t\tfont-size: 1.25rem;\n\t\tline-height: 1.4;\n\t}\n\n\t.sds-paragraph--l {\n\t\tfont-size: 1.125rem;\n\t\tline-height: 1.333;\n\t}\n\n\t.sds-paragraph--m {\n\t\tfont-size: 1rem;\n\t\tline-height: 1.5;\n\t}\n\n\t@media (max-width: 640px) {\n\t\t.sds-paragraph--m {\n\t\t\tline-height: 1.375;\n\t\t}\n\t}\n`;\n"]}

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

@@ -0,0 +1,49 @@
+import { LitElement } from 'lit';
+/**
+ * TODO: Required state missing
+ */
+export declare class SDSRadio extends LitElement {
+    static styles: import("lit").CSSResult[];
+    disabled: boolean;
+    required: boolean;
+    label: string;
+    hideLabel: boolean;
+    name?: string;
+    value?: string;
+    checked: boolean;
+    error: boolean;
+    control: HTMLInputElement;
+    static formAssociated: boolean;
+    readonly internals: ElementInternals;
+    private _initialChecked;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleKeydown;
+    formResetCallback(): void;
+    private _validate;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private _uncheckSiblings;
+    private readonly _handleChange;
+    private readonly _handleFocus;
+    private readonly _handleBlur;
+    get form(): HTMLFormElement | null;
+    get type(): string;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    formDisabledCallback(disabled: boolean): void;
+    focus(): void;
+    blur(): void;
+    click(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-radio': SDSRadio;
+    }
+}
+//# sourceMappingURL=sds-radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-radio.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAMhD;;GAEG;AAEH,qBACa,QAAS,SAAQ,UAAU;IAEvC,OAAgB,MAAM,4BAAY;IAGU,QAAQ,EAAE,OAAO,CAAS;IAC1B,QAAQ,EAAE,OAAO,CAAS;IAC3B,KAAK,EAAE,MAAM,CAAM;IACO,SAAS,EAAE,OAAO,CAAS;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACC,OAAO,UAAS;IAChB,KAAK,UAAS;IAG1D,OAAO,EAAG,gBAAgB,CAAC;IAE3B,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAC5C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IAUjB,oBAAoB;IAK7B,OAAO,CAAC,cAAc,CA8BpB;IAEF,iBAAiB;IAOjB,OAAO,CAAC,SAAS;IAQR,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAiB1E,OAAO,CAAC,gBAAgB;IAiBxB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAa5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAG3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAG1B;IAEF,IAAI,IAAI,2BAEP;IAED,IAAI,IAAI,WAEP;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,YAAY,YAEf;IAED,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAIzB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAIxC,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAKpC,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;CA+Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}

package/dist/sds-radio/sds-radio.js

@@ -0,0 +1,241 @@
+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, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './sds-radio.styles';
+/**
+ * TODO: Required state missing
+ */
+let SDSRadio = class SDSRadio extends LitElement {
+    constructor() {
+        super();
+        // Props
+        this.disabled = false;
+        this.required = false;
+        this.label = '';
+        this.hideLabel = false;
+        this.checked = false;
+        this.error = false;
+        this._initialChecked = false;
+        this._handleKeydown = (event) => {
+            if (!this.name || this.disabled)
+                return;
+            const root = this.getRootNode();
+            const radios = Array.from(root.querySelectorAll(`sds-radio[name="${this.name}"]`));
+            const currentIndex = radios.indexOf(this);
+            if (currentIndex === -1)
+                return;
+            let targetIndex = null;
+            switch (event.key) {
+                case 'ArrowUp':
+                case 'ArrowLeft':
+                    // Focus previous sibling, wrap around to last if necessary
+                    targetIndex = currentIndex > 0 ? currentIndex - 1 : radios.length - 1;
+                    break;
+                case 'ArrowDown':
+                case 'ArrowRight':
+                    // Focus next sibling, wrap around to first if necessary
+                    targetIndex = currentIndex < radios.length - 1 ? currentIndex + 1 : 0;
+                    break;
+                default:
+                    return; // Exit if no relevant key is pressed
+            }
+            // Focus the target radio (delegatesFocus handles focusing the input)
+            const targetRadio = radios[targetIndex];
+            targetRadio?.focus();
+            event.preventDefault();
+        };
+        this._handleChange = (event) => {
+            if (!this.disabled) {
+                const elem = event.target;
+                this.checked = elem.checked;
+                this._validate();
+                this.dispatchEvent(new CustomEvent('change', {
+                    detail: { checked: this.checked, value: this.value },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        };
+        this._handleFocus = (event) => {
+            event.stopImmediatePropagation();
+            this.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));
+        };
+        this._handleBlur = (event) => {
+            event.stopImmediatePropagation();
+            this.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));
+        };
+        this.internals = this.attachInternals();
+        this.attachShadow({ mode: 'open', delegatesFocus: true });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.internals.role = 'radio';
+        if (!this._initialChecked) {
+            this._initialChecked = this.checked;
+        }
+        this._validate();
+        this.addEventListener('keydown', this._handleKeydown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('keydown', this._handleKeydown);
+    }
+    formResetCallback() {
+        this.checked = this._initialChecked;
+        this.control.checked = this._initialChecked;
+        this.internals.setFormValue(this.checked ? this.value ?? null : null);
+        this._validate();
+    }
+    _validate() {
+        if (this.required && !this.checked) {
+            this.setCustomValidity('This field is required.');
+        }
+        else {
+            this.setCustomValidity('');
+        }
+    }
+    updated(changedProperties) {
+        super.updated?.(changedProperties);
+        if (changedProperties.has('checked')) {
+            this._validate();
+            if (this.checked) {
+                this._uncheckSiblings();
+                this.internals.setFormValue(this.value ?? null);
+            }
+            else {
+                this.internals.setFormValue(null);
+            }
+        }
+        if (changedProperties.has('required') && this.control) {
+            this.control.required = this.required;
+        }
+    }
+    _uncheckSiblings() {
+        if (!this.name)
+            return;
+        const root = this.getRootNode();
+        const radios = root.querySelectorAll(`sds-radio[name="${this.name}"]`);
+        radios.forEach((radio) => {
+            if (radio !== this) {
+                radio.checked = false;
+                radio.internals.setFormValue(null);
+                const input = radio.shadowRoot?.querySelector('#control');
+                if (input) {
+                    input.checked = false;
+                }
+            }
+        });
+    }
+    get form() {
+        return this.internals.form;
+    }
+    get type() {
+        return this.localName;
+    }
+    get validity() {
+        return this.internals.validity;
+    }
+    get validationMessage() {
+        return this.internals.validationMessage;
+    }
+    get willValidate() {
+        return this.internals.willValidate;
+    }
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        return this.internals.reportValidity();
+    }
+    setCustomValidity(message) {
+        this.internals.setValidity({ customError: !!message }, message);
+    }
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+        if (this.control)
+            this.control.disabled = disabled;
+    }
+    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 radioClasses = {
+            'sds-radio': true,
+            'sds-radio--error': Boolean(this.error),
+        };
+        const inputClasses = {
+            'sds-radio__input': true,
+            'sds-radio__input--error': Boolean(this.error),
+        };
+        return html `
+			<div class="${classMap(radioClasses)}">
+				<label class="sds-radio__label" for="control">
+					<input
+						id="control"
+						type="radio"
+						name="${ifDefined(this.name)}"
+						value="${ifDefined(this.value)}"
+						?checked="${this.checked}"
+						?disabled="${this.disabled}"
+						@change="${this._handleChange}"
+						@focus="${this._handleFocus}"
+						@blur="${this._handleBlur}"
+						class="${classMap(inputClasses)}"
+					/>
+					${this.label ? html `<span class="sds-radio__text">${this.label}</span>` : nothing}
+				</label>
+			</div>
+		`;
+    }
+};
+// Styling
+SDSRadio.styles = [styles];
+SDSRadio.formAssociated = true;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSRadio.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSRadio.prototype, "required", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSRadio.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-label' })
+], SDSRadio.prototype, "hideLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSRadio.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], SDSRadio.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSRadio.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSRadio.prototype, "error", void 0);
+__decorate([
+    query('#control')
+], SDSRadio.prototype, "control", void 0);
+SDSRadio = __decorate([
+    customElement('sds-radio')
+], SDSRadio);
+export { SDSRadio };
+//# sourceMappingURL=sds-radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-radio.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-radio.styles';\n\n/**\n * TODO: Required state missing\n */\n\n@customElement('sds-radio')\nexport class SDSRadio extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Props\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, reflect: true }) required: boolean = false;\n\t@property({ type: String, reflect: true }) label: string = '';\n\t@property({ type: Boolean, reflect: true, attribute: 'hide-label' }) hideLabel: boolean = false;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String }) value?: string;\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: Boolean, reflect: true }) error = false;\n\n\t@query('#control')\n\tcontrol!: HTMLInputElement;\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\tprivate _initialChecked: boolean = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.internals.role = 'radio';\n\t\tif (!this._initialChecked) {\n\t\t\tthis._initialChecked = this.checked;\n\t\t}\n\t\tthis._validate();\n\t\tthis.addEventListener('keydown', this._handleKeydown);\n\t}\n\n\toverride disconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t\tthis.removeEventListener('keydown', this._handleKeydown);\n\t}\n\n\tprivate _handleKeydown = (event: KeyboardEvent) => {\n\t\tif (!this.name || this.disabled) return;\n\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radios = Array.from(root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`));\n\t\tconst currentIndex = radios.indexOf(this);\n\n\t\tif (currentIndex === -1) return;\n\n\t\tlet targetIndex: number | null = null;\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowUp':\n\t\t\tcase 'ArrowLeft':\n\t\t\t\t// Focus previous sibling, wrap around to last if necessary\n\t\t\t\ttargetIndex = currentIndex > 0 ? currentIndex - 1 : radios.length - 1;\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\tcase 'ArrowRight':\n\t\t\t\t// Focus next sibling, wrap around to first if necessary\n\t\t\t\ttargetIndex = currentIndex < radios.length - 1 ? currentIndex + 1 : 0;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\treturn; // Exit if no relevant key is pressed\n\t\t}\n\n\t\t// Focus the target radio (delegatesFocus handles focusing the input)\n\t\tconst targetRadio = radios[targetIndex];\n\t\ttargetRadio?.focus();\n\t\tevent.preventDefault();\n\t};\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tthis.control.checked = this._initialChecked;\n\t\tthis.internals.setFormValue(this.checked ? this.value ?? null : null);\n\t\tthis._validate();\n\t}\n\n\tprivate _validate() {\n\t\tif (this.required && !this.checked) {\n\t\t\tthis.setCustomValidity('This field is required.');\n\t\t} else {\n\t\t\tthis.setCustomValidity('');\n\t\t}\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated?.(changedProperties);\n\t\tif (changedProperties.has('checked')) {\n\t\t\tthis._validate();\n\t\t\tif (this.checked) {\n\t\t\t\tthis._uncheckSiblings();\n\t\t\t\tthis.internals.setFormValue(this.value ?? null);\n\t\t\t} else {\n\t\t\t\tthis.internals.setFormValue(null);\n\t\t\t}\n\t\t}\n\n\t\tif (changedProperties.has('required') && this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t}\n\n\tprivate _uncheckSiblings() {\n\t\tif (!this.name) return;\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radios = root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`);\n\n\t\tradios.forEach((radio) => {\n\t\t\tif (radio !== this) {\n\t\t\t\tradio.checked = false;\n\t\t\t\tradio.internals.setFormValue(null);\n\t\t\t\tconst input: HTMLInputElement | null | undefined = radio.shadowRoot?.querySelector('#control');\n\t\t\t\tif (input) {\n\t\t\t\t\tinput.checked = false;\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tif (!this.disabled) {\n\t\t\tconst elem = event.target as HTMLInputElement;\n\t\t\tthis.checked = elem.checked;\n\t\t\tthis._validate();\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\tdetail: { checked: this.checked, value: this.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 _handleFocus = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tget form() {\n\t\treturn this.internals.form;\n\t}\n\n\tget type() {\n\t\treturn this.localName;\n\t}\n\n\tget validity() {\n\t\treturn this.internals.validity;\n\t}\n\n\tget validationMessage() {\n\t\treturn this.internals.validationMessage;\n\t}\n\n\tget willValidate() {\n\t\treturn this.internals.willValidate;\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.internals.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.internals.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.internals.setValidity({ customError: !!message }, message);\n\t}\n\n\tformDisabledCallback(disabled: boolean): void {\n\t\tthis.disabled = disabled;\n\t\tif (this.control) this.control.disabled = disabled;\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 radioClasses = {\n\t\t\t'sds-radio': true,\n\t\t\t'sds-radio--error': Boolean(this.error),\n\t\t};\n\n\t\tconst inputClasses = {\n\t\t\t'sds-radio__input': true,\n\t\t\t'sds-radio__input--error': Boolean(this.error),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(radioClasses)}\">\n\t\t\t\t<label class=\"sds-radio__label\" for=\"control\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tid=\"control\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t@change=\"${this._handleChange}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t\tclass=\"${classMap(inputClasses)}\"\n\t\t\t\t\t/>\n\t\t\t\t\t${this.label ? html`<span class=\"sds-radio__text\">${this.label}</span>` : nothing}\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-radio': SDSRadio;\n\t}\n}\n"]}

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

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

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

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