npm - @ukic/web-components - Versions diffs - 2.0.0-alpha.124 → 2.0.0 - Mend

@ukic/web-components 2.0.0-alpha.124 → 2.0.0

Files changed (584) hide show

package/dist/collection/components/ic-status-tag/ic-status-tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-status-tag.js","sourceRoot":"","sources":["../../../src/components/ic-status-tag/ic-status-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AAWvE,MAAM,OAAO,SAAS;;;kBAQmB,SAAS;~~mBAIR~~,~~SAAS~~;~~iBAIvB~~,KAAK;;EAE/B,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,YAAY,CACb,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,~~OAAO~~,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;~~IAC/C~~,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,QAAQ;MACjB,cACE,KAAK,EAAE;UACL,CAAC,KAAK,CAAC,EAAE,IAAI;UACb,CAAC,GAAG,~~OAAO~~,IAAI,MAAM,EAAE,CAAC,EAAE,IAAI;~~UAC9B~~,CAAC,OAAO,CAAC,EAAE,KAAK;SACjB;QAED,~~qBAAe~~,OAAO,EAAC,iBAAiB,~~EAAC~~,~~OAAO,EAAE,~~KAAK;~~UACrD~~,gBAAO,KAAK,CAAQ,CACN,CACT,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n IcStatusTagStatuses,\n ~~IcStatusTagVariants~~,\n} from \"./ic-status-tag.types\";\n\n@Component({\n tag: \"ic-status-tag\",\n styleUrl: \"ic-status-tag.css\",\n shadow: true,\n})\nexport class StatusTag {\n /*\n The content rendered within the status tag.\n /\n @Prop() label!: string;\n /\n The colour of the status tag.\n /\n @Prop() status?: IcStatusTagStatuses = \"neutral\";\n /\n The emphasis of the status tag.\n /\n @Prop() ~~variant~~?: ~~IcStatusTagVariants~~ = \"~~primary~~\";\n /\n The size of the status tag.\n */\n @Prop() ~~dense~~?: boolean = false;\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Status Tag\"\n );\n }\n\n render() {\n const { label, status, ~~variant~~, ~~dense~~ } = this;\n return (\n <Host role=\"status\">\n <strong\n class={{\n [\"tag\"]: true,\n [`${~~variant~~}-${status}`]: true,\n [\"~~dense~~\"]: ~~dense~~,\n }}\n >\n <ic-typography variant=\"label-uppercase\" ~~spacing~~={false}>\n <span>{label}</span>\n </ic-typography>\n </strong>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-status-tag.js","sourceRoot":"","sources":["../../../src/components/ic-status-tag/ic-status-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AAWvE,MAAM,OAAO,SAAS;;;kBAQmB,SAAS;sBAIH,QAAQ;iBAI3B,KAAK;;EAE/B,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,YAAY,CACb,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAClD,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,QAAQ;MACjB,cACE,KAAK,EAAE;UACL,CAAC,KAAK,CAAC,EAAE,IAAI;UACb,CAAC,GAAG,UAAU,IAAI,MAAM,EAAE,CAAC,EAAE,IAAI;UACjC,CAAC,OAAO,CAAC,EAAE,KAAK;SACjB;QAED,qBACE,OAAO,EAAC,iBAAiB,4BACD,KAAK;UAE7B,gBAAO,KAAK,CAAQ,CACN,CACT,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n IcStatusTagStatuses,\n IcStatusTagAppearance,\n} from \"./ic-status-tag.types\";\n\n@Component({\n tag: \"ic-status-tag\",\n styleUrl: \"ic-status-tag.css\",\n shadow: true,\n})\nexport class StatusTag {\n /*\n The content rendered within the status tag.\n /\n @Prop() label!: string;\n /\n The colour of the status tag.\n /\n @Prop() status?: IcStatusTagStatuses = \"neutral\";\n /\n The emphasis of the status tag.\n /\n @Prop() appearance?: IcStatusTagAppearance = \"filled\";\n /\n The size of the status tag.\n */\n @Prop() small?: boolean = false;\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Status Tag\"\n );\n }\n\n render() {\n const { label, status, appearance, small } = this;\n return (\n <Host role=\"status\">\n <strong\n class={{\n [\"tag\"]: true,\n [`${appearance}-${status}`]: true,\n [\"small\"]: small,\n }}\n >\n <ic-typography\n variant=\"label-uppercase\"\n apply-vertical-margins={false}\n >\n <span>{label}</span>\n </ic-typography>\n </strong>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-status-tag/ic-status-tag.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-status-tag.types.js","sourceRoot":"","sources":["../../../src/components/ic-status-tag/ic-status-tag.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcStatusTagStatuses = \"neutral\" \| \"success\" \| \"warning\" \| \"danger\";\n\nexport type ~~IcStatusTagVariants~~ = \"~~primary~~\" \| \"~~secondary~~\";\n"]}
1	+ {"version":3,"file":"ic-status-tag.types.js","sourceRoot":"","sources":["../../../src/components/ic-status-tag/ic-status-tag.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcStatusTagStatuses = \"neutral\" \| \"success\" \| \"warning\" \| \"danger\";\n\nexport type IcStatusTagAppearance = \"filled\" \| \"outlined\";\n"]}

package/dist/collection/components/ic-switch/ic-switch.css CHANGED Viewed

@@ -465,7 +465,7 @@ input {
   margin-bottom: var(--ic-space-sm);
 }
-.ic-switch-label-dense {
+.ic-switch-label-small {
   margin-bottom: 10px;
 }
@@ -598,26 +598,26 @@ input {
   background-color: var(--ic-architectural-white);
 }
-.ic-switch-dense {
+.ic-switch-small {
   gap: var(--ic-space-xxxs);
 }
-.ic-switch-dense .ic-switch-checked-status {
+.ic-switch-small .ic-switch-checked-status {
   padding-left: 6px;
 }
-.ic-switch-dense .ic-switch-toggle {
+.ic-switch-small .ic-switch-toggle {
   width: var(--ic-space-xxl);
   height: var(--ic-space-lg);
 }
-.ic-switch-dense .ic-switch-toggle::before {
+.ic-switch-small .ic-switch-toggle::before {
   width: var(--ic-space-md);
   height: var(--ic-space-md);
   left: var(--ic-space-xxs);
 }
-.ic-switch-dense .ic-switch-input:checked + .ic-switch-toggle::before {
+.ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {
   transform: translate(var(--ic-space-lg), -50%);
 }

package/dist/collection/components/ic-switch/ic-switch.js CHANGED Viewed

@@ -24,7 +24,7 @@ export class Switch {
     this.hideLabel = false;
     this.helperText = "";
     this.checked = null;
-    this.dense = false;
+    this.small = false;
     this.disabled = false;
     this.name = this.inputId;
     this.showState = false;
@@ -35,18 +35,18 @@ export class Switch {
     onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Switch");
   }
   render() {
-    const { label, checked, checkedState, dense, disabled, name, showState, value, hideLabel, helperText, inputId, } = this;
+    const { label, checked, checkedState, small, disabled, name, showState, value, hideLabel, helperText, inputId, } = this;
     const internalChecked = checked == null ? checkedState : checked;
     renderHiddenInput(true, this.el, name, internalChecked ? value : "", disabled);
     const describedBy = getInputDescribedByText(inputId, helperText !== "", false);
     return (h(Host, null, h("label", { class: {
         ["ic-switch-container"]: true,
         ["ic-switch-disabled"]: disabled,
-        ["ic-switch-dense"]: dense,
+        ["ic-switch-small"]: small,
       }, htmlFor: inputId }, !hideLabel && (h("ic-input-label", { for: inputId, label: label, helperText: helperText, readonly: true, disabled: disabled, class: {
         ["ic-switch-label"]: true,
-        ["ic-switch-label-dense"]: dense,
-      } })), !hideLabel && h("span", { class: "ic-switch-line-break" }), h("input", { checked: internalChecked, disabled: disabled, "aria-label": label, "aria-checked": internalChecked ? "true" : "false", "aria-describedby": describedBy, role: "switch", class: "ic-switch-input", type: "checkbox", name: "toggle", id: inputId, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange }), h("span", { class: "ic-switch-toggle" }, h("svg", { class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("line", { class: "ic-switch-icon-line", x1: "9", y1: dense ? "2" : "1", x2: "9", y2: dense ? "8" : "9" })), h("svg", { class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: dense ? "3.335" : "4.445" }))), h("slot", { name: "right-adornment" }), showState && (h("ic-typography", { "aria-hidden": "true", variant: "label", class: "ic-switch-checked-status" }, internalChecked ? "On" : "Off")))));
+        ["ic-switch-label-small"]: small,
+      } })), !hideLabel && h("span", { class: "ic-switch-line-break" }), h("input", { checked: internalChecked, disabled: disabled, "aria-label": label, "aria-checked": internalChecked ? "true" : "false", "aria-describedby": describedBy, role: "switch", class: "ic-switch-input", type: "checkbox", name: "toggle", id: inputId, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange }), h("span", { class: "ic-switch-toggle" }, h("svg", { class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("line", { class: "ic-switch-icon-line", x1: "9", y1: small ? "2" : "1", x2: "9", y2: small ? "8" : "9" })), h("svg", { class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: small ? "3.335" : "4.445" }))), h("slot", { name: "right-adornment" }), showState && (h("ic-typography", { "aria-hidden": "true", variant: "label", class: "ic-switch-checked-status" }, internalChecked ? "On" : "Off")))));
   }
   static get is() { return "ic-switch"; }
   static get encapsulation() { return "shadow"; }
@@ -133,7 +133,7 @@ export class Switch {
         "reflect": false,
         "defaultValue": "null"
       },
-      "dense": {
+      "small": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -145,9 +145,9 @@ export class Switch {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If true, the component reduces in size to the dense state."
+          "text": "If true, the component reduces in size to the small state."
         },
-        "attribute": "dense",
+        "attribute": "small",
         "reflect": false,
         "defaultValue": "false"
       },

package/dist/collection/components/ic-switch/ic-switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-switch.js","sourceRoot":"","sources":["../../../src/components/ic-switch/ic-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport {\n getInputDescribedByText,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n} from \"../../utils/helpers\";\nimport { IcSwitchChangeEventDetail } from \"./ic-switch.types\";\n\nlet inputIds = 0;\n\n/*\n @slot right-adornment - Content is placed to the right of switch before state label.\n /\n@Component({\n tag: \"ic-switch\",\n styleUrl: \"ic-switch.css\",\n shadow: true,\n})\nexport class Switch {\n private inputId = `ic-switch-input-${inputIds++}`;\n\n @Element() el: HTMLIcSwitchElement;\n\n /\n Applies an aria-label to the component, for when no visual 'name' is provided.\n /\n @Prop() label!: string;\n\n /\n Hides the label and applies the required label value as an aria-label.\n /\n @Prop() hideLabel?: boolean = false;\n /\n Provide helper text to display additional field guidance.\n /\n @Prop() helperText?: string = \"\";\n /\n If true, the component is checked, if null the components state will be uncontrolled.\n /\n @Prop() checked?: boolean \| null = null;\n /\n If true, the component reduces in size to the ~~dense~~ state.\n /\n @Prop() ~~dense~~?: boolean = false;\n /\n If true, the component is not interactive.\n /\n @Prop() disabled?: boolean = false;\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name?: string = this.inputId;\n /\n If true, the component will render the On/Off state text.\n /\n @Prop() showState?: boolean = false;\n\n /\n The value of the toggle does not mean if it's checked or not, use the `checked`\n * property for that.\n \n The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\n * it's only used when the toggle participates in a native `<form>`.\n /\n @Prop() value?: string \| null = \"on\";\n\n /\n Emitted when the value property has changed.\n /\n @Event() icChange!: EventEmitter<IcSwitchChangeEventDetail>;\n\n /\n Emitted when the toggle has focus.\n /\n @Event() icFocus!: EventEmitter<void>;\n\n /\n Emitted when the toggle loses focus.\n */\n @Event() icBlur!: EventEmitter<void>;\n\n @State() checkedState: boolean = false;\n\n private handleChange = () => {\n this.checkedState = !this.checkedState;\n this.icChange.emit({\n checked: this.checkedState,\n value: this.value,\n });\n };\n\n private onFocus = () => {\n this.icFocus.emit();\n };\n\n private onBlur = () => {\n this.icBlur.emit();\n };\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Switch\"\n );\n }\n\n render() {\n const {\n label,\n checked,\n checkedState,\n ~~dense~~,\n disabled,\n name,\n showState,\n value,\n hideLabel,\n helperText,\n inputId,\n } = this;\n\n const internalChecked = checked == null ? checkedState : checked;\n\n renderHiddenInput(\n true,\n this.el,\n name,\n internalChecked ? value : \"\",\n disabled\n );\n\n const describedBy = getInputDescribedByText(\n inputId,\n helperText !== \"\",\n false\n );\n\n return (\n <Host>\n <label\n class={{\n [\"ic-switch-container\"]: true,\n [\"ic-switch-disabled\"]: disabled,\n [\"ic-switch-~~dense~~\"]: ~~dense~~,\n }}\n htmlFor={inputId}\n >\n {!hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n readonly={true}\n disabled={disabled}\n class={{\n [\"ic-switch-label\"]: true,\n [\"ic-switch-label-~~dense~~\"]: ~~dense~~,\n }}\n ></ic-input-label>\n )}\n {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n <input\n checked={internalChecked}\n disabled={disabled}\n aria-label={label}\n aria-checked={internalChecked ? \"true\" : \"false\"}\n aria-describedby={describedBy}\n role=\"switch\"\n class=\"ic-switch-input\"\n type=\"checkbox\"\n name=\"toggle\"\n id={inputId}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onChange={this.handleChange}\n />\n <span class=\"ic-switch-toggle\">\n <svg\n class=\"ic-switch-icon\"\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 10 10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line\n class=\"ic-switch-icon-line\"\n x1=\"9\"\n y1={~~dense~~ ? \"2\" : \"1\"}\n x2=\"9\"\n y2={~~dense~~ ? \"8\" : \"9\"}\n />\n </svg>\n <svg\n class=\"ic-switch-icon\"\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 10 10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle\n class=\"ic-switch-icon-circle\"\n fill=\"none\"\n cx=\"5\"\n cy=\"5\"\n r={~~dense~~ ? \"3.335\" : \"4.445\"}\n />\n </svg>\n </span>\n <slot name=\"right-adornment\"></slot>\n {showState && (\n <ic-typography\n aria-hidden=\"true\"\n variant=\"label\"\n class=\"ic-switch-checked-status\"\n >\n {internalChecked ? \"On\" : \"Off\"}\n </ic-typography>\n )}\n </label>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-switch.js","sourceRoot":"","sources":["../../../src/components/ic-switch/ic-switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EACL,OAAO,EACP,KAAK,GAEN,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,uBAAuB,EACvB,gCAAgC,EAChC,iBAAiB,GAClB,MAAM,qBAAqB,CAAC;AAG7B,IAAI,QAAQ,GAAG,CAAC,CAAC;AAEjB;;GAEG;AAMH,MAAM,OAAO,MAAM;;IACT,YAAO,GAAG,mBAAmB,QAAQ,EAAE,EAAE,CAAC;IAgE1C,iBAAY,GAAG,GAAG,EAAE;MAC1B,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;MACvC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,OAAO,EAAE,IAAI,CAAC,YAAY;QAC1B,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC,CAAC;IAEM,WAAM,GAAG,GAAG,EAAE;MACpB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC,CAAC;;qBAlE4B,KAAK;sBAIL,EAAE;mBAIG,IAAI;iBAIb,KAAK;oBAIF,KAAK;gBAIV,IAAI,CAAC,OAAO;qBAIN,KAAK;iBASH,IAAI;wBAiBH,KAAK;;EAkBtC,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,QAAQ,CACT,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EACJ,KAAK,EACL,OAAO,EACP,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,KAAK,EACL,SAAS,EACT,UAAU,EACV,OAAO,GACR,GAAG,IAAI,CAAC;IAET,MAAM,eAAe,GAAG,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC;IAEjE,iBAAiB,CACf,IAAI,EACJ,IAAI,CAAC,EAAE,EACP,IAAI,EACJ,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAC5B,QAAQ,CACT,CAAC;IAEF,MAAM,WAAW,GAAG,uBAAuB,CACzC,OAAO,EACP,UAAU,KAAK,EAAE,EACjB,KAAK,CACN,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,aACE,KAAK,EAAE;UACL,CAAC,qBAAqB,CAAC,EAAE,IAAI;UAC7B,CAAC,oBAAoB,CAAC,EAAE,QAAQ;UAChC,CAAC,iBAAiB,CAAC,EAAE,KAAK;SAC3B,EACD,OAAO,EAAE,OAAO;QAEf,CAAC,SAAS,IAAI,CACb,sBACE,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE;YACL,CAAC,iBAAiB,CAAC,EAAE,IAAI;YACzB,CAAC,uBAAuB,CAAC,EAAE,KAAK;WACjC,GACe,CACnB;QACA,CAAC,SAAS,IAAI,YAAM,KAAK,EAAC,sBAAsB,GAAQ;QACzD,aACE,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAE,QAAQ,gBACN,KAAK,kBACH,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,sBAC9B,WAAW,EAC7B,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,YAAY,GAC3B;QACF,YAAM,KAAK,EAAC,kBAAkB;UAC5B,WACE,KAAK,EAAC,gBAAgB,iBACV,MAAM,EAClB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;YAElC,YACE,KAAK,EAAC,qBAAqB,EAC3B,EAAE,EAAC,GAAG,EACN,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EACrB,EAAE,EAAC,GAAG,EACN,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GACrB,CACE;UACN,WACE,KAAK,EAAC,gBAAgB,iBACV,MAAM,EAClB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;YAElC,cACE,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,GAC5B,CACE,CACD;QACP,YAAM,IAAI,EAAC,iBAAiB,GAAQ;QACnC,SAAS,IAAI,CACZ,oCACc,MAAM,EAClB,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,0BAA0B,IAE/B,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CACjB,CACjB,CACK,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport {\n getInputDescribedByText,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n} from \"../../utils/helpers\";\nimport { IcSwitchChangeEventDetail } from \"./ic-switch.types\";\n\nlet inputIds = 0;\n\n/*\n @slot right-adornment - Content is placed to the right of switch before state label.\n /\n@Component({\n tag: \"ic-switch\",\n styleUrl: \"ic-switch.css\",\n shadow: true,\n})\nexport class Switch {\n private inputId = `ic-switch-input-${inputIds++}`;\n\n @Element() el: HTMLIcSwitchElement;\n\n /\n Applies an aria-label to the component, for when no visual 'name' is provided.\n /\n @Prop() label!: string;\n\n /\n Hides the label and applies the required label value as an aria-label.\n /\n @Prop() hideLabel?: boolean = false;\n /\n Provide helper text to display additional field guidance.\n /\n @Prop() helperText?: string = \"\";\n /\n If true, the component is checked, if null the components state will be uncontrolled.\n /\n @Prop() checked?: boolean \| null = null;\n /\n If true, the component reduces in size to the small state.\n /\n @Prop() small?: boolean = false;\n /\n If true, the component is not interactive.\n /\n @Prop() disabled?: boolean = false;\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name?: string = this.inputId;\n /\n If true, the component will render the On/Off state text.\n /\n @Prop() showState?: boolean = false;\n\n /\n The value of the toggle does not mean if it's checked or not, use the `checked`\n * property for that.\n \n The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\n * it's only used when the toggle participates in a native `<form>`.\n /\n @Prop() value?: string \| null = \"on\";\n\n /\n Emitted when the value property has changed.\n /\n @Event() icChange!: EventEmitter<IcSwitchChangeEventDetail>;\n\n /\n Emitted when the toggle has focus.\n /\n @Event() icFocus!: EventEmitter<void>;\n\n /\n Emitted when the toggle loses focus.\n */\n @Event() icBlur!: EventEmitter<void>;\n\n @State() checkedState: boolean = false;\n\n private handleChange = () => {\n this.checkedState = !this.checkedState;\n this.icChange.emit({\n checked: this.checkedState,\n value: this.value,\n });\n };\n\n private onFocus = () => {\n this.icFocus.emit();\n };\n\n private onBlur = () => {\n this.icBlur.emit();\n };\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Switch\"\n );\n }\n\n render() {\n const {\n label,\n checked,\n checkedState,\n small,\n disabled,\n name,\n showState,\n value,\n hideLabel,\n helperText,\n inputId,\n } = this;\n\n const internalChecked = checked == null ? checkedState : checked;\n\n renderHiddenInput(\n true,\n this.el,\n name,\n internalChecked ? value : \"\",\n disabled\n );\n\n const describedBy = getInputDescribedByText(\n inputId,\n helperText !== \"\",\n false\n );\n\n return (\n <Host>\n <label\n class={{\n [\"ic-switch-container\"]: true,\n [\"ic-switch-disabled\"]: disabled,\n [\"ic-switch-small\"]: small,\n }}\n htmlFor={inputId}\n >\n {!hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n readonly={true}\n disabled={disabled}\n class={{\n [\"ic-switch-label\"]: true,\n [\"ic-switch-label-small\"]: small,\n }}\n ></ic-input-label>\n )}\n {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n <input\n checked={internalChecked}\n disabled={disabled}\n aria-label={label}\n aria-checked={internalChecked ? \"true\" : \"false\"}\n aria-describedby={describedBy}\n role=\"switch\"\n class=\"ic-switch-input\"\n type=\"checkbox\"\n name=\"toggle\"\n id={inputId}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onChange={this.handleChange}\n />\n <span class=\"ic-switch-toggle\">\n <svg\n class=\"ic-switch-icon\"\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 10 10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line\n class=\"ic-switch-icon-line\"\n x1=\"9\"\n y1={small ? \"2\" : \"1\"}\n x2=\"9\"\n y2={small ? \"8\" : \"9\"}\n />\n </svg>\n <svg\n class=\"ic-switch-icon\"\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 10 10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle\n class=\"ic-switch-icon-circle\"\n fill=\"none\"\n cx=\"5\"\n cy=\"5\"\n r={small ? \"3.335\" : \"4.445\"}\n />\n </svg>\n </span>\n <slot name=\"right-adornment\"></slot>\n {showState && (\n <ic-typography\n aria-hidden=\"true\"\n variant=\"label\"\n class=\"ic-switch-checked-status\"\n >\n {internalChecked ? \"On\" : \"Off\"}\n </ic-typography>\n )}\n </label>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-tab/ic-tab.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { Host, h, } from "@stencil/core";
 import { onComponentRequiredPropUndefined } from "../../utils/helpers";
+import { IcThemeForegroundEnum, } from "../../utils/types";
 /**
  * @slot icon - Content will be rendered next to the tab label.
  */
@@ -42,7 +43,7 @@ export class Tab {
     this.selected = false;
     this.tabId = undefined;
     this.tabPosition = undefined;
-    this.dark = false;
+    this.appearance = "light";
   }
   componentDidUpdate() {
     this.isInitialRender = false;
@@ -51,10 +52,10 @@ export class Tab {
     onComponentRequiredPropUndefined([{ prop: this.tabPosition, propName: "tab-position" }], "Tab");
   }
   render() {
-    const { disabled, selected, dark } = this;
+    const { disabled, selected, appearance } = this;
     return (h(Host, { class: {
         ["with-transition"]: !this.isInitialRender,
-        ["ic-tab-dark"]: dark,
+        ["ic-tab-dark"]: appearance === IcThemeForegroundEnum.Dark,
       }, role: "tab", "aria-selected": selected ? "true" : "false", onClick: this.handleClick, onFocus: this.handleFocus, onMouseDown: this.handleMouseDown, "aria-disabled": disabled ? "true" : "false", tabindex: this.selected ? 0 : -1 }, this.host.querySelector('[slot="icon"]') && h("slot", { name: "icon" }), h("ic-typography", { class: "ic-tab-label", variant: "label" }, h("span", null, h("slot", null)))));
   }
   static get is() { return "ic-tab"; }
@@ -171,26 +172,31 @@ export class Tab {
         "attribute": "tab-position",
         "reflect": false
       },
-      "dark": {
-        "type": "boolean",
+      "appearance": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "IcThemeForegroundNoDefault",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {
+            "IcThemeForegroundNoDefault": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "Determines whether the dark variant of the tabs should be displayed."
+              "text": "Determines whether the light or dark variant of the tabs should be displayed."
             }],
           "text": ""
         },
-        "attribute": "dark",
+        "attribute": "appearance",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "\"light\""
       }
     };
   }

package/dist/collection/components/ic-tab/ic-tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-tab.js","sourceRoot":"","sources":["../../../src/components/ic-tab/ic-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,CAAC,GACF,MAAM,eAAe,CAAC;~~AACvB~~,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;~~AAIvE~~;;GAEG;AAMH,MAAM,OAAO,GAAG;;IAiCN,oBAAe,GAAY,IAAI,CAAC;IAChC,mBAAc,GAAY,KAAK,CAAC;IAEhC,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;OAC3B,CAAC,CAAC;MACH,IAAI,IAAI,CAAC,cAAc,EAAE;QACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACjB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,SAAS,EAAE,IAAI,CAAC,SAAS;UACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;SAC3B,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;OAC7B;IACH,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACjB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,SAAS,EAAE,IAAI,CAAC,SAAS;UACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;SAC3B,CAAC,CAAC;OACJ;IACH,CAAC,CAAC;IAEM,oBAAe,GAAG,GAAG,EAAE;MAC7B,iDAAiD;MACjD,wFAAwF;MACxF,iFAAiF;MACjF,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC7B,CAAC,CAAC;qBA/D4C,SAAS;oBAK1B,KAAK;oBAGY,KAAK;;;~~gBAS1B~~,~~KAAK~~;;~~EAgD9B~~,kBAAkB;IAChB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;EAC/B,CAAC;EAED,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC,EACtD,KAAK,CACN,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,~~IAAI~~,EAAE,GAAG,IAAI,CAAC;~~IAC1C~~,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,iBAAiB,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe;QAC1C,CAAC,aAAa,CAAC,EAAE,IAAI;~~OACtB~~,EACD,IAAI,EAAC,KAAK,mBACK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1C,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,WAAW,EAAE,IAAI,CAAC,eAAe,mBAClB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1C,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;MAE/B,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ;MACtE,qBAAe,KAAK,EAAC,cAAc,EAAC,OAAO,EAAC,OAAO;QACjD;UACE,eAAa,CACR,CACO,CACX,CACR,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n} from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\nimport { IcTabClickEventDetail } from \"./ic-tab.types\";\n\n/*\n @slot icon - Content will be rendered next to the tab label.\n /\n@Component({\n tag: \"ic-tab\",\n styleUrl: \"ic-tab.css\",\n shadow: true,\n})\nexport class Tab {\n @Element() host: HTMLIcTabElement;\n\n /* @internal Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n Disables the tab.\n /\n @Prop() disabled?: boolean = false;\n\n /* @internal Will display a selected indicator and set tabIndex. /\n @Prop({ reflect: true }) selected?: boolean = false;\n\n /* @internal The shared ID between panel and tab. /\n @Prop({ reflect: true }) tabId?: string;\n\n /* @internal The position of the tab inside the tabs array in context. /\n @Prop() tabPosition!: number;\n\n /* @internal Determines whether the dark variant of the tabs should be displayed. /\n @Prop() ~~dark~~?: ~~boolean~~ = ~~false~~;\n\n /\n Called when a tab is selected.\n /\n @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n /\n @internal Called when a tab is focussed.\n */\n @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n\n private isInitialRender: boolean = true;\n private focusFromClick: boolean = false;\n\n private handleClick = () => {\n this.tabClick.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n if (this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n this.focusFromClick = false;\n }\n };\n\n private handleFocus = () => {\n if (!this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n }\n };\n\n private handleMouseDown = () => {\n //set flag so that focus gets handled after click\n //there is a timing issue where a long click only causes focus to happen & not the click\n //the focus does need to be a seperate event though to handle focus from keyboard\n this.focusFromClick = true;\n };\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.tabPosition, propName: \"tab-position\" }],\n \"Tab\"\n );\n }\n\n render() {\n const { disabled, selected, ~~dark~~ } = this;\n return (\n <Host\n class={{\n [\"with-transition\"]: !this.isInitialRender,\n [\"ic-tab-dark\"]: ~~dark~~,\n }}\n role=\"tab\"\n aria-selected={selected ? \"true\" : \"false\"}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n onMouseDown={this.handleMouseDown}\n aria-disabled={disabled ? \"true\" : \"false\"}\n tabindex={this.selected ? 0 : -1}\n >\n {this.host.querySelector('[slot=\"icon\"]') && <slot name=\"icon\"></slot>}\n <ic-typography class=\"ic-tab-label\" variant=\"label\">\n <span>\n <slot></slot>\n </span>\n </ic-typography>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-tab.js","sourceRoot":"","sources":["../../../src/components/ic-tab/ic-tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n} from \"@stencil/core\";\n\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcTabClickEventDetail } from \"./ic-tab.types\";\nimport {\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/*\n @slot icon - Content will be rendered next to the tab label.\n /\n@Component({\n tag: \"ic-tab\",\n styleUrl: \"ic-tab.css\",\n shadow: true,\n})\nexport class Tab {\n @Element() host: HTMLIcTabElement;\n\n /* @internal Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n Disables the tab.\n /\n @Prop() disabled?: boolean = false;\n\n /* @internal Will display a selected indicator and set tabIndex. /\n @Prop({ reflect: true }) selected?: boolean = false;\n\n /* @internal The shared ID between panel and tab. /\n @Prop({ reflect: true }) tabId?: string;\n\n /* @internal The position of the tab inside the tabs array in context. /\n @Prop() tabPosition!: number;\n\n /* @internal Determines whether the light or dark variant of the tabs should be displayed. /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"light\";\n\n /\n Called when a tab is selected.\n /\n @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n /\n @internal Called when a tab is focussed.\n */\n @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n\n private isInitialRender: boolean = true;\n private focusFromClick: boolean = false;\n\n private handleClick = () => {\n this.tabClick.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n if (this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n this.focusFromClick = false;\n }\n };\n\n private handleFocus = () => {\n if (!this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n }\n };\n\n private handleMouseDown = () => {\n //set flag so that focus gets handled after click\n //there is a timing issue where a long click only causes focus to happen & not the click\n //the focus does need to be a seperate event though to handle focus from keyboard\n this.focusFromClick = true;\n };\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.tabPosition, propName: \"tab-position\" }],\n \"Tab\"\n );\n }\n\n render() {\n const { disabled, selected, appearance } = this;\n return (\n <Host\n class={{\n [\"with-transition\"]: !this.isInitialRender,\n [\"ic-tab-dark\"]: appearance === IcThemeForegroundEnum.Dark,\n }}\n role=\"tab\"\n aria-selected={selected ? \"true\" : \"false\"}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n onMouseDown={this.handleMouseDown}\n aria-disabled={disabled ? \"true\" : \"false\"}\n tabindex={this.selected ? 0 : -1}\n >\n {this.host.querySelector('[slot=\"icon\"]') && <slot name=\"icon\"></slot>}\n <ic-typography class=\"ic-tab-label\" variant=\"label\">\n <span>\n <slot></slot>\n </span>\n </ic-typography>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-tab-context/ic-tab-context.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { h, } from "@stencil/core";
+import { IcThemeForegroundEnum, } from "../../utils/types";
 export class TabContext {
   constructor() {
     // Sets attributes to link tabs and tabpanels
@@ -16,30 +17,30 @@ export class TabContext {
         this.tabPanels[index].panelId = shared;
         this.tabPanels[index].tabPosition = index;
         this.tabPanels[index].setAttribute("aria-labelledby", tabId);
-        if (this.dark) {
-          tab.dark = true;
+        if (this.appearance === IcThemeForegroundEnum.Dark) {
+          tab.appearance = this.appearance;
         }
       });
-      if (this.dark) {
-        this.tabList.dark = true;
+      if (this.appearance === IcThemeForegroundEnum.Dark) {
+        this.tabGroup.appearance = this.appearance;
       }
     };
     // Gets tabs and tabpanels with the same context ID
     this.getChildren = () => {
-      this.tabList = Array.from(this.host.querySelectorAll("ic-tab-list")).find((tabList) => tabList.contextId === this.contextId);
-      this.tabs = Array.from(this.tabList.querySelectorAll("ic-tab")).filter((tab) => tab.contextId === this.contextId);
+      this.tabGroup = Array.from(this.host.querySelectorAll("ic-tab-group")).find((tabGroup) => tabGroup.contextId === this.contextId);
+      this.tabs = Array.from(this.tabGroup.querySelectorAll("ic-tab")).filter((tab) => tab.contextId === this.contextId);
       this.enabledTabs = this.getEnabledTabs();
       this.tabPanels = Array.from(this.host.querySelectorAll("ic-tab-panel"));
     };
     // Determines how keyboard navigation is to be handled based on the activation type
     this.attatchEventListeners = () => {
       if (this.activationType === "automatic") {
-        this.tabList.addEventListener("keydown", (event) => {
+        this.tabGroup.addEventListener("keydown", (event) => {
           this.handleKeyBoardNavAutomatic(event);
         });
       }
       else {
-        this.tabList.addEventListener("keydown", (event) => {
+        this.tabGroup.addEventListener("keydown", (event) => {
           this.handleKeyBoardNavManual(event);
         });
       }
@@ -171,7 +172,7 @@ export class TabContext {
     this.contextId = "default";
     this.activationType = "automatic";
     this.selectedTabIndex = undefined;
-    this.dark = false;
+    this.appearance = "light";
     this.selectedTab = undefined;
   }
   updateSelectedTab(newValue) {
@@ -199,10 +200,10 @@ export class TabContext {
   }
   disconnectedCallback() {
     if (this.activationType === "manual") {
-      this.tabList.removeEventListener("keydown", (event) => this.handleKeyBoardNavManual(event));
+      this.tabGroup.removeEventListener("keydown", (event) => this.handleKeyBoardNavManual(event));
     }
     else {
-      this.tabList.removeEventListener("keydown", (event) => this.handleKeyBoardNavAutomatic(event));
+      this.tabGroup.removeEventListener("keydown", (event) => this.handleKeyBoardNavAutomatic(event));
     }
   }
   render() {
@@ -269,23 +270,28 @@ export class TabContext {
         "attribute": "selected-tab-index",
         "reflect": false
       },
-      "dark": {
-        "type": "boolean",
+      "appearance": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "IcThemeForegroundNoDefault",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {
+            "IcThemeForegroundNoDefault": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Determines whether the dark variant of the tabs should be displayed."
+          "text": "Determines whether the light or dark variant of the tabs should be displayed."
         },
-        "attribute": "dark",
+        "attribute": "appearance",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "\"light\""
       }
     };
   }

package/dist/collection/components/ic-tab-context/ic-tab-context.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-tab-context.js","sourceRoot":"","sources":["../../../src/components/ic-tab-context/ic-tab-context.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Listen,\n Prop,\n State,\n h,\n Watch,\n} from \"@stencil/core\";\nimport { IcActivationTypes } from \"../../utils/types\";\n\nimport {\n IcTabClickEventDetail,\n IcTabSelectEventDetail,\n} from \"../ic-tab/ic-tab.types\";\n\n@Component({\n tag: \"ic-tab-context\",\n})\nexport class TabContext {\n @Element() host: HTMLIcTabContextElement;\n\n /*\n Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.\n /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.\n /\n @Prop() activationType?: IcActivationTypes = \"automatic\";\n\n /\n Allows the user to control the selected tab. Must be used alongside the tabSelect event to manage tab selection.\n /\n @Prop() selectedTabIndex?: number;\n\n /\n Determines whether the dark variant of the tabs should be displayed.\n /\n @Prop() dark?: boolean = false;\n\n @State() selectedTab: number \| null;\n\n @Watch(\"selectedTabIndex\")\n updateSelectedTab(newValue: number): void {\n this.selectedTab = newValue;\n }\n\n /\n Emitted when a user selects a tab.\n */\n @Event() tabSelect: EventEmitter<IcTabSelectEventDetail>;\n\n @Listen(\"tabClick\")\n tabClickHandler(event: CustomEvent<IcTabClickEventDetail>): void {\n if (\n this.selectedTabIndex === undefined &&\n event.detail.contextId === this.contextId\n ) {\n this.selectedTab = event.detail.position;\n }\n this.tabSelect.emit({\n tabIndex: event.detail.position,\n });\n }\n\n private controlledMode: boolean;\n private tabs: HTMLIcTabElement[];\n private enabledTabs: HTMLIcTabElement[];\n private tabPanels: HTMLIcTabPanelElement[];\n private tabList: HTMLIcTabListElement;\n private focusedTabIndex: number;\n\n // Sets attributes to link tabs and tabpanels\n private linkTabs = () => {\n this.tabs.forEach((tab, index) => {\n const tabId = `ic-tab-${index}-context-${this.contextId}`;\n const tabPanelId = `ic-tab-panel-${index}-context-${this.contextId}`;\n const shared = `ic-tab--${index}-context-${this.contextId}`;\n tab.setAttribute(\"id\", tabId);\n tab.tabId = shared;\n tab.tabPosition = index;\n tab.setAttribute(\"aria-controls\", tabPanelId);\n tab.setAttribute(\"context-id\", this.contextId);\n this.tabPanels[index].setAttribute(\"id\", tabPanelId);\n this.tabPanels[index].panelId = shared;\n this.tabPanels[index].tabPosition = index;\n this.tabPanels[index].setAttribute(\"aria-labelledby\", tabId);\n\n if (this.dark) {\n tab.dark = true;\n }\n });\n\n if (this.dark) {\n this.tabList.dark = true;\n }\n };\n\n // Gets tabs and tabpanels with the same context ID\n private getChildren = (): void => {\n this.tabList = Array.from(this.host.querySelectorAll(\"ic-tab-list\")).find(\n (tabList) => tabList.contextId === this.contextId\n );\n this.tabs = Array.from(this.tabList.querySelectorAll(\"ic-tab\")).filter(\n (tab) => tab.contextId === this.contextId\n );\n this.enabledTabs = this.getEnabledTabs();\n this.tabPanels = Array.from(this.host.querySelectorAll(\"ic-tab-panel\"));\n };\n\n // Determines how keyboard navigation is to be handled based on the activation type\n private attatchEventListeners = (): void => {\n if (this.activationType === \"automatic\") {\n this.tabList.addEventListener(\"keydown\", (event) => {\n this.handleKeyBoardNavAutomatic(event);\n });\n } else {\n this.tabList.addEventListener(\"keydown\", (event) => {\n this.handleKeyBoardNavManual(event);\n });\n }\n };\n\n // Determines whether the selected tab is being controlled within the component\n // or by the user (via selectedTabIndex and onTabSelect)\n private setControlledMode = (): void => {\n if (this.selectedTabIndex !== undefined) {\n this.controlledMode = true;\n this.selectedTab = this.selectedTabIndex;\n }\n };\n\n // Sets the tab that is selected on initial render\n private setInitialTab = (): void => {\n if (this.controlledMode) {\n this.selectedTab = this.selectedTabIndex;\n this.focusedTabIndex = this.selectedTabIndex;\n } else {\n const firstEnabledTabIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[0].tabId\n );\n this.selectedTab = firstEnabledTabIndex;\n this.focusedTabIndex = firstEnabledTabIndex;\n }\n };\n\n // Passes the selected tab to the tab and tab panel components\n private configureTabs = () => {\n this.enabledTabs.forEach((tab) => {\n tab.selected = tab.tabPosition === this.selectedTab;\n });\n this.tabPanels.forEach((tabPanel) => {\n tabPanel.selectedTab = this.tabs[this.selectedTab].tabId;\n });\n };\n\n private getEnabledTabs = () => {\n return Array.from(this.tabs).filter((child) => !child.disabled);\n };\n\n private getIndexOfEnabledTab = (allTabsIndex: number) => {\n return this.enabledTabs.findIndex(\n (tab) => tab.tabId === this.tabs[allTabsIndex].tabId\n );\n };\n\n // Sets focus on tab and selects it\n private keyboardSelectTab = (enabledTabIndex: number) => {\n const newIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n );\n this.enabledTabs[enabledTabIndex].focus();\n if (!this.controlledMode) {\n this.selectedTab = newIndex;\n } else {\n this.tabSelect.emit({ tabIndex: newIndex });\n }\n };\n\n // Sets focus on tab without selecting it (for manual activation)\n private keyboardFocusTab = (enabledTabIndex: number) => {\n const newIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n );\n this.enabledTabs[enabledTabIndex].focus();\n this.focusedTabIndex = newIndex;\n };\n\n private handleKeyBoardNavAutomatic = (event: KeyboardEvent) => {\n const key = event.key;\n const enabledTabIndex = this.getIndexOfEnabledTab(this.selectedTab);\n let preventDefault = true;\n switch (key) {\n case \"Home\":\n this.keyboardSelectTab(0);\n break;\n case \"End\":\n this.keyboardSelectTab(this.enabledTabs.length - 1);\n break;\n case \"ArrowRight\":\n if (enabledTabIndex < this.enabledTabs.length - 1) {\n this.keyboardSelectTab(enabledTabIndex + 1);\n } else {\n this.keyboardSelectTab(0);\n }\n break;\n case \"ArrowLeft\":\n if (enabledTabIndex > 0) {\n this.keyboardSelectTab(enabledTabIndex - 1);\n } else {\n this.keyboardSelectTab(this.enabledTabs.length - 1);\n }\n break;\n default:\n preventDefault = false;\n }\n if (preventDefault) event.preventDefault();\n };\n\n private handleKeyBoardNavManual = (event: KeyboardEvent) => {\n const key = event.key;\n const enabledTabIndex = this.getIndexOfEnabledTab(this.focusedTabIndex);\n let preventDefault = true;\n switch (key) {\n case \"Home\":\n this.keyboardFocusTab(0);\n break;\n case \"End\":\n this.keyboardFocusTab(this.enabledTabs.length - 1);\n break;\n case \"ArrowRight\":\n if (enabledTabIndex < this.enabledTabs.length - 1) {\n this.keyboardFocusTab(enabledTabIndex + 1);\n } else {\n this.keyboardFocusTab(0);\n }\n break;\n case \"ArrowLeft\":\n if (enabledTabIndex > 0) {\n this.keyboardFocusTab(enabledTabIndex - 1);\n } else {\n this.keyboardFocusTab(this.enabledTabs.length - 1);\n }\n break;\n case \"Enter\":\n this.keyboardSelectTab(this.focusedTabIndex);\n break;\n case \" \":\n this.keyboardSelectTab(this.focusedTabIndex);\n break;\n default:\n preventDefault = false;\n }\n if (preventDefault) event.preventDefault();\n };\n\n componentDidLoad(): void {\n this.setControlledMode();\n this.getChildren();\n this.linkTabs();\n this.attatchEventListeners();\n this.setInitialTab();\n this.configureTabs();\n }\n\n componentWillUpdate(): void {\n this.configureTabs();\n }\n\n disconnectedCallback(): void {\n if (this.activationType === \"manual\") {\n this.tabList.removeEventListener(\"keydown\", (event) =>\n this.handleKeyBoardNavManual(event)\n );\n } else {\n this.tabList.removeEventListener(\"keydown\", (event) =>\n this.handleKeyBoardNavAutomatic(event)\n );\n }\n }\n\n render() {\n return <slot></slot>;\n }\n}\n"]}
1	+ {"version":3,"file":"ic-tab-context.js","sourceRoot":"","sources":["../../../src/components/ic-tab-context/ic-tab-context.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Listen,\n Prop,\n State,\n h,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcActivationTypes,\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nimport {\n IcTabClickEventDetail,\n IcTabSelectEventDetail,\n} from \"../ic-tab/ic-tab.types\";\n\n@Component({\n tag: \"ic-tab-context\",\n})\nexport class TabContext {\n @Element() host: HTMLIcTabContextElement;\n\n /*\n Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.\n /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.\n /\n @Prop() activationType?: IcActivationTypes = \"automatic\";\n\n /\n Allows the user to control the selected tab. Must be used alongside the tabSelect event to manage tab selection.\n /\n @Prop() selectedTabIndex?: number;\n\n /\n Determines whether the light or dark variant of the tabs should be displayed.\n /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"light\";\n\n @State() selectedTab: number \| null;\n\n @Watch(\"selectedTabIndex\")\n updateSelectedTab(newValue: number): void {\n this.selectedTab = newValue;\n }\n\n /\n Emitted when a user selects a tab.\n */\n @Event() tabSelect: EventEmitter<IcTabSelectEventDetail>;\n\n @Listen(\"tabClick\")\n tabClickHandler(event: CustomEvent<IcTabClickEventDetail>): void {\n if (\n this.selectedTabIndex === undefined &&\n event.detail.contextId === this.contextId\n ) {\n this.selectedTab = event.detail.position;\n }\n this.tabSelect.emit({\n tabIndex: event.detail.position,\n });\n }\n\n private controlledMode: boolean;\n private tabs: HTMLIcTabElement[];\n private enabledTabs: HTMLIcTabElement[];\n private tabPanels: HTMLIcTabPanelElement[];\n private tabGroup: HTMLIcTabGroupElement;\n private focusedTabIndex: number;\n\n // Sets attributes to link tabs and tabpanels\n private linkTabs = () => {\n this.tabs.forEach((tab, index) => {\n const tabId = `ic-tab-${index}-context-${this.contextId}`;\n const tabPanelId = `ic-tab-panel-${index}-context-${this.contextId}`;\n const shared = `ic-tab--${index}-context-${this.contextId}`;\n tab.setAttribute(\"id\", tabId);\n tab.tabId = shared;\n tab.tabPosition = index;\n tab.setAttribute(\"aria-controls\", tabPanelId);\n tab.setAttribute(\"context-id\", this.contextId);\n this.tabPanels[index].setAttribute(\"id\", tabPanelId);\n this.tabPanels[index].panelId = shared;\n this.tabPanels[index].tabPosition = index;\n this.tabPanels[index].setAttribute(\"aria-labelledby\", tabId);\n\n if (this.appearance === IcThemeForegroundEnum.Dark) {\n tab.appearance = this.appearance;\n }\n });\n\n if (this.appearance === IcThemeForegroundEnum.Dark) {\n this.tabGroup.appearance = this.appearance;\n }\n };\n\n // Gets tabs and tabpanels with the same context ID\n private getChildren = (): void => {\n this.tabGroup = Array.from(this.host.querySelectorAll(\"ic-tab-group\")).find(\n (tabGroup) => tabGroup.contextId === this.contextId\n );\n this.tabs = Array.from(this.tabGroup.querySelectorAll(\"ic-tab\")).filter(\n (tab) => tab.contextId === this.contextId\n );\n this.enabledTabs = this.getEnabledTabs();\n this.tabPanels = Array.from(this.host.querySelectorAll(\"ic-tab-panel\"));\n };\n\n // Determines how keyboard navigation is to be handled based on the activation type\n private attatchEventListeners = (): void => {\n if (this.activationType === \"automatic\") {\n this.tabGroup.addEventListener(\"keydown\", (event) => {\n this.handleKeyBoardNavAutomatic(event);\n });\n } else {\n this.tabGroup.addEventListener(\"keydown\", (event) => {\n this.handleKeyBoardNavManual(event);\n });\n }\n };\n\n // Determines whether the selected tab is being controlled within the component\n // or by the user (via selectedTabIndex and onTabSelect)\n private setControlledMode = (): void => {\n if (this.selectedTabIndex !== undefined) {\n this.controlledMode = true;\n this.selectedTab = this.selectedTabIndex;\n }\n };\n\n // Sets the tab that is selected on initial render\n private setInitialTab = (): void => {\n if (this.controlledMode) {\n this.selectedTab = this.selectedTabIndex;\n this.focusedTabIndex = this.selectedTabIndex;\n } else {\n const firstEnabledTabIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[0].tabId\n );\n this.selectedTab = firstEnabledTabIndex;\n this.focusedTabIndex = firstEnabledTabIndex;\n }\n };\n\n // Passes the selected tab to the tab and tab panel components\n private configureTabs = () => {\n this.enabledTabs.forEach((tab) => {\n tab.selected = tab.tabPosition === this.selectedTab;\n });\n this.tabPanels.forEach((tabPanel) => {\n tabPanel.selectedTab = this.tabs[this.selectedTab].tabId;\n });\n };\n\n private getEnabledTabs = () => {\n return Array.from(this.tabs).filter((child) => !child.disabled);\n };\n\n private getIndexOfEnabledTab = (allTabsIndex: number) => {\n return this.enabledTabs.findIndex(\n (tab) => tab.tabId === this.tabs[allTabsIndex].tabId\n );\n };\n\n // Sets focus on tab and selects it\n private keyboardSelectTab = (enabledTabIndex: number) => {\n const newIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n );\n this.enabledTabs[enabledTabIndex].focus();\n if (!this.controlledMode) {\n this.selectedTab = newIndex;\n } else {\n this.tabSelect.emit({ tabIndex: newIndex });\n }\n };\n\n // Sets focus on tab without selecting it (for manual activation)\n private keyboardFocusTab = (enabledTabIndex: number) => {\n const newIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n );\n this.enabledTabs[enabledTabIndex].focus();\n this.focusedTabIndex = newIndex;\n };\n\n private handleKeyBoardNavAutomatic = (event: KeyboardEvent) => {\n const key = event.key;\n const enabledTabIndex = this.getIndexOfEnabledTab(this.selectedTab);\n let preventDefault = true;\n switch (key) {\n case \"Home\":\n this.keyboardSelectTab(0);\n break;\n case \"End\":\n this.keyboardSelectTab(this.enabledTabs.length - 1);\n break;\n case \"ArrowRight\":\n if (enabledTabIndex < this.enabledTabs.length - 1) {\n this.keyboardSelectTab(enabledTabIndex + 1);\n } else {\n this.keyboardSelectTab(0);\n }\n break;\n case \"ArrowLeft\":\n if (enabledTabIndex > 0) {\n this.keyboardSelectTab(enabledTabIndex - 1);\n } else {\n this.keyboardSelectTab(this.enabledTabs.length - 1);\n }\n break;\n default:\n preventDefault = false;\n }\n if (preventDefault) event.preventDefault();\n };\n\n private handleKeyBoardNavManual = (event: KeyboardEvent) => {\n const key = event.key;\n const enabledTabIndex = this.getIndexOfEnabledTab(this.focusedTabIndex);\n let preventDefault = true;\n switch (key) {\n case \"Home\":\n this.keyboardFocusTab(0);\n break;\n case \"End\":\n this.keyboardFocusTab(this.enabledTabs.length - 1);\n break;\n case \"ArrowRight\":\n if (enabledTabIndex < this.enabledTabs.length - 1) {\n this.keyboardFocusTab(enabledTabIndex + 1);\n } else {\n this.keyboardFocusTab(0);\n }\n break;\n case \"ArrowLeft\":\n if (enabledTabIndex > 0) {\n this.keyboardFocusTab(enabledTabIndex - 1);\n } else {\n this.keyboardFocusTab(this.enabledTabs.length - 1);\n }\n break;\n case \"Enter\":\n this.keyboardSelectTab(this.focusedTabIndex);\n break;\n case \" \":\n this.keyboardSelectTab(this.focusedTabIndex);\n break;\n default:\n preventDefault = false;\n }\n if (preventDefault) event.preventDefault();\n };\n\n componentDidLoad(): void {\n this.setControlledMode();\n this.getChildren();\n this.linkTabs();\n this.attatchEventListeners();\n this.setInitialTab();\n this.configureTabs();\n }\n\n componentWillUpdate(): void {\n this.configureTabs();\n }\n\n disconnectedCallback(): void {\n if (this.activationType === \"manual\") {\n this.tabGroup.removeEventListener(\"keydown\", (event) =>\n this.handleKeyBoardNavManual(event)\n );\n } else {\n this.tabGroup.removeEventListener(\"keydown\", (event) =>\n this.handleKeyBoardNavAutomatic(event)\n );\n }\n }\n\n render() {\n return <slot></slot>;\n }\n}\n"]}

package/dist/collection/components/ic-tab-context/ic-tab-context.test.a11y.js CHANGED Viewed

@@ -3,11 +3,11 @@ import { axe } from "jest-axe";
 describe("ic-tab-context", () => {
   it("passes accessibility", async () => {
     const el = await fixture(`<ic-tab-context>
-    <ic-tab-list>
+    <ic-tab-group>
       <ic-tab>One</ic-tab>
       <ic-tab>Two</ic-tab>
       <ic-tab>Three</ic-tab>
-    </ic-tab-list>
+    </ic-tab-group>
     <ic-tab-panel> Tab One </ic-tab-panel>
     <ic-tab-panel> Tab Two </ic-tab-panel>
     <ic-tab-panel> Tab Three </ic-tab-panel>

package/dist/collection/components/ic-tab-context/ic-tab-context.test.a11y.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-tab-context.test.a11y.js","sourceRoot":"","sources":["../../../src/components/ic-tab-context/ic-tab-context.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;;;;;;;;oBAST,CAAC,CAAC;IAElB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACtD,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\n\ndescribe(\"ic-tab-context\", () => {\n it(\"passes accessibility\", async () => {\n const el = await fixture(`<ic-tab-context>\n <ic-tab-~~list~~>\n <ic-tab>One</ic-tab>\n <ic-tab>Two</ic-tab>\n <ic-tab>Three</ic-tab>\n </ic-tab-~~list~~>\n <ic-tab-panel> Tab One </ic-tab-panel>\n <ic-tab-panel> Tab Two </ic-tab-panel>\n <ic-tab-panel> Tab Three </ic-tab-panel>\n </ic-tab-context>`);\n\n expect(el.getAttribute(\"context-id\")).toBe(\"default\");\n expect(await axe(el)).toHaveNoViolations();\n });\n});\n"]}
1	+ {"version":3,"file":"ic-tab-context.test.a11y.js","sourceRoot":"","sources":["../../../src/components/ic-tab-context/ic-tab-context.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;;;;;;;;oBAST,CAAC,CAAC;IAElB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACtD,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\n\ndescribe(\"ic-tab-context\", () => {\n it(\"passes accessibility\", async () => {\n const el = await fixture(`<ic-tab-context>\n <ic-tab-group>\n <ic-tab>One</ic-tab>\n <ic-tab>Two</ic-tab>\n <ic-tab>Three</ic-tab>\n </ic-tab-group>\n <ic-tab-panel> Tab One </ic-tab-panel>\n <ic-tab-panel> Tab Two </ic-tab-panel>\n <ic-tab-panel> Tab Three </ic-tab-panel>\n </ic-tab-context>`);\n\n expect(el.getAttribute(\"context-id\")).toBe(\"default\");\n expect(await axe(el)).toHaveNoViolations();\n });\n});\n"]}

package/dist/collection/components/{ic-tab-list → ic-tab-group}/assets/left-arrow.svg RENAMED Viewed

File without changes

package/dist/collection/components/{ic-tab-list → ic-tab-group}/assets/right-arrow.svg RENAMED Viewed

File without changes

package/dist/collection/components/{ic-tab-list/ic-tab-list.css → ic-tab-group/ic-tab-group.css} RENAMED Viewed

@@ -43,12 +43,12 @@
   display: none;
 }
-.ic-tab-list-container {
+.ic-tab-group-container {
   display: flex;
   align-items: center;
 }
-:host(.dark.ic-tab-list-not-inline) {
+:host(.dark.ic-tab-group-not-inline) {
   --border-bottom-color: var(--ic-architectural-white);
 }