@skf-design-system/ui-components 1.0.2-beta.1 → 1.0.2-beta.3

package/README.md

@@ -87,10 +87,16 @@ How you get started using our components is of course a bit different depending
 
 In order for our components to work as intended you need to import our global styles where appropiate e.g. App.tsx.
 
-```tsx
+```ts
 import '@skf-design-system/ui-components/styles/global.css';
 ```
 
+If you want to handle the loading of the SKF fonts yourself, you can use the alternative global css file:
+
+```ts
+import '@skf-design-system/ui-components/styles/global-alt.css';
+```
+
 ### Angular
 
 In order for our components to get the correct styling you need add our global styling to your project. In angular you can do that in the angular.json like this:

package/dist/components/accordion/accordion-item.component.js

@@ -1,17 +1,17 @@
 import "../icon/icon.js";
-import { SkfElement as l } from "../../internal/components/skf-element.js";
-import { componentStyles as p } from "../../styles/component.styles.js";
-import { property as a } from "lit/decorators.js";
-import { classMap as m } from "lit/directives/class-map.js";
-import { ifDefined as h } from "lit/directives/if-defined.js";
-import { literal as f, html as u } from "lit/static-html.js";
+import { SkfElement as p } from "../../internal/components/skf-element.js";
+import { componentStyles as m } from "../../styles/component.styles.js";
+import { property as i } from "lit/decorators.js";
+import { classMap as h } from "lit/directives/class-map.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import { literal as r, html as f } from "lit/static-html.js";
 import { styles as _ } from "./accordion-item.styles.js";
-var y = Object.defineProperty, i = (r, o, d, g) => {
-  for (var t = void 0, s = r.length - 1, c; s >= 0; s--)
-    (c = r[s]) && (t = c(o, d, t) || t);
-  return t && y(o, d, t), t;
+var g = Object.defineProperty, s = (d, e, c, y) => {
+  for (var a = void 0, o = d.length - 1, l; o >= 0; o--)
+    (l = d[o]) && (a = l(e, c, a) || a);
+  return a && g(e, c, a), a;
 };
-const n = class n extends l {
+const n = class n extends p {
   constructor() {
     super(...arguments), this.animated = !1, this.expanded = !1, this.headingAs = "h2", this.small = !1, this.truncate = !1, this._toggle = () => {
       this.dispatchEvent(
@@ -32,27 +32,38 @@ const n = class n extends l {
     this.expanded = !0;
   }
   render() {
-    const o = f`${this.headingAs}`;
-    return u`
-			<div class=${m({
+    let e;
+    switch (!0) {
+      case this.headingAs === "h3":
+        e = r`h3`;
+        break;
+      case this.headingAs === "h4":
+        e = r`h4`;
+        break;
+      default:
+        e = r`h2`;
+        break;
+    }
+    return f`
+			<div class=${h({
       "accordion-item": !0,
       "accordion-item--animated": this.animated,
       "accordion-item--expanded": this.expanded,
       "accordion-item--small": this.small,
       "accordion-item--truncate": this.truncate
     })}>
-				<${o} class="accordion-item__heading">
+				<${e} class="accordion-item__heading">
 					<button
 						@click=${this._toggle}
 						aria-controls="main"
-						aria-expanded=${h(this.expanded ? "true" : "false")}
+						aria-expanded=${u(this.expanded ? "true" : "false")}
 						class="accordion-item__btn"
 						type="button"
 					>
 						<span class="accordion-item__label">${this.heading}</span>
 						<skf-icon class="accordion-item__icon" name=${this.expanded ? "caretUp" : "caretDown"}></skf-icon>
 					</button>
-				</${o}>
+				</${e}>
 				<div class="accordion-item__body">
 					<div class="accordion-item__main" data-testid="main" id="main">
 						<slot></slot>
@@ -62,26 +73,26 @@ const n = class n extends l {
 		`;
   }
 };
-n.styles = [p, _];
-let e = n;
-i([
-  a({ type: Boolean, reflect: !0 })
-], e.prototype, "animated");
-i([
-  a({ type: Boolean, reflect: !0 })
-], e.prototype, "expanded");
-i([
-  a()
-], e.prototype, "heading");
-i([
-  a({ attribute: "heading-as" })
-], e.prototype, "headingAs");
-i([
-  a({ type: Boolean, reflect: !0 })
-], e.prototype, "small");
-i([
-  a({ type: Boolean, reflect: !0 })
-], e.prototype, "truncate");
+n.styles = [m, _];
+let t = n;
+s([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "animated");
+s([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "expanded");
+s([
+  i()
+], t.prototype, "heading");
+s([
+  i({ attribute: "heading-as" })
+], t.prototype, "headingAs");
+s([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "small");
+s([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "truncate");
 export {
-  e as SkfAccordionItem
+  t as SkfAccordionItem
 };

package/dist/components/accordion/accordion.component.d.ts

@@ -1,6 +1,6 @@
 import { SkfElement } from '../../internal/components/skf-element.js';
 import { type CSSResultGroup, type PropertyValues } from 'lit';
-import type { SkfAccordionItemHeadingType } from './accordion-item.js';
+import type { SkfAccordionItemHeadingType } from './accordion-item.component.js';
 /**
  * The `<skf-accordion>` component consists of one or more `<skf-accordion-item>` item(s) working together
  *

package/dist/components/accordion/accordion.component.js

@@ -1,12 +1,12 @@
 import { SkfElement as p } from "../../internal/components/skf-element.js";
-import { componentStyles as f } from "../../styles/component.styles.js";
-import { html as m } from "lit";
+import { componentStyles as m } from "../../styles/component.styles.js";
+import { html as f } from "lit";
 import { property as a, queryAssignedNodes as d } from "lit/decorators.js";
 import { classMap as c } from "lit/directives/class-map.js";
 import { styles as g } from "./accordion.styles.js";
-var y = Object.defineProperty, s = (u, t, i, l) => {
-  for (var r = void 0, o = u.length - 1, h; o >= 0; o--)
-    (h = u[o]) && (r = h(t, i, r) || r);
+var y = Object.defineProperty, s = (u, t, i, o) => {
+  for (var r = void 0, l = u.length - 1, h; l >= 0; l--)
+    (h = u[l]) && (r = h(t, i, r) || r);
   return r && y(t, i, r), r;
 };
 const n = class n extends p {
@@ -27,15 +27,15 @@ const n = class n extends p {
   _onChildToggle(t) {
     if (this.multiple || t.defaultPrevented) return;
     const i = t.target;
-    this.items.length && this.items.forEach((l) => {
-      l !== i && l.hasAttribute("expanded") && l.setClose();
+    this.items.length && this.items.forEach((o) => {
+      o !== i && o.hasAttribute("expanded") && o.setClose();
     });
   }
   render() {
-    return m`
+    return f`
 			<div class=${c({ "accordion--gap": this.gap })}>
 				<slot
-					@skf-collapse-toggle=${(t) => {
+					@skf-accordion-item-toggle=${(t) => {
       this._onChildToggle(t);
     }}
 					@slotchange=${this._setItemAttributes}
@@ -44,7 +44,7 @@ const n = class n extends p {
 		`;
   }
 };
-n.styles = [g, f];
+n.styles = [g, m];
 let e = n;
 s([
   a({ type: Boolean, reflect: !0 })

package/dist/components/breadcrumb/breadcrumb-item.d.ts

@@ -1,5 +1,5 @@
-import { SkfBreadcrumbItem } from './breadcrumb-item.component';
-export * from './breadcrumb-item.component';
+import { SkfBreadcrumbItem } from './breadcrumb-item.component.js';
+export * from './breadcrumb-item.component.js';
 export default SkfBreadcrumbItem;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -1,5 +1,5 @@
-import { SkfBreadcrumb } from './breadcrumb.component';
-export * from './breadcrumb.component';
+import { SkfBreadcrumb } from './breadcrumb.component.js';
+export * from './breadcrumb.component.js';
 export default SkfBreadcrumb;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/card/card.component.js

@@ -13,16 +13,16 @@ const n = class n extends f {
     super(...arguments), this.noBorder = !1, this.noPadding = !1, this.stretch = !1;
   }
   render() {
-    return d`<slot></slot>`;
+    return d`<slot id="root"></slot>`;
   }
 };
 n.styles = [m, u];
 let e = n;
 s([
-  o({ type: Boolean, attribute: "no-border", reflect: !0 })
+  o({ type: Boolean, reflect: !0, attribute: "no-border" })
 ], e.prototype, "noBorder");
 s([
-  o({ type: Boolean, attribute: "no-padding", reflect: !0 })
+  o({ type: Boolean, reflect: !0, attribute: "no-padding" })
 ], e.prototype, "noPadding");
 s([
   o({ type: Boolean, reflect: !0 })

package/dist/components/card/card.styles.js

@@ -1,33 +1,49 @@
 import { css as r } from "lit";
-const s = r`
+const a = r`
 	@layer components {
 		@layer base {
 			:host {
+				contain: layout;
+			}
+
+			#root {
+				--_skf-card-border-color: var(--skf-border-color-tertiary);
+				--_skf-card-padding: var(--skf-spacing-100);
+				--_skf-card-shadow: var(--skf-shadow-md);
+
 				background-color: var(--skf-bg-color-neutral-1);
-				border: var(--skf-border-width-sm) solid
-					var(--_skf-card-border-color, var(--skf-border-color-tertiary));
+				border: var(--skf-border-width-sm) solid var(--_skf-card-border-color);
 				border-radius: var(--skf-border-radius-sm);
-				box-shadow: var(--skf-shadow-md);
-				contain: layout;
-				padding: var(--_skf-card-padding, var(--skf-spacing-100));
+				box-shadow: var(--_skf-card-shadow);
+				display: block;
+				padding: var(--_skf-card-padding);
 			}
 		}
 
 		@layer mods {
-			:host([stretch]) {
-				block-size: 100%;
-			}
-
 			:host([no-border]) {
-				--_skf-card-border-color: transparent;
+				#root {
+					--_skf-card-border-color: transparent;
+					--_skf-card-shadow: none;
+				}
 			}
 
 			:host([no-padding]) {
-				--_skf-card-padding: 0;
+				#root {
+					--_skf-card-padding: 0;
+				}
+			}
+
+			:host([stretch]) {
+				block-size: 100%;
+
+				#root {
+					block-size: inherit;
+				}
 			}
 		}
 	}
 `;
 export {
-  s as styles
+  a as styles
 };

package/dist/components/{date-picker/datepicker.calendar.component.d.ts → datepicker/datepicker-calendar.component.d.ts}

@@ -6,7 +6,10 @@ interface DateParts {
     month?: number;
     day?: number;
 }
-export declare class SkfDatePickerCalendar extends SkfElement {
+/**
+ * @tagname skf-datepicker-calendar
+ */
+export declare class SkfDatepickerCalendar extends SkfElement {
     static styles: CSSResultGroup;
     /** @internal */
     _secondCalendarOffset: number;

package/dist/components/{date-picker/datepicker.calendar.component.js → datepicker/datepicker-calendar.component.js}

@@ -1,5 +1,3 @@
-import { dateFormatter as y } from "../date-picker-input/datepicker-input.helpers.js";
-import { compareDates as $ } from "./datepicker.helpers.js";
 import { SkfElement as O } from "../../internal/components/skf-element.js";
 import { watch as R } from "../../internal/helpers/watch.js";
 import { Temporal as m } from "@js-temporal/polyfill";
@@ -7,11 +5,13 @@ import { componentStyles as C } from "../../styles/component.styles.js";
 import { html as p } from "lit";
 import { property as g, state as M } from "lit/decorators.js";
 import { repeat as w } from "lit/directives/repeat.js";
-import { styles as F } from "./datepicker.calendar.styles.js";
-var A = Object.defineProperty, P = Object.getOwnPropertyDescriptor, d = (D, t, e, a) => {
-  for (var s = a > 1 ? void 0 : a ? P(t, e) : t, i = D.length - 1, h; i >= 0; i--)
+import { styles as F } from "./datepicker-calendar.styles.js";
+import { compareDates as $ } from "./datepicker-popup.helpers.js";
+import { dateFormatter as y } from "./datepicker.helpers.js";
+var P = Object.defineProperty, A = Object.getOwnPropertyDescriptor, d = (D, t, e, a) => {
+  for (var s = a > 1 ? void 0 : a ? A(t, e) : t, i = D.length - 1, h; i >= 0; i--)
     (h = D[i]) && (s = (a ? h(t, e, s) : h(s)) || s);
-  return a && s && A(t, e, s), s;
+  return a && s && P(t, e, s), s;
 };
 const E = class E extends O {
   constructor() {
@@ -411,5 +411,5 @@ d([
   R("date")
 ], o.prototype, "handleDateChange", 1);
 export {
-  o as SkfDatePickerCalendar
+  o as SkfDatepickerCalendar
 };

package/dist/components/datepicker/datepicker-calendar.d.ts

@@ -0,0 +1,8 @@
+import { SkfDatepickerCalendar } from './datepicker-calendar.component.js';
+export * from './datepicker-calendar.component.js';
+export default SkfDatepickerCalendar;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-datepicker-calendar': SkfDatepickerCalendar;
+    }
+}

package/dist/components/datepicker/datepicker-calendar.js

@@ -0,0 +1,6 @@
+import { SkfDatepickerCalendar as e } from "./datepicker-calendar.component.js";
+e.define("skf-datepicker-calendar");
+export {
+  e as SkfDatepickerCalendar,
+  e as default
+};

package/dist/components/{date-picker/datepicker.component.d.ts → datepicker/datepicker-popup.component.d.ts}

@@ -1,27 +1,12 @@
-import '../button/button';
+import '../button/button.js';
 import { SkfElement } from '../../internal/components/skf-element.js';
 import { type CSSResultGroup } from 'lit';
-import './datepicker';
-export interface SkfDatePickerDateRange {
+import './datepicker-calendar.js';
+export interface SkfDatepickerPopupDateRange {
     start: Date | null;
     end: Date | null;
 }
-/**
- * A date picker component that allows users to select a date or a range of dates.
- *
- * @element skf-datepicker
- * @fires selected-date-changed - When a date is selected
- * @fires selected-date-range-changed - When a range of dates is selected
- *
- * @prop {string} date - The date to display in the date picker
- * @prop {boolean} range - If true, the date picker will allow the selection of a range of dates
- * @prop {string} locale - The locale to use for formatting the date
- *
- * @slot - Default hint content placed inside the date picker
- *
- * @cssprop --max-width - The maximum width of the date picker
- */
-export declare class SkfDatePicker extends SkfElement {
+export declare class SkfDatepickerPopup extends SkfElement {
     static styles: CSSResultGroup;
     locale: string;
     date: string;
@@ -40,7 +25,7 @@ export declare class SkfDatePicker extends SkfElement {
      * Latest selectable date. (yyyy-mm-dd format)
      */
     selectableTo?: string;
-    selectedDateRange: SkfDatePickerDateRange;
+    selectedDateRange: SkfDatepickerPopupDateRange;
     /** @internal */
     private _date?;
     /** @internal */

package/dist/components/{date-picker/datepicker.component.js → datepicker/datepicker-popup.component.js}

@@ -1,19 +1,19 @@
 import "../button/button.js";
-import { dateFormatter as l, is as v } from "../date-picker-input/datepicker-input.helpers.js";
-import { SkfElement as R } from "../../internal/components/skf-element.js";
+import { SkfElement as v } from "../../internal/components/skf-element.js";
 import { watch as p } from "../../internal/helpers/watch.js";
-import { componentStyles as S } from "../../styles/component.styles.js";
+import { componentStyles as R } from "../../styles/component.styles.js";
 import { html as D } from "lit";
 import { property as o, state as m } from "lit/decorators.js";
-import "./datepicker.js";
-import { getDateParts as g, assertISODate as $, earliestDate as T, latestDate as C, compareDates as c, doAnimate as b } from "./datepicker.helpers.js";
-import { styles as k } from "./datepicker.styles.js";
+import "./datepicker-calendar.js";
+import { getDateParts as g, assertISODate as S, earliestDate as $, latestDate as T, compareDates as c, doAnimate as b } from "./datepicker-popup.helpers.js";
+import { styles as C } from "./datepicker-popup.styles.js";
+import { dateFormatter as l, is as k } from "./datepicker.helpers.js";
 var F = Object.defineProperty, E = Object.getOwnPropertyDescriptor, n = (w, e, t, a) => {
   for (var s = a > 1 ? void 0 : a ? E(e, t) : e, r = w.length - 1, d; r >= 0; r--)
     (d = w[r]) && (s = (a ? d(e, t, s) : d(s)) || s);
   return a && s && F(e, t, s), s;
 };
-const y = class y extends R {
+const y = class y extends v {
   constructor() {
     super(...arguments), this.locale = "en-CA", this.date = (/* @__PURE__ */ new Date()).toLocaleDateString(this.locale), this.id = "", this.range = !1, this.selectedDate = void 0, this.selectedDateRange = {
       start: null,
@@ -96,8 +96,8 @@ const y = class y extends R {
     this.style.setProperty("--max-width", this.range ? "43em" : "21em");
   }
   _handleDateChange() {
-    console.log("%cdate changed", "color:red", this.date), this.date = this.date && $(this.date) ? this.date : l(/* @__PURE__ */ new Date()), this.date = T(
-      C(this.date, this.selectableFrom ?? this.date),
+    console.log("%cdate changed", "color:red", this.date), this.date = this.date && S(this.date) ? this.date : l(/* @__PURE__ */ new Date()), this.date = $(
+      T(this.date, this.selectableFrom ?? this.date),
       this.selectableTo ?? this.date
     ), this._date = new Date(this.date), this._datePlusOneMonth = new Date(this._date.getFullYear(), this._date.getMonth() + 1, 1);
   }
@@ -113,7 +113,7 @@ const y = class y extends R {
   gotoDate(e) {
     if (e instanceof Date)
       this.date = l(e);
-    else if (v(e).dateISO())
+    else if (k(e).dateISO())
       this.date = e;
     else
       throw new Error("Invalid date format");
@@ -209,7 +209,7 @@ const y = class y extends R {
     )) : Promise.resolve();
   }
 };
-y.styles = [S, k];
+y.styles = [R, C];
 let i = y;
 n([
   o({ reflect: !0 })
@@ -257,5 +257,5 @@ n([
   p("selectedDate")
 ], i.prototype, "_handleSelectedDateChange", 1);
 export {
-  i as SkfDatePicker
+  i as SkfDatepickerPopup
 };

package/dist/components/datepicker/datepicker-popup.d.ts

@@ -0,0 +1,8 @@
+import { SkfDatepickerPopup } from './datepicker-popup.component.js';
+export * from './datepicker-popup.component.js';
+export default SkfDatepickerPopup;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-datepicker-popup': SkfDatepickerPopup;
+    }
+}

package/dist/components/{date-picker/datepicker.helpers.d.ts → datepicker/datepicker-popup.helpers.d.ts}

@@ -22,12 +22,12 @@ export declare function getDateParts(date?: undefined | string | Date | Temporal
  */
 export declare function compareDates(dateOne: Temporal.PlainDate | string, dateTwo: Temporal.PlainDate | string, granularity?: 'days' | 'months' | 'years'): 0 | 1 | -1;
 /**
- * @param dateOne - first date to compare as string
- * @param dateTwo - second date to compare as string
+ * @param dateOne - first date to compare as string (accepts Date and Temporal.PlainDate too)
+ * @param dateTwo - second date to compare as string (accepts Date and Temporal.PlainDate too)
  * @param unit - the unit to compare the dates by [days, months, years]
  * @returns the difference between the two dates in the specified unit
  */
-export declare function timeBetween(dateOne: Temporal.PlainDate | string, dateTwo: Temporal.PlainDate | string, unit?: 'days' | 'months' | 'years'): number;
+export declare function timeBetween(dateOne: Temporal.PlainDate | Date | string, dateTwo: Temporal.PlainDate | Date | string, unit?: 'days' | 'months' | 'years'): number;
 /**
  * @param dates - a list of dates to compare
  * @returns - the earliest date of the list

package/dist/components/datepicker/datepicker-popup.helpers.js

@@ -0,0 +1,83 @@
+import { Temporal as a } from "@js-temporal/polyfill";
+import { is as c } from "./datepicker.helpers.js";
+function I(t, n, i) {
+  const s = (o) => Array.isArray(o) ? o : [o], r = s(t);
+  n = s(n);
+  const l = [];
+  for (const o of r) {
+    const { promise: e, resolve: m, reject: p } = Promise.withResolvers(), f = o.animate(n, {
+      fill: "forwards",
+      duration: 300,
+      iterations: 1,
+      ...i
+    });
+    f.onfinish = () => m("finished"), f.oncancel = () => p("canceled"), l.push(e);
+  }
+  return Promise.allSettled(l);
+}
+function P(t = a.Now.plainDateISO()) {
+  return t ?? (t = a.Now.plainDateISO()), t instanceof Date && (t = a.PlainDate.from(t.toISOString())), typeof t == "string" && (t = a.PlainDate.from(g(t, !0))), {
+    year: t.year,
+    month: t.month - 1,
+    // new Date is 0 based
+    day: t.day
+  };
+}
+function v(t, n, i = "days") {
+  console.assert(c(t, n).plainISO(), "Invalid dates passed to compareDates()"), typeof t == "string" && (t = a.PlainDate.from(t)), typeof n == "string" && (n = a.PlainDate.from(n)), console.assert(
+    c(t, n).plain(),
+    `Invalid date was sent to helper function compareDates(). Got ${JSON.stringify(t)} and ${JSON.stringify(n)} passed in`
+  );
+  const s = u(t, n, i);
+  return r(s);
+  function r(l) {
+    return Math.max(-1, Math.min(l, 1));
+  }
+}
+function u(t, n, i = "days") {
+  if (t = s(t), n = s(n), console.assert(
+    t instanceof a.PlainDate && n instanceof a.PlainDate,
+    `Invalid date was sent to helper function timeBetween(). Got ${JSON.stringify(t)} and ${JSON.stringify(n)} passed in`
+  ), i === "months")
+    return n.until(t, { largestUnit: "months" }).months;
+  if (i === "years")
+    return n.until(t, { largestUnit: "years" }).years;
+  return n.until(t, { largestUnit: "days" }).days;
+  function s(r) {
+    return r instanceof Date ? a.PlainDate.from(r.toISOString().split("T")[0]) : typeof r == "string" ? a.PlainDate.from(r.includes("T") ? r.split("T")[0] : r) : r;
+  }
+}
+function D(...t) {
+  if (t.length === 0)
+    throw new Error("At least one date must be provided");
+  const n = (e) => e instanceof Date, i = t.map((e) => n(e) ? e : new Date(e));
+  if (i.length === 1)
+    return i[0].toISOString().split("T")[0];
+  const [s, ...r] = i, l = D(...r), o = new Date(l);
+  return s < o ? s.toISOString().split("T")[0] : o.toISOString().split("T")[0];
+}
+function S(...t) {
+  if (t.length === 0)
+    throw new Error("At least one date must be provided");
+  const n = (e) => e instanceof Date, i = t.map((e) => n(e) ? e : new Date(e));
+  if (i.length === 1)
+    return i[0].toISOString().split("T")[0];
+  const [s, ...r] = i, l = S(...r), o = new Date(l);
+  return s > o ? s.toISOString().split("T")[0] : o.toISOString().split("T")[0];
+}
+function g(t, n = !1) {
+  t instanceof Date && (t = a.PlainDate.from(t.toISOString().split("T")[0])), typeof t != "string" && (t = t.toString());
+  const i = /^\d{4}-\d{2}-\d{2}$/;
+  if (!i.test(t) && n)
+    throw new Error(`Invalid date format. Got ${t} passed in.`);
+  return i.test(t) ? t : "";
+}
+export {
+  g as assertISODate,
+  v as compareDates,
+  I as doAnimate,
+  D as earliestDate,
+  P as getDateParts,
+  S as latestDate,
+  u as timeBetween
+};

package/dist/components/datepicker/datepicker-popup.js

@@ -0,0 +1,6 @@
+import { SkfDatepickerPopup as p } from "./datepicker-popup.component.js";
+p.define("skf-datepicker-popup");
+export {
+  p as SkfDatepickerPopup,
+  p as default
+};

package/dist/components/{date-picker/datepicker.styles.js → datepicker/datepicker-popup.styles.js}

@@ -1,5 +1,5 @@
 import { css as r } from "lit";
-const a = r`
+const e = r`
 	@layer components {
 		:host {
 			--max-width: 21em;
@@ -8,7 +8,7 @@ const a = r`
 			background-color: var(--skf-bg-color-neutral-1);
 			border: solid 1px var(--skf-border-color-primary);
 			border-radius: 3px;
-			box-shadow: 0 0 10px rgba(0 0 0 / 30%);
+			box-shadow: 0 0 10px rgb(0 0 0 / 30%);
 			box-sizing: border-box;
 			display: block;
 			font-family: Helvetica, sans-serif;
@@ -83,5 +83,5 @@ const a = r`
 	}
 `;
 export {
-  a as styles
+  e as styles
 };