@ukic/web-components 3.0.0-alpha.9 → 3.1.0

package/dist/collection/components/ic-skeleton/ic-skeleton.js

@@ -6,7 +6,13 @@ const DEFAULT_HEIGHTS = {
 };
 export class Skeleton {
     constructor() {
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
         this.theme = "inherit";
+        /**
+         * The variant of the skeleton that will be displayed.
+         */
         this.variant = "rectangle";
     }
     render() {
@@ -17,11 +23,11 @@ export class Skeleton {
                 width: el.style.width || (variant === "circle" ? "25px" : "260px"),
             }
             : undefined;
-        return (h(Host, { class: {
+        return (h(Host, { key: '6026c06cedc2bf04f95a2f311a4d943a391bc1de', class: {
                 skeleton: true,
                 "ic-skeleton-circle": variant === "circle",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, style: style, "aria-disabled": "true" }, h("slot", null)));
+            }, style: style, "aria-disabled": "true" }, h("slot", { key: 'cbb1b173f3ba8165b5381be2c0220f531bcd024d' })));
     }
     static get is() { return "ic-skeleton"; }
     static get encapsulation() { return "shadow"; }
@@ -42,7 +48,7 @@ export class Skeleton {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -57,6 +63,8 @@ export class Skeleton {
                     "tags": [],
                     "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"inherit\""
@@ -66,7 +74,7 @@ export class Skeleton {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSkeletonVariants",
-                    "resolved": "\"circle\" | \"rectangle\" | \"text\"",
+                    "resolved": "\"circle\" | \"rectangle\" | \"text\" | undefined",
                     "references": {
                         "IcSkeletonVariants": {
                             "location": "import",
@@ -81,6 +89,8 @@ export class Skeleton {
                     "tags": [],
                     "text": "The variant of the skeleton that will be displayed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "\"rectangle\""

package/dist/collection/components/ic-skeleton/ic-skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-skeleton.js","sourceRoot":"","sources":["../../../src/components/ic-skeleton/ic-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAIlE,MAAM,eAAe,GAAG;IACtB,IAAI,EAAE,KAAK;IACX,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,MAAM;CAClB,CAAC;AAOF,MAAM,OAAO,QAAQ;;qBAMW,SAAS;uBAKA,WAAW;;IAElD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;QAEpC,MAAM,KAAK,GAAG,CAAC,EAAE,CAAC,iBAAiB;YACjC,CAAC,CAAC;gBACE,MAAM,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,IAAI,eAAe,CAAC,OAAO,CAAC;gBACnD,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;aACnE;YACH,CAAC,CAAC,SAAS,CAAC;QAEd,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,oBAAoB,EAAE,OAAO,KAAK,QAAQ;gBAC1C,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;aAC3C,EACD,KAAK,EAAE,KAAK,mBACE,MAAM;YAEpB,eAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport { IcSkeletonVariants } from \"./ic-skeleton.types\";\nimport { IcThemeMode } from \"../../utils/types\";\n\nconst DEFAULT_HEIGHTS = {\n  text: \"1em\",\n  circle: \"25px\",\n  rectangle: \"93px\",\n};\n\n@Component({\n  tag: \"ic-skeleton\",\n  styleUrl: \"ic-skeleton.css\",\n  shadow: true,\n})\nexport class Skeleton {\n  @Element() el: HTMLIcSkeletonElement;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The variant of the skeleton that will be displayed.\n   */\n  @Prop() variant?: IcSkeletonVariants = \"rectangle\";\n\n  render() {\n    const { variant, theme, el } = this;\n\n    const style = !el.firstElementChild\n      ? {\n          height: el.style.height || DEFAULT_HEIGHTS[variant],\n          width: el.style.width || (variant === \"circle\" ? \"25px\" : \"260px\"),\n        }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          skeleton: true,\n          \"ic-skeleton-circle\": variant === \"circle\",\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        style={style}\n        aria-disabled=\"true\"\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-skeleton.js","sourceRoot":"","sources":["../../../src/components/ic-skeleton/ic-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAIlE,MAAM,eAAe,GAAG;IACtB,IAAI,EAAE,KAAK;IACX,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,MAAM;CAClB,CAAC;AAOF,MAAM,OAAO,QAAQ;IALrB;QAQE;;WAEG;QACK,UAAK,GAAiB,SAAS,CAAC;QAExC;;WAEG;QACK,YAAO,GAAwB,WAAW,CAAC;KA0BpD;IAxBC,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;QAEpC,MAAM,KAAK,GAAG,CAAC,EAAE,CAAC,iBAAiB;YACjC,CAAC,CAAC;gBACE,MAAM,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,IAAI,eAAe,CAAC,OAAQ,CAAC;gBACpD,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;aACnE;YACH,CAAC,CAAC,SAAS,CAAC;QAEd,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,oBAAoB,EAAE,OAAO,KAAK,QAAQ;gBAC1C,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;aAC3C,EACD,KAAK,EAAE,KAAK,mBACE,MAAM;YAEpB,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport { IcSkeletonVariants } from \"./ic-skeleton.types\";\nimport { IcThemeMode } from \"../../utils/types\";\n\nconst DEFAULT_HEIGHTS = {\n  text: \"1em\",\n  circle: \"25px\",\n  rectangle: \"93px\",\n};\n\n@Component({\n  tag: \"ic-skeleton\",\n  styleUrl: \"ic-skeleton.css\",\n  shadow: true,\n})\nexport class Skeleton {\n  @Element() el: HTMLIcSkeletonElement;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The variant of the skeleton that will be displayed.\n   */\n  @Prop() variant?: IcSkeletonVariants = \"rectangle\";\n\n  render() {\n    const { variant, theme, el } = this;\n\n    const style = !el.firstElementChild\n      ? {\n          height: el.style.height || DEFAULT_HEIGHTS[variant!],\n          width: el.style.width || (variant === \"circle\" ? \"25px\" : \"260px\"),\n        }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          skeleton: true,\n          \"ic-skeleton-circle\": variant === \"circle\",\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        style={style}\n        aria-disabled=\"true\"\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-skeleton/ic-skeleton.stories.js

@@ -0,0 +1,143 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  theme: "inherit",
+  variant: "rectangle",
+};
+
+export default {
+  title: "Web Components/Skeleton",
+  component: "ic-skeleton",
+};
+
+export const Rectangle = {
+  render: () =>
+    html` <ic-typography variant="h4">Default</ic-typography>
+      <ic-skeleton></ic-skeleton>
+      <ic-typography variant="h4">Inherited from child</ic-typography>
+      <ic-skeleton
+        ><div style="height:200px;width:450px;">Test text</div></ic-skeleton
+      >
+      <ic-typography variant="h4"
+        >Height and width set with styles</ic-typography
+      >
+      <ic-skeleton style="height:200px;width:200px;"></ic-skeleton>
+      <ic-typography variant="h4">Height set with styles</ic-typography>
+      <ic-skeleton style="height:75px;"></ic-skeleton>
+      <ic-typography variant="h4">Width set with styles</ic-typography>
+      <ic-skeleton style="width:450px;"></ic-skeleton>`,
+
+  name: "Rectangle",
+};
+
+export const Circle = {
+  render: () => html`<ic-skeleton variant="circle" />`,
+  name: "Circle",
+};
+
+export const Text = {
+  render: () =>
+    html` <ic-typography variant="h1">h1</ic-typography>
+      <ic-typography variant="h1"><ic-skeleton variant="text" /></ic-typography>
+      <ic-typography variant="h2">h2</ic-typography>
+      <ic-typography variant="h2"><ic-skeleton variant="text" /></ic-typography>
+      <ic-typography variant="h3">h3</ic-typography>
+      <ic-typography variant="h3"><ic-skeleton variant="text" /></ic-typography>
+      <ic-typography variant="h4">h4</ic-typography>
+      <ic-typography variant="h4"><ic-skeleton variant="text" /></ic-typography>
+      <ic-typography variant="subtitle-large">subtitle-large</ic-typography>
+      <ic-typography variant="subtitle-large"
+        ><ic-skeleton variant="text"
+      /></ic-typography>
+      <ic-typography variant="subtitle-small">subtitle-small</ic-typography>
+      <ic-typography variant="subtitle-small"
+        ><ic-skeleton variant="text"
+      /></ic-typography>
+      <ic-typography variant="body">body</ic-typography>
+      <ic-typography variant="body"
+        ><ic-skeleton variant="text"
+      /></ic-typography>
+      <ic-typography variant="caption">caption</ic-typography>
+      <ic-typography variant="caption"
+        ><ic-skeleton variant="text"
+      /></ic-typography>
+      <ic-typography variant="label">label</ic-typography>
+      <ic-typography variant="subtitle-small"
+        ><ic-skeleton variant="text"
+      /></ic-typography>
+      <ic-typography variant="caption-uppercase"
+        >caption uppercase</ic-typography
+      >
+      <ic-typography variant="caption-uppercase"
+        ><ic-skeleton variant="text"
+      /></ic-typography>
+      <ic-typography variant="label-uppercase">label uppercase</ic-typography>
+      <ic-typography variant="subtitle-small"
+        ><ic-skeleton variant="text"
+      /></ic-typography>`,
+
+  name: "Text",
+};
+
+export const Example = {
+  render: () =>
+    html` <ic-skeleton variant="circle" height="20"></ic-skeleton>
+      <div style="height:8px"></div>
+      <ic-typography variant="caption"
+        ><ic-skeleton variant="text"
+      /></ic-typography>
+      <div style="height:8px"></div>
+      <ic-skeleton></ic-skeleton>`,
+
+  name: "Example",
+};
+
+export const DarkMode = {
+  render: () =>
+    html` <div style="background-color:black;">
+      <ic-skeleton variant="circle" height="20" theme="dark"></ic-skeleton>
+      <div style="height:8px"></div>
+      <ic-typography variant="caption"
+        ><ic-skeleton variant="text" theme="dark"
+      /></ic-typography>
+      <div style="height:8px"></div>
+      <ic-skeleton theme="dark"></ic-skeleton>
+    </div>`,
+
+  name: "Dark mode",
+};
+
+export const Playground = {
+  render: (args) =>
+    html` <div>
+      <ic-skeleton
+        theme=${args.theme}
+        variant=${args.variant}
+        style="height: ${args.variant == "circle"
+          ? "20px"
+          : ""};width:${args.variant == "circle" ? "20px" : ""};"
+      ></ic-skeleton>
+    </div>`,
+
+  args: defaultArgs,
+
+  argTypes: {
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+
+    variant: {
+      options: ["rectangle", "circle", "text"],
+
+      control: {
+        type: "radio",
+      },
+    },
+  },
+
+  name: "Playground",
+};

package/dist/collection/components/ic-skip-link/ic-skip-link.css

@@ -0,0 +1,46 @@
+/**
+* @prop --ic-skip-link-position-top: The top position of the skip link when it is not displayed inline and has an absolute position.
+*/
+
+:host {
+  display: block;
+}
+
+ic-link {
+  position: absolute;
+  left: -9999px;
+}
+
+ic-link:focus {
+  z-index: var(--ic-z-index-skip-link);
+  left: var(--ic-space-sm);
+  padding: var(--ic-space-sm);
+  box-shadow: var(--ic-border-focus);
+  border-radius: var(--ic-border-radius);
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.display-top:focus {
+  top: var(--ic-skip-link-position-top, var(--ic-space-sm));
+}
+
+.inline:focus {
+  position: static;
+  display: inline-block;
+  margin: var(--ic-space-xs) 0;
+}
+
+.full-width:focus {
+  display: flex;
+  right: var(--ic-space-sm);
+  width: auto;
+}
+
+.inline.full-width:focus {
+  justify-content: start;
+}
+
+.show-background {
+  background: var(--ic-skip-link-background);
+}

package/dist/collection/components/ic-skip-link/ic-skip-link.js

@@ -0,0 +1,203 @@
+import { h, Host } from "@stencil/core";
+export class SkipLink {
+    constructor() {
+        /**
+         * If `true`, the skip link will fill the width of the page.
+         */
+        this.fullWidth = false;
+        /**
+         * If `true`, the skip link will appear inline with surrounding page content when focused.
+         */
+        this.inline = false;
+        /**
+         * The label displayed when the skip link is focused.
+         */
+        this.label = "Skip to main content";
+        /**
+         * If `true`, the skip link will display as black in the light theme, and white in the dark theme.
+         */
+        this.monochrome = false;
+        /**
+         * Sets the theme color to the dark or light theme color. `inherit` will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        /**
+         * If `true`, the background will be hidden.
+         */
+        this.transparentBackground = false;
+    }
+    render() {
+        const { fullWidth, inline, label, monochrome, target, theme, transparentBackground, } = this;
+        return (h(Host, { key: '64ac2ffd70f0240d311d7ebfdfee23526fb0c764', class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            } }, h("ic-link", { key: '4c43fc77e85292af003718b84adb0c34b41169f9', class: {
+                "display-top": !inline,
+                "full-width": !!fullWidth,
+                "show-background": !transparentBackground,
+                inline: !!inline,
+            }, href: `#${target}`, monochrome: monochrome, theme: theme }, label)));
+    }
+    static get is() { return "ic-skip-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ic-skip-link.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ic-skip-link.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the skip link will fill the width of the page."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "full-width",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "inline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the skip link will appear inline with surrounding page content when focused."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "inline",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label displayed when the skip link is focused."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "\"Skip to main content\""
+            },
+            "monochrome": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the skip link will display as black in the light theme, and white in the dark theme."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "monochrome",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The target ID for the element which should receive focus when triggering the skip link."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "target",
+                "reflect": false
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the theme color to the dark or light theme color. `inherit` will set the color based on the system settings or ic-theme component."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
+            "transparentBackground": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the background will be hidden."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "transparent-background",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=ic-skip-link.js.map

package/dist/collection/components/ic-skip-link/ic-skip-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-skip-link.js","sourceRoot":"","sources":["../../../src/components/ic-skip-link/ic-skip-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQlE,MAAM,OAAO,QAAQ;IALrB;QAQE;;WAEG;QACK,cAAS,GAAY,KAAK,CAAC;QAEnC;;WAEG;QACK,WAAM,GAAY,KAAK,CAAC;QAEhC;;WAEG;QACK,UAAK,GAAW,sBAAsB,CAAC;QAE/C;;WAEG;QACK,eAAU,GAAY,KAAK,CAAC;QAOpC;;WAEG;QACK,UAAK,GAAgB,SAAS,CAAC;QAEvC;;WAEG;QACK,0BAAqB,GAAY,KAAK,CAAC;KAmChD;IAjCC,MAAM;QACJ,MAAM,EACJ,SAAS,EACT,MAAM,EACN,KAAK,EACL,UAAU,EACV,MAAM,EACN,KAAK,EACL,qBAAqB,GACtB,GAAG,IAAI,CAAC;QAET,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;aAC3C;YAED,gEACE,KAAK,EAAE;oBACL,aAAa,EAAE,CAAC,MAAM;oBACtB,YAAY,EAAE,CAAC,CAAC,SAAS;oBACzB,iBAAiB,EAAE,CAAC,qBAAqB;oBACzC,MAAM,EAAE,CAAC,CAAC,MAAM;iBACjB,EACD,IAAI,EAAE,IAAI,MAAM,EAAE,EAClB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,IAEX,KAAK,CACE,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from \"@stencil/core\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-skip-link\",\n  styleUrl: \"ic-skip-link.css\",\n  shadow: true,\n})\nexport class SkipLink {\n  @Element() el: HTMLIcSkipLinkElement;\n\n  /**\n   * If `true`, the skip link will fill the width of the page.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * If `true`, the skip link will appear inline with surrounding page content when focused.\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * The label displayed when the skip link is focused.\n   */\n  @Prop() label: string = \"Skip to main content\";\n\n  /**\n   * If `true`, the skip link will display as black in the light theme, and white in the dark theme.\n   */\n  @Prop() monochrome: boolean = false;\n\n  /**\n   * The target ID for the element which should receive focus when triggering the skip link.\n   */\n  @Prop() target!: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. `inherit` will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme: IcThemeMode = \"inherit\";\n\n  /**\n   * If `true`, the background will be hidden.\n   */\n  @Prop() transparentBackground: boolean = false;\n\n  render() {\n    const {\n      fullWidth,\n      inline,\n      label,\n      monochrome,\n      target,\n      theme,\n      transparentBackground,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <ic-link\n          class={{\n            \"display-top\": !inline,\n            \"full-width\": !!fullWidth,\n            \"show-background\": !transparentBackground,\n            inline: !!inline,\n          }}\n          href={`#${target}`}\n          monochrome={monochrome}\n          theme={theme}\n        >\n          {label}\n        </ic-link>\n      </Host>\n    );\n  }\n}\n"]}