@ukic/web-components 2.35.0 → 2.35.2

package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.stories.js

@@ -0,0 +1,416 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  appearance: "dark",
+  description: "Loading",
+  fullWidth: false,
+  labelDuration: 8000,
+  size: "default",
+  type: "circular",
+  label: null,
+};
+
+const defaultArgTypes = {
+  appearance: {
+    options: ["dark", "light"],
+    control: { type: "radio" },
+  },
+  label: {
+    control: { type: "text" },
+  },
+  size: {
+    options: ["small", "default", "large", "icon"],
+    control: { type: "radio" },
+  },
+  type: {
+    options: ["circular", "linear"],
+    control: { type: "radio" },
+  },
+};
+
+export default {
+  title: "Web Components/Loading",
+  component: "ic-loading-indicator",
+};
+
+export const CircularIndeterminate = {
+  render: (args) =>
+    html`<ic-loading-indicator label="Loading..."></ic-loading-indicator>`,
+  name: "Circular (indeterminate)",
+};
+
+export const CircularDeterminate = {
+  render: (args) =>
+    html`<ic-loading-indicator
+      progress="30"
+      min="0"
+      max="100"
+      label="Loading..."
+    ></ic-loading-indicator>`,
+
+  name: "Circular (determinate)",
+};
+
+export const CircularLongLabel = {
+  render: (args) =>
+    html`<ic-loading-indicator
+      label="This is a label for a loading indicator that is indeterminate and should wrap onto more than one line when it gets too long"
+    ></ic-loading-indicator>`,
+
+  name: "Circular long label",
+};
+
+export const CircularVariantsIndeterminate = {
+  render: (args) =>
+    html`<div style="display: grid; gap: 50px;">
+      <ic-loading-indicator label="Small" size="small"></ic-loading-indicator>
+      <ic-loading-indicator label="Default"></ic-loading-indicator>
+      <ic-loading-indicator label="Large" size="large"></ic-loading-indicator>
+    </div>`,
+
+  name: "Circular variants (indeterminate)",
+};
+
+export const CircularVariantsDeterminate = {
+  render: (args) =>
+    html`<div style="display: grid; gap: 50px;">
+      <ic-loading-indicator
+        progress="30"
+        min="0"
+        max="100"
+        label="Small"
+        size="small"
+      ></ic-loading-indicator>
+      <ic-loading-indicator
+        progress="30"
+        min="0"
+        max="100"
+        label="Default"
+      ></ic-loading-indicator>
+      <ic-loading-indicator
+        progress="30"
+        min="0"
+        max="100"
+        label="Large"
+        size="large"
+      ></ic-loading-indicator>
+    </div>`,
+
+  name: "Circular variants (determinate)",
+};
+
+export const Icon = {
+  render: (args) =>
+    html`<ic-loading-indicator size="icon"></ic-loading-indicator>`,
+  name: "Icon",
+};
+
+export const LinearIndeterminate = {
+  render: (args) =>
+    html`<ic-loading-indicator
+      label="Loading..."
+      type="linear"
+    ></ic-loading-indicator>`,
+
+  name: "Linear (indeterminate)",
+};
+
+export const LinearDeterminate = {
+  render: (args) =>
+    html`<ic-loading-indicator
+      progress="30"
+      min="0"
+      max="100"
+      label="Progress"
+      type="linear"
+    ></ic-loading-indicator>`,
+
+  name: "Linear (determinate)",
+};
+
+export const LinearLongLabel = {
+  render: (args) =>
+    html`<ic-loading-indicator
+      type="linear"
+      label="This is a label for a loading indicator that is indeterminate and should wrap onto more than one line when it gets too long"
+    ></ic-loading-indicator>`,
+
+  name: "Linear long label",
+};
+
+export const LinearVariantsIndeterminate = {
+  render: (args) =>
+    html`<div style="display: grid; gap: 50px;">
+      <ic-loading-indicator
+        label="Small"
+        size="small"
+        type="linear"
+      ></ic-loading-indicator>
+      <ic-loading-indicator
+        label="Default"
+        type="linear"
+      ></ic-loading-indicator>
+      <ic-loading-indicator
+        label="Large"
+        size="large"
+        type="linear"
+      ></ic-loading-indicator>
+      <ic-loading-indicator
+        label="Full-width"
+        size="default"
+        type="linear"
+        full-width="true"
+      ></ic-loading-indicator>
+    </div>`,
+
+  name: "Linear variants (indeterminate)",
+};
+
+export const LinearVariantsDeterminate = {
+  render: (args) =>
+    html`<div style="display: grid; gap: 50px;">
+      <ic-loading-indicator
+        progress="30"
+        min="0"
+        max="100"
+        label="Small"
+        size="small"
+        type="linear"
+      ></ic-loading-indicator>
+      <ic-loading-indicator
+        progress="30"
+        min="0"
+        max="100"
+        label="Default"
+        type="linear"
+      ></ic-loading-indicator>
+      <ic-loading-indicator
+        progress="30"
+        min="0"
+        max="100"
+        label="Large"
+        size="large"
+        type="linear"
+      ></ic-loading-indicator>
+      <ic-loading-indicator
+        progress="30"
+        min="0"
+        max="100"
+        label="Full-width"
+        size="default"
+        type="linear"
+        full-width="true"
+      ></ic-loading-indicator>
+    </div>`,
+
+  name: "Linear variants (determinate)",
+};
+
+export const CircularLight = {
+  render: (args) =>
+    html`<div style="display: grid; gap: 50px;">
+      <ic-loading-indicator
+        label="Small"
+        size="small"
+        appearance="light"
+      ></ic-loading-indicator>
+      <ic-loading-indicator
+        label="Default"
+        appearance="light"
+      ></ic-loading-indicator>
+      <ic-loading-indicator
+        label="Large"
+        size="large"
+        appearance="light"
+      ></ic-loading-indicator>
+    </div>`,
+
+  name: "Circular light",
+
+  parameters: {
+    backgrounds: {
+      default: "dark",
+    },
+  },
+};
+
+export const IconLight = {
+  render: (args) =>
+    html`<ic-loading-indicator
+      size="icon"
+      appearance="light"
+    ></ic-loading-indicator>`,
+
+  name: "Icon light",
+
+  parameters: {
+    backgrounds: {
+      default: "dark",
+    },
+  },
+};
+
+export const LinearLight = {
+  render: (args) =>
+    html`<div style="display: grid; gap: 50px;">
+      <ic-loading-indicator
+        label="Default"
+        type="linear"
+        appearance="light"
+      ></ic-loading-indicator>
+      <ic-loading-indicator
+        label="Large"
+        size="large"
+        type="linear"
+        appearance="light"
+      ></ic-loading-indicator>
+      <ic-loading-indicator
+        label="Full-width"
+        type="linear"
+        full-width="true"
+        appearance="light"
+      ></ic-loading-indicator>
+      <ic-loading-indicator
+        progress="30"
+        min="0"
+        max="100"
+        label="Default"
+        type="linear"
+        appearance="light"
+      ></ic-loading-indicator>
+      <ic-loading-indicator
+        progress="30"
+        min="0"
+        max="100"
+        label="Large"
+        size="large"
+        type="linear"
+        appearance="light"
+      ></ic-loading-indicator>
+      <ic-loading-indicator
+        progress="30"
+        min="0"
+        max="100"
+        label="Full-width"
+        type="linear"
+        full-width="true"
+        appearance="light"
+      ></ic-loading-indicator>
+    </div>`,
+
+  name: "Linear light",
+
+  parameters: {
+    backgrounds: {
+      default: "dark",
+    },
+  },
+};
+
+export const NoLabel = {
+  render: (args) =>
+    html`<div style="display: grid; gap: 50px;">
+      <ic-loading-indicator description="Loading"></ic-loading-indicator
+      ><ic-loading-indicator
+        progress="30"
+        min="0"
+        max="100"
+        description="Loading"
+      ></ic-loading-indicator
+      ><ic-loading-indicator
+        description="Loading"
+        type="linear"
+      ></ic-loading-indicator
+      ><ic-loading-indicator
+        progress="30"
+        min="0"
+        max="100"
+        description="Loading"
+        type="linear"
+      ></ic-loading-indicator>
+    </div>`,
+
+  name: "No label",
+};
+
+export const ChangingLabel = {
+  render: (args) =>
+    html`<ic-loading-indicator
+      label="Loading.../Still loading..."
+      label-duration="4000"
+    ></ic-loading-indicator>`,
+
+  name: "Changing label",
+};
+
+export const ProgressIndicatorForCompactStep = {
+  render: (args) =>
+    html`<ic-loading-indicator
+      size="small"
+      inner-label="3"
+      progress="30"
+      min="0"
+      max="100"
+    ></ic-loading-indicator>`,
+
+  name: "Progress indicator for compact step",
+  args: defaultArgs,
+  argTypes: defaultArgTypes,
+};
+
+export const PlaygroundIndeterminate = {
+  render: (args) =>
+    html`<div
+      style="background-color: ${args.appearance === "light"
+        ? "#393939"
+        : "#FFFFFF"}; padding: 16px;"
+    >
+      <ic-loading-indicator
+        appearance=${args.appearance}
+        description=${args.description}
+        full-width=${args.fullWidth}
+        label-duration=${args.labelDuration}
+        size=${args.size}
+        type=${args.type}
+        label=${args.label}
+      >
+      </ic-loading-indicator>
+    </div>`,
+
+  args: defaultArgs,
+  argTypes: defaultArgTypes,
+  name: "Playground - indeterminate",
+};
+
+export const PlaygroundDeterminate = {
+  render: (args) =>
+    html`<div
+      style="background-color: ${args.appearance === "light"
+        ? "#393939"
+        : "#FFFFFF"}; padding: 16px;"
+    >
+      <ic-loading-indicator
+        appearance=${args.appearance}
+        description=${args.description}
+        full-width=${args.fullWidth}
+        label-duration=${args.labelDuration}
+        size=${args.size}
+        type=${args.type}
+        label=${args.label}
+        progress=${args.progress}
+        min=${args.min}
+        max=${args.max}
+      >
+      </ic-loading-indicator>
+    </div>`,
+
+  args: {
+    ...defaultArgs,
+    max: 100,
+    min: 0,
+    progress: 30,
+  },
+
+  argTypes: defaultArgTypes,
+  name: "Playground - determinate",
+};

package/dist/collection/components/ic-navigation-button/ic-navigation-button.css

@@ -455,3 +455,7 @@ video {
   height: 100%;
   min-height: 2.5rem;
 }
+
+:host(.in-side-menu) ::slotted(ic-badge) {
+  margin-left: var(--ic-space-xs);
+}

package/dist/collection/components/ic-navigation-button/ic-navigation-button.js

@@ -101,7 +101,7 @@ export class NavigationButton {
             fullWidth,
             disableTooltip,
         };
-        return (h(Host, { class: { ["in-side-menu"]: this.mode === "menu" } }, h("ic-button", Object.assign({ class: className, "aria-label": variant == "icon" ? this.label : null, ref: (el) => (this.buttonEl = el) }, buttonProps, this.inheritedAttributes), label, h("slot", { slot: "left-icon", name: "icon" }), isSlotUsed(this.el, "badge") && variant === "icon" && (h("slot", { name: "badge" })))));
+        return (h(Host, { class: { ["in-side-menu"]: this.mode === "menu" } }, h("ic-button", Object.assign({ class: className, "aria-label": variant == "icon" ? this.label : null, ref: (el) => (this.buttonEl = el) }, buttonProps, this.inheritedAttributes), label, h("slot", { slot: "left-icon", name: "icon" }), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" }))));
     }
     static get is() { return "ic-navigation-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-navigation-button/ic-navigation-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-navigation-button.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-button/ic-navigation-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  h,\n  Listen,\n  Method,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport {\n  getThemeForegroundColor,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n */\n\n@Component({\n  tag: \"ic-navigation-button\",\n  styleUrl: \"ic-navigation-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationButton {\n  private buttonEl: HTMLIcButtonElement;\n  private inheritedAttributes: { [k: string]: string } = {};\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcNavigationButtonElement;\n\n  @State() initialAppearance = getThemeForegroundColor();\n  /**\n   * The display mode.\n   */\n  @State() mode: IcNavButtonModes = \"navbar\";\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label info to display.\n   */\n  @Prop() label!: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Navigation Button\"\n    );\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  componentWillRender(): void {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    iconEl !== null && iconEl.setAttribute(\"viewBox\", \"0 0 24 24\");\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.mode = \"menu\";\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.mode = \"navbar\";\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.initialAppearance = theme.mode;\n  }\n\n  /**\n   * Sets focus on the native `button`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (MUTABLE_ATTRIBUTES.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] =\n          this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const { href, target, rel, download, referrerpolicy } = this;\n\n    let label = \"\";\n    let className = \"\";\n    let variant: \"icon\" | \"tertiary\" = \"icon\";\n    let appearance: IcThemeForeground | IcThemeForegroundEnum.Default =\n      this.initialAppearance;\n    let size: \"default\" | \"large\" = \"large\";\n    let fullWidth = false;\n    let disableTooltip = false;\n\n    if (this.mode === \"menu\") {\n      label = this.label;\n      variant = \"tertiary\";\n      appearance = IcThemeForegroundEnum.Default;\n      size = \"default\";\n      fullWidth = true;\n      className = \"popout-menu-button\";\n      disableTooltip = true;\n    }\n\n    const buttonProps = {\n      variant,\n      appearance,\n      size,\n      href,\n      target,\n      rel,\n      download,\n      referrerpolicy,\n      fullWidth,\n      disableTooltip,\n    };\n\n    return (\n      <Host class={{ [\"in-side-menu\"]: this.mode === \"menu\" }}>\n        <ic-button\n          class={className}\n          aria-label={variant == \"icon\" ? this.label : null}\n          ref={(el) => (this.buttonEl = el)}\n          {...buttonProps}\n          {...this.inheritedAttributes}\n        >\n          {label}\n          <slot slot=\"left-icon\" name=\"icon\"></slot>\n          {isSlotUsed(this.el, \"badge\") && variant === \"icon\" && (\n            <slot name=\"badge\"></slot>\n          )}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-navigation-button.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-button/ic-navigation-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  h,\n  Listen,\n  Method,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport {\n  getThemeForegroundColor,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n */\n\n@Component({\n  tag: \"ic-navigation-button\",\n  styleUrl: \"ic-navigation-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationButton {\n  private buttonEl: HTMLIcButtonElement;\n  private inheritedAttributes: { [k: string]: string } = {};\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcNavigationButtonElement;\n\n  @State() initialAppearance = getThemeForegroundColor();\n  /**\n   * The display mode.\n   */\n  @State() mode: IcNavButtonModes = \"navbar\";\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label info to display.\n   */\n  @Prop() label!: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Navigation Button\"\n    );\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  componentWillRender(): void {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    iconEl !== null && iconEl.setAttribute(\"viewBox\", \"0 0 24 24\");\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.mode = \"menu\";\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.mode = \"navbar\";\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.initialAppearance = theme.mode;\n  }\n\n  /**\n   * Sets focus on the native `button`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (MUTABLE_ATTRIBUTES.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] =\n          this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const { href, target, rel, download, referrerpolicy } = this;\n\n    let label = \"\";\n    let className = \"\";\n    let variant: \"icon\" | \"tertiary\" = \"icon\";\n    let appearance: IcThemeForeground | IcThemeForegroundEnum.Default =\n      this.initialAppearance;\n    let size: \"default\" | \"large\" = \"large\";\n    let fullWidth = false;\n    let disableTooltip = false;\n\n    if (this.mode === \"menu\") {\n      label = this.label;\n      variant = \"tertiary\";\n      appearance = IcThemeForegroundEnum.Default;\n      size = \"default\";\n      fullWidth = true;\n      className = \"popout-menu-button\";\n      disableTooltip = true;\n    }\n\n    const buttonProps = {\n      variant,\n      appearance,\n      size,\n      href,\n      target,\n      rel,\n      download,\n      referrerpolicy,\n      fullWidth,\n      disableTooltip,\n    };\n\n    return (\n      <Host class={{ [\"in-side-menu\"]: this.mode === \"menu\" }}>\n        <ic-button\n          class={className}\n          aria-label={variant == \"icon\" ? this.label : null}\n          ref={(el) => (this.buttonEl = el)}\n          {...buttonProps}\n          {...this.inheritedAttributes}\n        >\n          {label}\n          <slot slot=\"left-icon\" name=\"icon\"></slot>\n          {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-navigation-item/ic-navigation-item.css

@@ -531,24 +531,13 @@ svg {
   cursor: pointer;
 }
 
-:host(
-    .navigation-item:not(
-        .navigation-item-page-header,
-        .navigation-item-side-menu
-      )
-  )
+:host(.navigation-item:not(.navigation-item-page-header, .navigation-item-side-menu))
   ::slotted(a:hover:not(:focus)) {
   background-color: var(--ic-theme-hover) !important;
 }
 
-:host(
-    .navigation-item:not(
-        .navigation-item-top-nav-child,
-        .navigation-item-side-menu,
-        .navigation-item-top-nav-child-selected
-          .navigation-item-side-menu-selected
-      )
-  )
+:host(.navigation-item:not(.navigation-item-top-nav-child, .navigation-item-side-menu, .navigation-item-top-nav-child-selected
+      .navigation-item-side-menu-selected))
   .focus-indicator:focus-within {
   box-shadow: var(--ic-border-focus);
   border-radius: var(--ic-border-radius);
@@ -568,13 +557,6 @@ svg {
   outline: var(--ic-hc-focus-outline);
 }
 
-:host(.navigation-item-selected.dark) .link:focus,
-:host(.navigation-item.dark) ::slotted(a.active:focus) {
-  box-shadow: var(--ic-border-focus);
-  border-radius: var(--ic-border-radius);
-  outline: var(--ic-hc-focus-outline);
-}
-
 :host(.navigation-item) .link:active:not(:focus),
 :host(.navigation-item) ::slotted(a:active:not(:focus)) {
   background-color: var(--ic-theme-active);
@@ -925,23 +907,15 @@ svg {
   box-shadow: var(--ic-border-focus-inset);
 }
 
-:host(
-    :not(
-        .navigation-item-side-nav-collapsed
-      ).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label
-  )
+:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)
   .link {
   opacity: var(--navigation-item-label-opacity);
   height: auto;
 }
 
-:host(
-    .navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label
-  )
+:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)
   .link,
-:host(
-    .navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label
-  )
+:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)
   ::slotted(a) {
   min-width: var(--navigation-group-item-min-width);
   padding: var(--ic-space-xs) !important;
@@ -949,9 +923,7 @@ svg {
   gap: 0;
 }
 
-:host(
-    .navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label
-  )
+:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)
   ::slotted(a) {
   display: block;
 }