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

package/dist/components/heading/heading.component.js

@@ -1,34 +1,35 @@
-import { SkfElement as n } from "../../internal/components/skf-element.js";
-import u from "../../styles/component.styles.js";
+import { SkfElement as f } from "../../internal/components/skf-element.js";
+import { componentStyles as n } from "../../styles/component.styles.js";
 import "lit";
-import { property as a } from "lit/decorators.js";
-import { html as y, unsafeStatic as l } from "lit/static-html.js";
-import c from "./heading.styles.js";
-var h = Object.defineProperty, f = (o, p, i, d) => {
-  for (var t = void 0, s = o.length - 1, m; s >= 0; s--)
-    (m = o[s]) && (t = m(p, i, t) || t);
-  return t && h(p, i, t), t;
+import { property as i } from "lit/decorators.js";
+import { literal as u, html as c } from "lit/static-html.js";
+import { styles as y } from "./heading.styles.js";
+var d = Object.defineProperty, a = (l, r, p, h) => {
+  for (var t = void 0, o = l.length - 1, m; o >= 0; o--)
+    (m = l[o]) && (t = m(r, p, t) || t);
+  return t && d(r, p, t), t;
 };
-const e = class e extends n {
+const s = class s extends f {
   constructor() {
-    super(...arguments), this.as = "h1";
+    super(...arguments), this.as = "h2";
   }
   render() {
-    return y`
-			<${l(this.as)} id="root">
+    const r = u`${this.as}`;
+    return c`
+			<${r} id="root">
 				<slot></slot>
-			</${l(this.as)}>
+			</${r}>
 		`;
   }
 };
-e.styles = [u, c];
-let r = e;
-f([
-  a({ reflect: !0 })
-], r.prototype, "as");
-f([
-  a({ attribute: "styled-as" })
-], r.prototype, "styledAs");
+s.styles = [n, y];
+let e = s;
+a([
+  i({ reflect: !0 })
+], e.prototype, "as");
+a([
+  i({ attribute: "styled-as", reflect: !0 })
+], e.prototype, "styledAs");
 export {
-  r as SkfHeading
+  e as SkfHeading
 };

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

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

package/dist/components/heading/heading.styles.js

@@ -58,5 +58,5 @@ const t = s`
 	}
 `;
 export {
-  t as default
+  t as styles
 };

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

@@ -1,31 +1,25 @@
 import { SkfElement } from '../../internal/components/skf-element.js';
-import { type Icon, type IconColor, type IconSize, type SeverityFgColor } from '@skf-design-system/ui-assets';
+import type { Icon, IconColor } from '../../internal/types.js';
+import { type IconSize } from '@skf-design-system/ui-assets';
 import { type CSSResultGroup } from 'lit';
+type SkfIconSize = IconSize;
 /**
- * The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text
+ * The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text.
  *
- * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
+ * @documentation See [zeroheight](https://zeroheight.com/*) for design principles
  *
  * @tagname skf-icon
  */
 export declare class SkfIcon extends SkfElement {
     static styles: CSSResultGroup;
-    /**
-     * Sets the color of the icon
-     * @type { "primary" | "inverse" | "emphasised" | "secondary" | "success" | "info" | "warning" | "error" | "alert" }
-     */
-    color: IconColor | SeverityFgColor;
+    /** Sets the color of the icon */
+    color: IconColor;
     /** If defined, adds an alternate description to use for assistive devices */
     label?: string;
-    /**
-     * Name of the icon to display
-     * @type { "arrowDown" | "arrowDownUp" | "arrowLeft" | "arrowRight" | "arrowUp" | "article" | "artificialIntelligence" | "asset" | "attachment" | "bandCursor" | "bands" | "batteryEmpty" | "batteryFull" | "batteryLow" | "bearingFault" | "book" | "bulb" | "burger" | "cPM" | "calendar" | "calendarBooked" | "calendarEmpty" | "calendarNotBooked" | "calendarRecurring" | "caretDown" | "caretUp" | "caretUpDown" | "chat" | "check" | "checkCircle" | "checkSmall" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronUpDown" | "close" | "closeAllFaults" | "closeFault" | "closeSmall" | "columnGraph" | "comment" | "connection1" | "connection2" | "connection3" | "connection4" | "danger" | "defectFrequencies" | "defectFrequenciesAlternative" | "doubleChevronLeft" | "doubleChevronRight" | "download" | "draft" | "draftFilled" | "draftOutlined" | "dragNDrop" | "drop" | "duplicate" | "edit" | "emailFilled" | "emailOutlined" | "exclamation" | "eye" | "eyeHidden" | "eyeVisible" | "filter" | "forbidden" | "fullScreen" | "fullScreenExit" | "functionalLocation" | "harmonicCursor" | "heatmap" | "hierarchy" | "history" | "historyAlt" | "hourglassFramedFilled" | "hourglassFramedOutlined" | "hourglassOutlined" | "hz" | "iMX" | "image" | "infoCircleFilled" | "infoCircleOutlined" | "integration" | "kebab" | "link" | "listGroup" | "listItem" | "locationPin" | "lock" | "logOut" | "meatballs" | "microphone" | "minus" | "minusSmall" | "noData" | "o" | "openInNew" | "overlayBaseline" | "pDF" | "paper" | "pause" | "pieChart" | "pin" | "play" | "plus" | "powerOff" | "printer" | "proCollect" | "recAction" | "received" | "refresh" | "reorder" | "replace" | "reply" | "rewalkableRoute" | "routes" | "search" | "send" | "sensorA" | "sensorB" | "settings" | "sidebandCursor" | "singleCursor" | "spectrum" | "starFilled" | "starOutlined" | "statusCircle" | "stop" | "structuralVibration" | "sync" | "timewave" | "trash" | "trend" | "trendingUp" | "undo" | "unknownCircle" | "unknownDiamond" | "unlink" | "unlock" | "unscheduledAction" | "upload" | "user" | "viewFull" | "viewHorizontal" | "viewVertical" | "warning" | "warningCircle" | "warningDiamond" | "zoomIn" | "zoomOut" }
-     */
+    /** Name of the icon to display */
     name: Icon;
-    /**
-     * Size of the icon
-     * @type { "xs" | "sm" | "md" | "lg" }
-     */
-    size: IconSize;
+    /** Size of the icon */
+    size: SkfIconSize;
     render(): import("lit").TemplateResult<1>;
 }
+export {};

package/dist/components/icon/icon.component.js

@@ -1,11 +1,11 @@
 import { SkfElement as f } from "../../internal/components/skf-element.js";
 import { ICONS as c } from "@skf-design-system/ui-assets";
-import d from "../../styles/component.styles.js";
+import { componentStyles as d } from "../../styles/component.styles.js";
 import { html as h } from "lit";
 import { property as t } from "lit/decorators.js";
 import { classMap as u } from "lit/directives/class-map.js";
 import { ifDefined as s } from "lit/directives/if-defined.js";
-import v from "./icon.styles.js";
+import { styles as v } from "./icon.styles.js";
 var y = Object.defineProperty, o = (m, p, a, $) => {
   for (var r = void 0, i = m.length - 1, n; i >= 0; i--)
     (n = m[i]) && (r = n(p, a, r) || r);

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

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

package/dist/components/icon/icon.styles.js

@@ -80,5 +80,5 @@ const i = o`
 	}
 `;
 export {
-  i as default
+  i as styles
 };

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

@@ -1,19 +1,19 @@
 import '../icon/icon.js';
 import { FormBase } from '../../internal/components/formBase.js';
 import '../../internal/components/hint/hint';
+import type { FormFieldSeverity } from '../../internal/types.js';
 import type { FormFieldBaseProps } from '../../internal/types/formField.js';
 import { type CSSResultGroup } from 'lit';
-type AutocompleteValues = 'on' | 'off' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix' | 'nickname' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization' | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2' | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-amount' | 'transaction-currency' | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'url' | 'photo' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local' | 'tel-extension' | 'email' | 'impp' | 'password' | 'webauthn' | 'work' | (string & {});
 /**
- * The skf-text-field is used to create a text input field. It can be used inside a form element or standalone.
+ * The skf-text-field is used to create a text input field. It can be used inside a form element or standalone
  *
- * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/619e4125b3d2147c0c584b11) for design principles.
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/9481fa-input-field) for design principles
  *
- * @attribute {boolean} disabled - If true, sets disabled state
- * @attribute {boolean} required - If true, value is required or must be checked for the form to be submittable
+ * @attribute {boolean} [disabled=false] - If true, sets disabled state
+ * @attribute {boolean} [required=false] - If true, value is required or must be checked for the form to be submittable
  *
- * @event change - Fires when the value of the input changes
- * @event invalid - Fires when the input is invalid
+ * @event {CustomEvent} change - Fires when the value of the input changes
+ * @event {CustomEvent} invalid - Fires when the input is invalid
  *
  * @slot - The Inputs label. Alternatively, you can use the `label` attribute.
  *
@@ -25,12 +25,13 @@ type AutocompleteValues = 'on' | 'off' | 'name' | 'honorific-prefix' | 'given-na
 export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     static styles: CSSResultGroup;
     private customError;
+    /** @internal intermediary value for reset to function, e.g value attribute act as default value */
+    private _value;
     /**
-     * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
-     * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
-     * @type {  -m  }
+     * Indicates whether the value of the control can be automatically completed by the browser. See
+     * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.
      */
-    autocomplete?: AutocompleteValues;
+    autocomplete?: HTMLInputElement['autocomplete'];
     /** Custom aria-label for the clear button. **Notice!** Only applicable to type=search. */
     buttonAriaLabelClear: string;
     /** Custom aria-label for the visibility button. **Notice!** Only applicable to type=password. */
@@ -41,13 +42,16 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     set customInvalid(value: string | undefined);
     get customInvalid(): string | undefined;
     /** If true, outputs helping hints in console */
-    debug?: boolean;
+    debug: boolean;
     /** If true, hides the label visually */
-    hideLabel?: boolean;
+    hideLabel: boolean;
     /** If defined, displays informational text below the field */
     hint?: string;
-    /** Tells what keyboard to use if applicable */
-    inputmode: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+    /**
+     * Provides a hint about the type of data that might be entered by the user while editing the element or its contents. See
+     * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inputMode) for details.
+     */
+    inputmode: HTMLInputElement['inputMode'];
     /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
     label?: string;
     /** If defined, displays a prefix/adornment before the input-element */
@@ -67,44 +71,40 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     /** If defined, displays placeholder text */
     placeholder?: string;
     /** If true, makes the element not mutable, meaning the user can not edit the control */
-    readonly?: boolean;
+    readonly: boolean;
     /** If defined, renders an alternative A11y text for the asterisk */
     requiredLabel?: string;
-    /**
-     * If defined, displays provided severity state
-     * @type { "alert" | "success" | "info" | "warning" }
-     */
-    severity?: FormFieldBaseProps['severity'];
+    /** If defined, displays provided severity state */
+    severity?: FormFieldSeverity;
     /** If true, displays valid state after interaction */
-    showValid?: boolean;
+    showValid: boolean;
     /** Size of the input */
     size: 'sm' | 'md';
     /** If defined, displays a suffix/adornment after the input-element */
     trailing?: string;
-    /**
-     * Type of input control
-     * @type { 'button' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' }
-     */
-    type?: Exclude<FormFieldBaseProps['type'], 'checkbox' | 'radio'>;
+    /** Type of input */
+    type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
     /** Sets validation start */
     validateOn: 'input' | 'change' | 'submit';
     /** The current value of the input field  */
-    value: string;
+    set value(newValue: string);
+    get value(): string;
     /** @internal */
     /** true if the internal state is invalid  */
     invalid: boolean;
     /** @internal */
     private _buttonDown;
     /** @internal */
-    $input: HTMLInputElement;
+    $input?: HTMLInputElement;
     /** @internal */
     _defaultSlot: Node[];
     /** @internal */
     private _numberController;
     /** @internal */
     private _passwordController;
-    protected firstUpdated(): void;
+    firstUpdated(): void;
     willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    /** @internal */
     valueChanged(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     /** @internal */
@@ -136,4 +136,3 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     private _onBlur;
     render(): import("lit").TemplateResult<1>;
 }
-export {};