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

package/package.json

@@ -34,60 +34,59 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.2-beta.0",
+  "version": "1.0.2-beta.1",
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
-    "@js-temporal/polyfill": "^0.4.4"
+    "@js-temporal/polyfill": "^0.5.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.6",
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
     "@custom-elements-manifest/analyzer": "^0.10.4",
-    "@eslint/js": "^9.22.0",
+    "@eslint/js": "^9.23.0",
     "@playwright/test": "^1.51.1",
     "@skf-design-system/ui-assets": "0.1.3-beta.4",
-    "@storybook/addon-a11y": "^8.6.7",
-    "@storybook/addon-essentials": "^8.6.7",
-    "@storybook/addon-interactions": "^8.6.7",
-    "@storybook/addon-links": "^8.6.7",
-    "@storybook/blocks": "^8.6.7",
-    "@storybook/manager-api": "^8.6.7",
-    "@storybook/test": "^8.6.7",
+    "@storybook/addon-a11y": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/manager-api": "^8.6.12",
+    "@storybook/test": "^8.6.12",
     "@storybook/test-runner": "^0.22.0",
-    "@storybook/theming": "^8.6.7",
-    "@storybook/web-components": "^8.6.7",
-    "@storybook/web-components-vite": "^8.6.7",
-    "@types/node": "^22.13.10",
+    "@storybook/theming": "^8.6.12",
+    "@storybook/web-components": "^8.6.12",
+    "@storybook/web-components-vite": "^8.6.12",
+    "@types/node": "^22.14.0",
     "@wc-toolkit/module-path-resolver": "^1.0.0",
-    "@wc-toolkit/storybook-helpers": "^1.0.4",
+    "@wc-toolkit/storybook-helpers": "^1.1.1",
     "@wc-toolkit/type-parser": "^1.0.3",
     "concurrently": "^9.1.2",
     "custom-element-jet-brains-integration": "^1.7.0",
     "custom-element-jsx-integration": "^1.6.0",
     "custom-element-vs-code-integration": "^1.5.0",
     "custom-element-vuejs-integration": "^1.4.0",
-    "eslint": "^9.22.0",
-    "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-lit": "^1.15.0",
+    "eslint": "^9.23.0",
+    "eslint-plugin-lit": "^2.0.0",
     "eslint-plugin-lit-a11y": "^4.1.4",
-    "eslint-plugin-wc": "^2.2.0",
-    "express": "^4.21.2",
+    "eslint-plugin-wc": "^3.0.0",
+    "express": "^5.1.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.5.0",
     "lit": "^3.2.1",
     "postcss-styled-syntax": "^0.7.1",
     "prettier": "3.5.3",
-    "storybook": "^8.6.7",
-    "stylelint": "^16.16.0",
+    "storybook": "^8.6.12",
+    "stylelint": "^16.17.0",
     "stylelint-config-standard": "^37.0.0",
     "stylelint-no-unsupported-browser-features": "^8.0.4",
     "stylelint-order": "^6.0.4",
     "stylelint-value-no-unknown-custom-properties": "^6.0.1",
-    "tsc-alias": "^1.8.11",
+    "tsc-alias": "^1.8.13",
     "typescript": "^5.8.2",
-    "typescript-eslint": "^8.26.1",
-    "vite": "^6.2.2",
+    "typescript-eslint": "^8.29.0",
+    "vite": "^6.2.4",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {

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

@@ -1,40 +0,0 @@
-import '../icon/icon.js';
-import { SkfElement } from '../../internal/components/skf-element.js';
-import type { HeadingType } from '../../internal/constants/heading.js';
-import type { CSSResultGroup } from 'lit';
-/**
- * The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.
- *
- * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.
- *
- * @event {CustomEvent} skf-collapse-toggle - Event emitted when toggled
- *
- * @slot - Main content
- *
- * @tagname skf-collapse
- */
-export declare class SkfCollapse extends SkfElement {
-    static styles: CSSResultGroup;
-    /** If true, will animate the expand/collapse state */
-    animated: boolean;
-    /** If true, will set the collapse to be expanded by default */
-    expanded: boolean;
-    /** Heading for the collapse */
-    heading?: string;
-    /**
-     * Defines which heading element will be rendered
-     * @type { "h2" | "h3" | "h4" }
-     */
-    headingAs: Exclude<HeadingType, 'h1'>;
-    /** If true, renders the small version */
-    small: boolean;
-    /** If true, will truncate the heading in collapsed state */
-    truncate: boolean;
-    /** Class method as alternative to manipulate attribute */
-    setClose(): void;
-    /** Class method as alternative to manipulate attribute */
-    setOpen(): void;
-    /** @internal */
-    private _toggle;
-    render(): import("lit").TemplateResult;
-}

package/dist/components/collapse/collapse.component.js

@@ -1,86 +0,0 @@
-import "../icon/icon.js";
-import { SkfElement as c } from "../../internal/components/skf-element.js";
-import h from "../../styles/component.styles.js";
-import { property as s } from "lit/decorators.js";
-import { classMap as m } from "lit/directives/class-map.js";
-import { ifDefined as f } from "lit/directives/if-defined.js";
-import { unsafeStatic as d, html as u } from "lit/static-html.js";
-import _ from "./collapse.styles.js";
-var y = Object.defineProperty, a = (i, n, r, g) => {
-  for (var t = void 0, l = i.length - 1, p; l >= 0; l--)
-    (p = i[l]) && (t = p(n, r, t) || t);
-  return t && y(n, r, t), t;
-};
-const o = class o extends c {
-  constructor() {
-    super(...arguments), this.animated = !1, this.expanded = !1, this.headingAs = "h2", this.small = !1, this.truncate = !1, this._toggle = () => {
-      this.dispatchEvent(
-        new CustomEvent("skf-collapse-toggle", {
-          bubbles: !0,
-          composed: !0,
-          cancelable: !0
-        })
-      ), this.expanded = !this.expanded;
-    };
-  }
-  /** Class method as alternative to manipulate attribute */
-  setClose() {
-    this.expanded = !1;
-  }
-  /** Class method as alternative to manipulate attribute */
-  setOpen() {
-    this.expanded = !0;
-  }
-  render() {
-    return u`
-			<div class=${m({
-      collapse: !0,
-      "collapse--animated": this.animated,
-      "collapse--expanded": this.expanded,
-      "collapse--small": this.small,
-      "collapse--truncate": this.truncate
-    })}>
-				<${d(this.headingAs)} class="collapse__heading">
-					<button
-						@click=${this._toggle}
-						aria-controls="main"
-						aria-expanded=${f(this.expanded ? "true" : "false")}
-						class="collapse__btn"
-						type="button"
-					>
-						<span class="collapse__label">${this.heading}</span>
-						<skf-icon class="collapse__icon" name=${this.expanded ? "caretUp" : "caretDown"}></skf-icon>
-					</button>
-				</${d(this.headingAs)}>
-				<div class="collapse__body">
-					<div class="collapse__main" data-testid="main" id="main">
-						<slot></slot>
-					</div>
-				</div>
-			</div>
-		`;
-  }
-};
-o.styles = [h, _];
-let e = o;
-a([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "animated");
-a([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "expanded");
-a([
-  s()
-], e.prototype, "heading");
-a([
-  s({ attribute: "heading-as" })
-], e.prototype, "headingAs");
-a([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "small");
-a([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "truncate");
-export {
-  e as SkfCollapse
-};

package/dist/components/collapse/collapse.d.ts

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

package/dist/components/collapse/collapse.js

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

package/dist/components/collapse/collapse.styles.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("lit").CSSResult;
-export default _default;

package/dist/components/collapse/collapse.styles.js

@@ -1,77 +0,0 @@
-import { css as a } from "lit";
-const s = a`
-	/* stylelint-disable selector-class-pattern */
-	@layer components {
-		.collapse {
-			background: var(--skf-bg-color-neutral-1);
-			border-bottom: var(--skf-border-width-sm) solid var(--skf-border-color-tertiary);
-		}
-
-		.collapse__heading {
-			font-size: var(--_skf-collapse-heading-size, var(--skf-font-size-100));
-			font-weight: var(--_skf-collapse-heading-weight, normal);
-
-			.collapse--small & {
-				--_skf-collapse-heading-size: var(--skf-font-size-75);
-				--_skf-collapse-heading-weight: var(--skf-font-weight-medium);
-			}
-		}
-
-		.collapse__btn {
-			align-items: center;
-			display: flex;
-			padding-block: var(--_skf-collapse-button-padding-block, var(--skf-spacing-50));
-			padding-inline: var(--skf-spacing-75);
-			width: 100%;
-
-			&:focus-visible {
-				outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
-				outline-offset: -2px;
-			}
-
-			.collapse--small & {
-				--_skf-collapse-button-padding-block: var(--skf-spacing-25);
-			}
-		}
-
-		.collapse__label {
-			.collapse--truncate:not(.collapse--expanded) & {
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-			}
-		}
-
-		.collapse__icon {
-			margin-inline-start: auto;
-		}
-
-		.collapse__body {
-			display: grid;
-			grid-template-rows: var(--_skf-collapse-body-height, 0fr);
-			padding-inline: var(--skf-spacing-75);
-
-			.collapse--animated & {
-				transition: grid-template-rows calc(var(--skf-motion-duration-normal) * 1ms)
-					var(--skf-motion-easing-ease-in);
-			}
-
-			.collapse--expanded & {
-				--_skf-collapse-body-height: 1fr;
-			}
-		}
-
-		.collapse__main {
-			overflow: hidden;
-
-			&::after {
-				content: '';
-				display: block;
-				padding-block-end: var(--skf-spacing-100);
-			}
-		}
-	}
-`;
-export {
-  s as default
-};

package/dist/components/menu-item/menu-item.component.d.ts

@@ -1,25 +0,0 @@
-import { SkfLink } from '../link/link.component.js';
-import { type CSSResultGroup } from 'lit';
-/**
- * The `<skf-menu-item>` is a component that displays a list of actions or options.
- *
- * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
- *
- * @event {CustomEvent} my-tag-my-event - Fired when something happens
- *
- * @event click - Fired when the component is clicked
- * @event mouseover - Fired when the mouse is over the component
- * @event mouseout - Fired when the mouse is out of the component
- * @event focus - Fired when the component is focused
- * @event blur - Fired when the component is blurred
- * @event change - Fired when the component's value changes
- *
- * @slot - The component's main content
- * @slot my-named-slot - A named slot of the component
- *
- * @tagname skf-menu-item
- */
-export declare class SkfMenuItem extends SkfLink {
-    static styles: CSSResultGroup;
-    constructor();
-}

package/dist/internal/constants/heading.d.ts

@@ -1,2 +0,0 @@
-export declare const HEADING_TYPE_KEYS: readonly ["h1", "h2", "h3", "h4"];
-export type HeadingType = (typeof HEADING_TYPE_KEYS)[number];