@cupra/ui-kit 1.0.0-canary.8 → 1.0.0

package/dist/components/ds-modal/styles/common.styles.js

@@ -0,0 +1,289 @@
+import { cssQueries as t } from "../../../utils/cssQueries.js";
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { css as n } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const l = n`
+    :host {
+        transition: display 300ms ease allow-discrete;
+    }
+
+    .animate {
+        transition:
+            opacity 300ms ease,
+            display 300ms ease allow-discrete;
+    }
+
+    .container {
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        opacity: 1;
+        @starting-style {
+            opacity: 0;
+        }
+    }
+
+    .open {
+        display: flex;
+    }
+
+    .close {
+        display: none;
+        opacity: 0;
+    }
+
+    .close-button {
+        position: absolute;
+        right: 8px;
+        top: 24px;
+        z-index: 1;
+    }
+
+    .content-container {
+        max-height: calc(100dvh - 48px);
+        box-sizing: content-box;
+        width: 100%;
+        display: grid;
+        grid-gap: 16px;
+        grid-template-rows: auto 1fr auto auto;
+        grid-template-areas:
+            'title'
+            'content'
+            'cancelButton'
+            'confirmButton';
+    }
+
+    ::slotted([slot='title']) {
+        grid-area: title;
+        width: calc(100% - 32px);
+    }
+
+    ::slotted([slot='content']) {
+        grid-area: content;
+        overflow: auto;
+        margin: 16px 0 24px;
+    }
+
+    .cancel-button {
+        grid-area: cancelButton;
+    }
+
+    .confirm-button {
+        grid-area: confirmButton;
+    }
+
+    ${t.m} {
+        .content-container.full-width {
+            max-width: 700px;
+        }
+
+        .content-container {
+            max-width: 456px;
+            grid-row-gap: 40px;
+            grid-column-gap: 32px;
+            grid-template-rows: auto 1fr auto;
+            grid-template-columns: 1fr 1fr;
+            grid-template-areas:
+                'title title'
+                'content content'
+                'cancelButton confirmButton';
+        }
+
+        ::slotted([slot='title']) {
+            width: 100%;
+        }
+
+        ::slotted([slot='content']) {
+            margin: 0;
+        }
+
+        .close-button {
+            right: 24px;
+            top: 24px;
+        }
+    }
+
+    ${t.l} {
+        .content-container.full-width {
+            max-width: 952px;
+        }
+
+        .content-container {
+            max-width: 624px;
+            grid-row-gap: 40px;
+            grid-column-gap: 32px;
+            grid-template-rows: auto 1fr auto;
+            grid-template-columns: 2fr 3fr 3fr;
+            grid-template-areas:
+                'title title title'
+                'content content content'
+                '. cancelButton confirmButton';
+        }
+    }
+
+    ${t.xl} {
+        .content-container.full-width {
+            max-width: 1138px;
+        }
+
+        .content-container {
+            max-width: 670px;
+            grid-row-gap: 40px;
+            grid-column-gap: 32px;
+            grid-template-rows: auto 1fr auto;
+            grid-template-columns: 1fr 1fr 1fr;
+            grid-template-areas:
+                'title title title'
+                'content content content'
+                '. cancelButton confirmButton';
+        }
+    }
+`, c = n`
+    .container.full-screen {
+        position: fixed;
+        height: 100%;
+        width: 100%;
+        top: 0;
+        left: 0;
+        box-sizing: border-box;
+    }
+
+    .container.full-screen .content-container {
+        width: calc(100dvw - 32px);
+    }
+
+    .icon {
+        margin-bottom: 32px;
+    }
+`, p = n`
+    .container.dialog {
+        position: fixed;
+        height: auto;
+        width: auto;
+        left: 50%;
+    }
+
+    .backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        max-height: 100dvh;
+        max-width: 100dvw;
+        opacity: 0.8;
+        @starting-style {
+            opacity: 0;
+        }
+    }
+
+    .container.dialog .content-container {
+        max-height: calc(100dvh - 64px);
+        padding: 24px 8px;
+        width: calc(100dvw - 32px);
+    }
+
+    ${t.m} {
+        .container.dialog .content-container {
+            max-height: calc(100dvh - 112px);
+            padding: 48px;
+        }
+    }
+`, d = n`
+    .container.fit {
+        position: absolute;
+    }
+`, s = n`
+    .container.full-screen.v-align-default {
+        justify-content: flex-start;
+        padding-top: 24px;
+    }
+
+    ${t.m} {
+        .container.full-screen.v-align-default {
+            justify-content: center;
+            padding-top: 0;
+        }
+    }
+
+    .container.dialog.v-align-default {
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .container.full-screen.v-align-start {
+        justify-content: flex-start;
+        padding-top: 24px;
+    }
+
+    ${t.m} {
+        .container.full-screen.v-align-start {
+            padding-top: 32px;
+        }
+    }
+
+    ${t.l} {
+        .container.full-screen.v-align-start {
+            padding-top: 32px;
+        }
+    }
+
+    ${t.xl} {
+        .container.full-screen.v-align-start {
+            padding-top: 64px;
+        }
+    }
+
+    .container.dialog.v-align-start {
+        top: 0;
+        transform: translateX(-50%);
+        margin-top: 24px;
+    }
+
+    .container.full-screen.v-align-center {
+        justify-content: center;
+        padding-top: 0;
+    }
+
+    .container.dialog.v-align-center {
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .container.full-screen.v-align-end {
+        justify-content: flex-end;
+        padding-bottom: 24px;
+    }
+
+    ${t.m} {
+        .container.full-screen.v-align-end {
+            padding-bottom: 32px;
+        }
+    }
+
+    ${t.l} {
+        .container.full-screen.v-align-end {
+            padding-bottom: 32px;
+        }
+    }
+
+    ${t.xl} {
+        .container.full-screen.v-align-end {
+            padding-bottom: 64px;
+        }
+    }
+
+    .container.dialog.v-align-end {
+        bottom: 0;
+        transform: translateX(-50%);
+        margin-bottom: 24px;
+    }
+`;
+export {
+  s as alignStyles,
+  l as commonStyles,
+  p as dialogStyles,
+  d as fitStyles,
+  c as fullScreenStyles
+};

package/dist/components/ds-password-input/ds-password-input.js

@@ -0,0 +1,43 @@
+import { DsTextInput as u } from "../ds-text-input/ds-text-input.js";
+import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
+import { property as p } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+var h = Object.defineProperty, c = Object.getOwnPropertyDescriptor, r = (e, a, o, s) => {
+  for (var t = s > 1 ? void 0 : s ? c(a, o) : a, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (t = (s ? l(a, o, t) : l(t)) || t);
+  return s && t && h(a, o, t), t;
+};
+let i = class extends u {
+  constructor() {
+    super(...arguments), this.dataAriaLabelHideButton = "", this.dataAriaLabelShowButton = "", this.visible = !1, this.handleClickIcon = () => {
+      this.visible ? (this.nativeInput.setAttribute("type", "password"), this.visible = !1) : (this.nativeInput.setAttribute("type", "text"), this.visible = !0);
+    };
+  }
+  get iconTemplate() {
+    var e;
+    return this.componentFactory.createIconButton({
+      class: "icon-button",
+      "icon-name": this.visible ? "eye-crossed-out" : "eye",
+      disabled: !!((e = this.nativeInput) != null && e.disabled),
+      size: this.size,
+      variant: "standard",
+      "@click": this.handleClickIcon,
+      "data-aria-label": this.visible ? this.dataAriaLabelHideButton || "hide" : this.dataAriaLabelShowButton || "show"
+    });
+  }
+};
+r([
+  p({ type: String, attribute: "data-aria-label-hide-button" })
+], i.prototype, "dataAriaLabelHideButton", 2);
+r([
+  p({ type: String, attribute: "data-aria-label-show-button" })
+], i.prototype, "dataAriaLabelShowButton", 2);
+r([
+  b()
+], i.prototype, "visible", 2);
+i = r([
+  d("ds-password-input", { extendComponentNames: ["ds-text-input"] })
+], i);
+export {
+  i as DsPasswordInput
+};

package/dist/components/ds-picker-item/ds-picker-item.js

@@ -0,0 +1,89 @@
+import { UiKitElement as h } from "../base/UiKitElement.js";
+import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
+import { ViewportMixin as v } from "../../mixins/ViewportMixin.js";
+import { booleanConverter as c } from "../../utils/booleanConverter.js";
+import { objectConverter as g } from "../../utils/objectConverter.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as f, html as C } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as m } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { pickerItemStyles as u } from "./styles/common.styles.js";
+var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, r = (i, s, l, o) => {
+  for (var e = o > 1 ? void 0 : o ? w(s, l) : s, a = i.length - 1, p; a >= 0; a--)
+    (p = i[a]) && (e = (o ? p(s, l, e) : p(e)) || e);
+  return o && e && y(s, l, e), e;
+};
+let t = class extends v(h) {
+  constructor() {
+    super(...arguments), this.variant = "without-border", this.size = "medium", this.loading = !1, this.selected = !1;
+  }
+  get containerClasses() {
+    const i = typeof this.size == "string" ? this.size : this.size[this.viewport];
+    return {
+      container: !0,
+      [i]: !!i,
+      selected: this.selected,
+      loading: this.loading
+    };
+  }
+  handleClick() {
+    this.selected || this.loading || this.dispatchEvent(
+      new CustomEvent("ds-picker-item:click", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  get imageContainerClasses() {
+    return {
+      "image-container": !0,
+      [this.variant]: !!this.variant
+    };
+  }
+  get loadingTemplate() {
+    return this.loading ? C`
+            <div class="overlay">
+                <svg class="spinner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
+                    <path
+                        d="M38.3334 20.0001C38.3334 30.1253 30.1252 38.3334 20 38.3334C9.8748 38.3334 1.66669 30.1253 1.66669 20.0001C1.66669 9.87486 9.8748 1.66675 20 1.66675C30.1252 1.66675 38.3334 9.87486 38.3334 20.0001ZM7.97929 20.0001C7.97929 26.6389 13.3612 32.0208 20 32.0208C26.6389 32.0208 32.0207 26.6389 32.0207 20.0001C32.0207 13.3612 26.6389 7.97935 20 7.97935C13.3612 7.97935 7.97929 13.3612 7.97929 20.0001Z"
+                        fill="#2F3A41"
+                    />
+                    <path
+                        d="M4.99998 19.9999C4.0795 19.9999 3.32468 20.748 3.41657 21.6639C3.69704 24.4593 4.68091 27.1482 6.28825 29.4744C8.2125 32.2592 10.9391 34.3921 14.1053 35.5893C17.2714 36.7865 20.7271 36.9913 24.0125 36.1764C27.2979 35.3614 30.2573 33.5655 32.4969 31.0273C34.7366 28.4892 36.1503 25.3294 36.55 21.9681C36.9498 18.6068 36.3165 15.2035 34.7346 12.2109C33.1527 9.21836 30.6971 6.7784 27.6944 5.21568C25.1863 3.91033 22.3958 3.26875 19.5872 3.33835C18.667 3.36115 18.0187 4.20321 18.1332 5.11653C18.2478 6.02985 19.0826 6.66636 20.0031 6.66657C22.1369 6.66706 24.2483 7.17991 26.1555 8.17253C28.5576 9.42271 30.5221 11.3747 31.7877 13.7687C33.0532 16.1628 33.5598 18.8854 33.24 21.5745C32.9202 24.2635 31.7893 26.7914 29.9975 28.8219C28.2058 30.8523 25.8383 32.2891 23.21 32.9411C20.5817 33.593 17.8171 33.4292 15.2842 32.4715C12.7513 31.5137 10.57 29.8074 9.0306 27.5795C7.80833 25.8106 7.03672 23.7795 6.77067 21.6623C6.65591 20.749 5.92045 19.9999 4.99998 19.9999Z"
+                        fill="#E1E6EA"
+                    />
+                </svg>
+            </div>
+        ` : f;
+  }
+  render() {
+    return C`
+            <div class=${m(this.containerClasses)} @click=${this.handleClick}>
+                <div class=${m(this.imageContainerClasses)}>
+                    <slot></slot>
+                </div>
+                ${this.loadingTemplate}
+            </div>
+        `;
+  }
+};
+t.styles = [u];
+r([
+  n({ type: String })
+], t.prototype, "variant", 2);
+r([
+  n({ type: String, converter: g })
+], t.prototype, "size", 2);
+r([
+  n({ type: Boolean, converter: c })
+], t.prototype, "loading", 2);
+r([
+  n({ type: Boolean, converter: c })
+], t.prototype, "selected", 2);
+t = r([
+  d("ds-picker-item")
+], t);
+export {
+  t as DsPickerItem
+};

package/dist/components/ds-picker-item/styles/common.styles.js

@@ -0,0 +1,12 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { css as t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const r = t`
+    :host {
+        display: contents;
+    }
+`;
+export {
+  r as pickerItemStyles
+};

package/dist/components/ds-portal/ds-portal.js

@@ -0,0 +1,41 @@
+import { customUiKitElement as i } from "../../decorators/customUiKitElement.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import { LitElement as u } from "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as d } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+var m = Object.defineProperty, f = Object.getOwnPropertyDescriptor, c = (r, e, o, s) => {
+  for (var t = s > 1 ? void 0 : s ? f(e, o) : e, n = r.length - 1, p; n >= 0; n--)
+    (p = r[n]) && (t = (s ? p(e, o, t) : p(t)) || t);
+  return s && t && m(e, o, t), t;
+};
+let a = class extends u {
+  constructor() {
+    super(...arguments), this.nodes = [], this.querySelectorText = "body";
+  }
+  render() {
+    return l`<slot></slot>`;
+  }
+  disconnectedCallback() {
+    var r;
+    super.disconnectedCallback(), (r = this.nodes) == null || r.forEach((e) => e.remove());
+  }
+  updated(r) {
+    super.updated(r), requestAnimationFrame(() => {
+      const e = document.querySelector(this.querySelectorText) || document.body;
+      if (!e) return;
+      const o = this.renderRoot.querySelector("slot"), s = (o == null ? void 0 : o.assignedNodes()) || [];
+      this.nodes = s, s.forEach((t) => {
+        e.appendChild(t);
+      });
+    });
+  }
+};
+c([
+  d({ type: String, attribute: "query-selector-text" })
+], a.prototype, "querySelectorText", 2);
+a = c([
+  i("ds-portal", { skipTagAsComponentName: !0 })
+], a);
+export {
+  a as DsPortal
+};

package/dist/components/ds-progress-bar/ds-progress-bar.js

@@ -0,0 +1,34 @@
+import { DsBaseProgressBar as i } from "../base/ds-base-progress-bar/ds-base-progress-bar.js";
+import { customUiKitElement as f } from "../../decorators/customUiKitElement.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as n, html as _ } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as g } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { commonStyles as v } from "./styles/common.styles.js";
+var y = Object.defineProperty, c = Object.getOwnPropertyDescriptor, h = Object.getPrototypeOf, P = Reflect.get, a = (o, e, s, p) => {
+  for (var r = p > 1 ? void 0 : p ? c(e, s) : e, m = o.length - 1, l; m >= 0; m--)
+    (l = o[m]) && (r = (p ? l(e, s, r) : l(r)) || r);
+  return p && r && y(e, s, r), r;
+}, u = (o, e, s) => P(h(o), s, e);
+let t = class extends i {
+  render() {
+    return this.show ? _`
+                  <style>
+                      .fill {
+                          width: ${this.progress}%;
+                      }
+                  </style>
+                  ${this.barTemplate}
+              ` : n;
+  }
+};
+t.styles = [...u(t, t, "styles"), v];
+a([
+  g({ type: Number })
+], t.prototype, "progress", 2);
+t = a([
+  f("ds-progress-bar", { skipTagAsComponentName: !0 })
+], t);
+export {
+  t as DsProgressBar
+};

package/dist/components/ds-progress-bar/styles/common.styles.js

@@ -0,0 +1,12 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { css as o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const r = o`
+    .fill {
+        transition: all 200ms ease-in-out;
+    }
+`;
+export {
+  r as commonStyles
+};

package/dist/components/ds-radio/ds-radio.js

@@ -0,0 +1,111 @@
+import { UiKitElement as h } from "../base/UiKitElement.js";
+import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as d } from "../../utils/booleanConverter.js";
+import { htmlWithTokens as u } from "../../utils/htmlWithTokens.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as m } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { queryAssignedNodes as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-nodes.js";
+import { classMap as b } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as y } from "./styles/common.styles.js";
+var v = Object.defineProperty, k = Object.getOwnPropertyDescriptor, s = (e, l, i, a) => {
+  for (var o = a > 1 ? void 0 : a ? k(l, i) : l, n = e.length - 1, p; n >= 0; n--)
+    (p = e[n]) && (o = (a ? p(l, i, o) : p(o)) || o);
+  return a && o && v(l, i, o), o;
+};
+let t = class extends h {
+  constructor() {
+    super(...arguments), this.readonly = !1, this.checked = !1, this.disabled = !1, this.mode = "light", this.size = "large", this.handleClickInput = (e) => {
+      this.readonly && e.preventDefault();
+    }, this.handleClickLabel = (e) => {
+      e.stopImmediatePropagation(), this.dispatchEvent(
+        new CustomEvent("click", {
+          bubbles: !0,
+          composed: !0,
+          detail: {
+            value: this.value
+          }
+        })
+      ), this.readonly || (this.input.checked = !0, this.dispatchEvent(
+        new CustomEvent("change", {
+          bubbles: !0,
+          composed: !0,
+          detail: {
+            value: this.value
+          }
+        })
+      ));
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.input = document.createElement("input"), this.input.type = "radio", this.input.slot = "radio", this.input.ariaLabel = this.value, this.input.addEventListener("click", this.handleClickInput), this.appendChild(this.input);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.input.removeEventListener("click", this.handleClickInput);
+  }
+  updated(e) {
+    super.updated(e), ["name", "value"].forEach((i) => {
+      e.has(i) && (this.input[i] = this[i]);
+    }), e.has("checked") && requestAnimationFrame(() => {
+      this.input.checked = this.checked;
+    }), e.has("disabled") && (this.input.disabled = this.disabled);
+  }
+  get labelClasses() {
+    return {
+      disabled: this.disabled,
+      [this.mode]: !!this.mode,
+      [this.size]: !!this.size
+    };
+  }
+  get styleTokens() {
+    return u`
+            <style>
+                :host{
+                    color-scheme: ${this.mode};
+                    pointer-events: ${this.disabled ? "none" : "visible"};
+                }
+            </style>
+        `;
+  }
+  render() {
+    return m`
+            ${this.styleTokens}
+            <label @click=${this.handleClickLabel} class=${b(this.labelClasses)}>
+                <slot name="radio"></slot>
+                <slot></slot>
+            </label>
+        `;
+  }
+};
+t.styles = [y];
+s([
+  r({ type: Boolean, converter: d, reflect: !0 })
+], t.prototype, "readonly", 2);
+s([
+  r({ type: String, reflect: !0 })
+], t.prototype, "name", 2);
+s([
+  r({ type: String })
+], t.prototype, "value", 2);
+s([
+  r({ type: Boolean, converter: d, reflect: !0 })
+], t.prototype, "checked", 2);
+s([
+  r({ type: Boolean, converter: d, reflect: !0 })
+], t.prototype, "disabled", 2);
+s([
+  r({ type: String, reflect: !0 })
+], t.prototype, "mode", 2);
+s([
+  r({ type: String })
+], t.prototype, "size", 2);
+s([
+  f({ slot: "", flatten: !0 })
+], t.prototype, "_defaultSlotNodes", 2);
+t = s([
+  c("ds-radio")
+], t);
+export {
+  t as DsRadio
+};

package/dist/components/ds-radio/styles/common.styles.js

@@ -0,0 +1,44 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const o = e`
+    :host {
+        display: inline-block;
+    }
+
+    label {
+        width: 100%;
+        cursor: pointer;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    label ::slotted(input) {
+        cursor: inherit;
+        appearance: none;
+        background-color: transparent;
+        margin: 0;
+        font: inherit;
+        border-radius: 100%;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        border-style: solid;
+    }
+
+    label ::slotted(input)::before {
+        content: '';
+        border-radius: 100%;
+        transform: scale(0);
+        transition: 200ms transform ease-in-out;
+    }
+
+    label ::slotted(input:checked)::before {
+        transform: scale(1);
+    }
+`;
+export {
+  o as commonStyles
+};