@nanoporetech-digital/components 5.10.0 → 5.11.0

package/dist/collection/components/menu/menu.js

@@ -153,7 +153,7 @@ export class Menu {
   }
   async setActiveFocusItem(item, focus = true) {
     const items = this.getItems;
-    const activeItem = !item || item.disabled ? items.find((i) => i.selected) || items[0] : item;
+    const activeItem = !item ? items.find((i) => i.selected) || items[0] : item;
     items
       .filter((i) => i.tagName.toLowerCase() === 'nano-option')
       .map((i) => i.setAttribute('tabindex', i === activeItem ? '0' : '-1'));

package/dist/collection/components/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Event,\n  EventEmitter,\n  Method,\n  h,\n  Host,\n  Element,\n  Prop,\n  Listen,\n  Build,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport { getDirectChildren } from '../../utils/dom';\nimport { getTextContent } from '../../utils/slot';\n\ntype ValidElement = HTMLNanoNavItemElement | HTMLNanoOptionElement;\ntype NNI = HTMLNanoNavItemElement;\n\n/**\n * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\n * Manages focus state / active.\n * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.\n */\n@Component({\n  tag: 'nano-menu',\n  styleUrl: 'menu.scss',\n  shadow: true,\n})\nexport class Menu {\n  private ignoreMouseEvents = false;\n  private ignoreMouseTimeout: any;\n  private menu: HTMLElement;\n  private typeToSelect = '';\n  private typeToSelectTimeout: any;\n\n  @Element() private el: HTMLNanoMenuElement;\n\n  // Public API\n\n  /** get the focus state of the menu @readonly */\n  @Prop()\n  get hasFocus() {\n    return this._hasFocus;\n  }\n  private _hasFocus = false;\n\n  /** changes the role of the underlying control - sometimes required for semantics */\n  @Prop() type: 'menu' | 'listbox' = 'menu';\n\n  /** an accessible label */\n  @Prop() label: string;\n\n  // Events\n\n  /** Emitted when the menu gains focus. */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emitted when the menu loses focus. */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Emitted when a menu item is selected. */\n  @Event() nanoSelect: EventEmitter<\n    HTMLNanoOptionElement | HTMLNanoNavItemElement\n  >;\n\n  // Public Methods\n\n  /** Sets focus on the menu. */\n  @Method()\n  async setFocus() {\n    if (this.menu?.focus) this.menu.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the menu. */\n  @Method()\n  async removeFocus() {\n    if (this.menu?.blur) this.menu.blur();\n  }\n\n  /** Sets the current active item */\n  @Method()\n  async showActiveElement() {\n    if (this.selectedItem)\n      this.selectedItem.scrollIntoView({ block: 'nearest' });\n  }\n\n  /** Removes any active item's state */\n  @Method()\n  async resetActiveItem() {\n    this.getItems\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i) => i.setAttribute('tabindex', '-1'));\n  }\n\n  // Private methods\n\n  get getItems() {\n    let items: ValidElement[];\n    const opened = this.el.querySelectorAll('nano-nav-item.secondary-open');\n    if (opened.length) {\n      const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n      items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));\n    } else {\n      items = getDirectChildren(\n        this.el,\n        'nano-nav-item, nano-option',\n        'slot'\n      ) as ValidElement[];\n    }\n    return items.filter((el) => !el.disabled && !el.hidden);\n  }\n\n  get activeItem() {\n    const activeElement = getActiveElement();\n    return this.getItems.find(\n      (i) =>\n        i.getAttribute('tabindex') === '0' ||\n        i === activeElement ||\n        i.classList.contains('has-focus')\n    );\n  }\n\n  get selectedItem() {\n    return this.getItems.find((i) => i.selected);\n  }\n\n  private async setActiveFocusItem(item?: ValidElement, focus = true) {\n    const items = this.getItems;\n    const activeItem =\n      !item || item.disabled ? items.find((i) => i.selected) || items[0] : item;\n\n    items\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i: HTMLNanoOptionElement) =>\n        i.setAttribute('tabindex', i === activeItem ? '0' : '-1')\n      );\n\n    if (!focus) return;\n\n    if (activeItem) {\n      (activeItem as NNI).setFocus\n        ? (activeItem as NNI).setFocus()\n        : activeItem.focus();\n    } else this.menu.focus();\n  }\n\n  // Event Handlers\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let found: boolean;\n\n    if (kev.key) {\n      if (kev.key !== 'Tab') return;\n      found =\n        getActiveElement() &&\n        getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;\n    } else found = !!e.composedPath().find((el) => el === this.el);\n\n    if (!found) {\n      this.resetActiveItem();\n      this._hasFocus = false;\n      this.nanoBlur.emit();\n    }\n  }\n\n  private handleFocus = () => {\n    this.setActiveFocusItem(this.selectedItem || this.getItems[0]);\n\n    this._hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !item.disabled) {\n      this.nanoSelect.emit(item);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n    // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n    // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n    clearTimeout(this.ignoreMouseTimeout);\n    this.ignoreMouseTimeout = setTimeout(\n      () => (this.ignoreMouseEvents = false),\n      500\n    );\n    this.ignoreMouseEvents = true;\n\n    // Make a selection when pressing enter\n    switch (event.key) {\n      case ' ':\n        if (this.activeItem) this.activeItem.click();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'PageDown':\n      case 'PageUp':\n      case 'Home':\n      case 'End':\n        const items = this.getItems;\n        const selectedItem = this.activeItem;\n        let index = items.indexOf(selectedItem);\n\n        if (items.length) {\n          event.preventDefault();\n\n          if (event.key === 'ArrowDown') {\n            index++;\n          } else if (event.key === 'ArrowUp') {\n            index--;\n          } else if (event.key === 'Home' || event.key === 'PageUp') {\n            index = 0;\n          } else if (event.key === 'End' || event.key === 'PageDown') {\n            index = items.length - 1;\n          }\n\n          if (index < 0) index = items.length - 1;\n          if (index > items.length - 1) index = 0;\n\n          this.setActiveFocusItem(items[index]);\n          if (items[index]) items[index].scrollIntoView({ block: 'nearest' });\n          return;\n        }\n        break;\n    }\n\n    // Handle type-to-search behavior when non-control characters are entered\n    if (event.key === ' ' || /^[a-z0-9]+$/i.test(event.key)) {\n      clearTimeout(this.typeToSelectTimeout);\n      this.typeToSelectTimeout = setTimeout(\n        () => (this.typeToSelect = ''),\n        750\n      );\n      this.typeToSelect += event.key;\n\n      const items = this.getItems;\n      for (const item of items) {\n        const slot = item.shadowRoot.querySelector(\n          'slot:not([name])'\n        ) as HTMLSlotElement;\n        const label = getTextContent(slot).toLowerCase().trim();\n        if (\n          label.substring(0, this.typeToSelect.length) === this.typeToSelect\n        ) {\n          this.setActiveFocusItem(item);\n          break;\n        }\n      }\n    }\n  };\n\n  private handleMouseOver = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item =\n      target.closest('nano-nav-item') || target.closest('nano-option');\n\n    if (item && !this.ignoreMouseEvents) {\n      this.setActiveFocusItem(item);\n    }\n  };\n\n  // Component Lifecycle\n\n  componentDidLoad() {\n    if (Build.isBrowser) {\n      getDirectChildren(\n        this.el,\n        ':not(nano-nav-item):not(nano-option):not([role])',\n        true\n      ).forEach((el) => el.setAttribute('role', 'none'));\n    }\n  }\n\n  render() {\n    return (\n      <Host role={this.type === 'menu' ? 'menu' : 'group'}>\n        <div\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseOver={this.handleMouseOver}\n          onFocus={this.handleFocus}\n          aria-label={this.label ? this.label : undefined}\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          class={{\n            menu: true,\n            ['menu--' + this.type]: true,\n            'menu--has-focus': this.hasFocus,\n          }}\n          tabIndex={-1}\n          role=\"group\"\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Event,\n  EventEmitter,\n  Method,\n  h,\n  Host,\n  Element,\n  Prop,\n  Listen,\n  Build,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport { getDirectChildren } from '../../utils/dom';\nimport { getTextContent } from '../../utils/slot';\n\ntype ValidElement = HTMLNanoNavItemElement | HTMLNanoOptionElement;\ntype NNI = HTMLNanoNavItemElement;\n\n/**\n * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\n * Manages focus state / active.\n * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.\n */\n@Component({\n  tag: 'nano-menu',\n  styleUrl: 'menu.scss',\n  shadow: true,\n})\nexport class Menu {\n  private ignoreMouseEvents = false;\n  private ignoreMouseTimeout: any;\n  private menu: HTMLElement;\n  private typeToSelect = '';\n  private typeToSelectTimeout: any;\n\n  @Element() private el: HTMLNanoMenuElement;\n\n  // Public API\n\n  /** get the focus state of the menu @readonly */\n  @Prop()\n  get hasFocus() {\n    return this._hasFocus;\n  }\n  private _hasFocus = false;\n\n  /** changes the role of the underlying control - sometimes required for semantics */\n  @Prop() type: 'menu' | 'listbox' = 'menu';\n\n  /** an accessible label */\n  @Prop() label: string;\n\n  // Events\n\n  /** Emitted when the menu gains focus. */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emitted when the menu loses focus. */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Emitted when a menu item is selected. */\n  @Event() nanoSelect: EventEmitter<\n    HTMLNanoOptionElement | HTMLNanoNavItemElement\n  >;\n\n  // Public Methods\n\n  /** Sets focus on the menu. */\n  @Method()\n  async setFocus() {\n    if (this.menu?.focus) this.menu.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the menu. */\n  @Method()\n  async removeFocus() {\n    if (this.menu?.blur) this.menu.blur();\n  }\n\n  /** Sets the current active item */\n  @Method()\n  async showActiveElement() {\n    if (this.selectedItem)\n      this.selectedItem.scrollIntoView({ block: 'nearest' });\n  }\n\n  /** Removes any active item's state */\n  @Method()\n  async resetActiveItem() {\n    this.getItems\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i) => i.setAttribute('tabindex', '-1'));\n  }\n\n  // Private methods\n\n  get getItems() {\n    let items: ValidElement[];\n    const opened = this.el.querySelectorAll('nano-nav-item.secondary-open');\n    if (opened.length) {\n      const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n      items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));\n    } else {\n      items = getDirectChildren(\n        this.el,\n        'nano-nav-item, nano-option',\n        'slot'\n      ) as ValidElement[];\n    }\n    return items.filter((el) => !el.disabled && !el.hidden);\n  }\n\n  get activeItem() {\n    const activeElement = getActiveElement();\n    return this.getItems.find(\n      (i) =>\n        i.getAttribute('tabindex') === '0' ||\n        i === activeElement ||\n        i.classList.contains('has-focus')\n    );\n  }\n\n  get selectedItem() {\n    return this.getItems.find((i) => i.selected);\n  }\n\n  private async setActiveFocusItem(item?: ValidElement, focus = true) {\n    const items = this.getItems;\n    const activeItem = !item ? items.find((i) => i.selected) || items[0] : item;\n\n    items\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i: HTMLNanoOptionElement) =>\n        i.setAttribute('tabindex', i === activeItem ? '0' : '-1')\n      );\n\n    if (!focus) return;\n\n    if (activeItem) {\n      (activeItem as NNI).setFocus\n        ? (activeItem as NNI).setFocus()\n        : activeItem.focus();\n    } else this.menu.focus();\n  }\n\n  // Event Handlers\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let found: boolean;\n\n    if (kev.key) {\n      if (kev.key !== 'Tab') return;\n      found =\n        getActiveElement() &&\n        getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;\n    } else found = !!e.composedPath().find((el) => el === this.el);\n\n    if (!found) {\n      this.resetActiveItem();\n      this._hasFocus = false;\n      this.nanoBlur.emit();\n    }\n  }\n\n  private handleFocus = () => {\n    this.setActiveFocusItem(this.selectedItem || this.getItems[0]);\n\n    this._hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !item.disabled) {\n      this.nanoSelect.emit(item);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n    // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n    // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n    clearTimeout(this.ignoreMouseTimeout);\n    this.ignoreMouseTimeout = setTimeout(\n      () => (this.ignoreMouseEvents = false),\n      500\n    );\n    this.ignoreMouseEvents = true;\n\n    // Make a selection when pressing enter\n    switch (event.key) {\n      case ' ':\n        if (this.activeItem) this.activeItem.click();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'PageDown':\n      case 'PageUp':\n      case 'Home':\n      case 'End':\n        const items = this.getItems;\n        const selectedItem = this.activeItem;\n        let index = items.indexOf(selectedItem);\n\n        if (items.length) {\n          event.preventDefault();\n\n          if (event.key === 'ArrowDown') {\n            index++;\n          } else if (event.key === 'ArrowUp') {\n            index--;\n          } else if (event.key === 'Home' || event.key === 'PageUp') {\n            index = 0;\n          } else if (event.key === 'End' || event.key === 'PageDown') {\n            index = items.length - 1;\n          }\n\n          if (index < 0) index = items.length - 1;\n          if (index > items.length - 1) index = 0;\n\n          this.setActiveFocusItem(items[index]);\n          if (items[index]) items[index].scrollIntoView({ block: 'nearest' });\n          return;\n        }\n        break;\n    }\n\n    // Handle type-to-search behavior when non-control characters are entered\n    if (event.key === ' ' || /^[a-z0-9]+$/i.test(event.key)) {\n      clearTimeout(this.typeToSelectTimeout);\n      this.typeToSelectTimeout = setTimeout(\n        () => (this.typeToSelect = ''),\n        750\n      );\n      this.typeToSelect += event.key;\n\n      const items = this.getItems;\n      for (const item of items) {\n        const slot = item.shadowRoot.querySelector(\n          'slot:not([name])'\n        ) as HTMLSlotElement;\n        const label = getTextContent(slot).toLowerCase().trim();\n        if (\n          label.substring(0, this.typeToSelect.length) === this.typeToSelect\n        ) {\n          this.setActiveFocusItem(item);\n          break;\n        }\n      }\n    }\n  };\n\n  private handleMouseOver = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item =\n      target.closest('nano-nav-item') || target.closest('nano-option');\n\n    if (item && !this.ignoreMouseEvents) {\n      this.setActiveFocusItem(item);\n    }\n  };\n\n  // Component Lifecycle\n\n  componentDidLoad() {\n    if (Build.isBrowser) {\n      getDirectChildren(\n        this.el,\n        ':not(nano-nav-item):not(nano-option):not([role])',\n        true\n      ).forEach((el) => el.setAttribute('role', 'none'));\n    }\n  }\n\n  render() {\n    return (\n      <Host role={this.type === 'menu' ? 'menu' : 'group'}>\n        <div\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseOver={this.handleMouseOver}\n          onFocus={this.handleFocus}\n          aria-label={this.label ? this.label : undefined}\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          class={{\n            menu: true,\n            ['menu--' + this.type]: true,\n            'menu--has-focus': this.hasFocus,\n          }}\n          tabIndex={-1}\n          role=\"group\"\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/menu-drawer/menu-drawer.css

@@ -60,10 +60,8 @@
 }
 
 :host(.has-global-nav) .content-wrap {
-  -webkit-padding-before: var(--global-nav-height);
-          padding-block-start: var(--global-nav-height);
-  -webkit-margin-before: calc(var(--global-nav-height) * -1);
-          margin-block-start: calc(var(--global-nav-height) * -1);
+  padding-block-start: var(--global-nav-height);
+  margin-block-start: calc(var(--global-nav-height) * -1);
 }
 
 .container {
@@ -123,14 +121,8 @@
   border: none;
   color: inherit;
   font-size: var(--icon-size);
-  -webkit-margin-before: var(--padding-top);
-          margin-block-start: var(--padding-top);
-  -webkit-margin-end: 0;
-          margin-inline-end: 0;
-  -webkit-margin-after: var(--padding-bottom);
-          margin-block-end: var(--padding-bottom);
-  -webkit-margin-start: calc(var(--padding-start) / 2);
-          margin-inline-start: calc(var(--padding-start) / 2);
+  margin-block: var(--padding-top) var(--padding-bottom);
+  margin-inline: calc(var(--padding-start) / 2) 0;
   border-radius: 4px;
   padding-block: 6px;
   padding-inline: 5px;
@@ -149,8 +141,7 @@
 }
 
 .foot {
-  -webkit-margin-before: auto;
-          margin-block-start: auto;
+  margin-block-start: auto;
 }
 
 .measure-ele {

package/dist/collection/components/nav-item/nav-item.css

@@ -60,30 +60,21 @@
   outline: none !important;
 }
 :host ::slotted(nano-icon[slot=icon-start]) {
-  -webkit-padding-end: var(--padding-end);
-          padding-inline-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
 }
 :host ::slotted(nano-icon[slot=icon-end]) {
-  -webkit-padding-start: var(--padding-start);
-          padding-inline-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
 }
 :host .link ::slotted(nano-icon[slot=icon-start]) {
-  -webkit-padding-start: var(--padding-start);
-          padding-inline-start: var(--padding-start);
-  -webkit-padding-end: 0;
-          padding-inline-end: 0;
+  padding-inline: var(--padding-start) 0;
 }
 :host .link ::slotted(nano-icon[slot=icon-end]) {
-  -webkit-padding-end: var(--padding-end);
-          padding-inline-end: var(--padding-end);
-  -webkit-padding-start: 0;
-          padding-inline-start: 0;
+  padding-inline: 0 var(--padding-end);
 }
 :host .link,
 :host button,
 :host a {
-  -webkit-border-after: var(--border-bottom);
-          border-block-end: var(--border-bottom);
+  border-block-end: var(--border-bottom);
   display: flex;
   align-items: center;
   border-radius: inherit;
@@ -161,14 +152,11 @@
   white-space: normal;
   cursor: pointer;
   line-height: 1.2;
-  width: 100%;
+  inline-size: 100%;
 }
 :host(.nano-global-nav-menu) .text,
 :host(.nano-menu) .text {
-  -webkit-padding-start: 0;
-          padding-inline-start: 0;
-  -webkit-padding-end: var(--padding-end);
-          padding-inline-end: var(--padding-end);
+  padding-inline: 0 var(--padding-end);
   flex: 1;
 }
 :host(.nano-global-nav-menu) ::slotted(a),
@@ -182,10 +170,10 @@
   display: none;
   position: absolute;
   color: var(--secondary-color, currentcolor);
-  min-height: 100%;
+  min-block-size: 100%;
   inset-block-start: 0;
   inset-inline-start: 0;
-  width: 100%;
+  inline-size: 100%;
   z-index: 1;
   opacity: 0;
   transition: opacity 0.3s ease, transform 0.3s ease;
@@ -263,7 +251,7 @@
 :host(.nano-global-nav-bar) button::before {
   content: "";
   background-color: #0c5a71;
-  height: 9px;
+  block-size: 9px;
   inset-inline: 0 5px;
   inset-block-end: -22px;
   position: absolute;
@@ -302,14 +290,8 @@
 :host(.nano-menu-drawer) .link,
 :host(.nano-menu-drawer) a,
 :host(.nano-menu-drawer) button {
-  -webkit-padding-before: calc(var(--padding-top) / 2);
-          padding-block-start: calc(var(--padding-top) / 2);
-  -webkit-padding-end: 0;
-          padding-inline-end: 0;
-  -webkit-padding-after: calc(var(--padding-bottom) / 2);
-          padding-block-end: calc(var(--padding-bottom) / 2);
-  -webkit-padding-start: var(--padding-start);
-          padding-inline-start: var(--padding-start);
+  padding-block: calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);
+  padding-inline: var(--padding-start) 0;
   display: flex;
   justify-content: flex-start;
   flex-direction: row;
@@ -320,45 +302,42 @@
   border: none;
   cursor: pointer;
   line-height: 1.2;
-  width: 100%;
+  inline-size: 100%;
 }
 :host(.nano-menu-drawer) .text {
-  -webkit-padding-end: var(--padding-end);
-          padding-inline-end: var(--padding-end);
-  -webkit-padding-start: 0;
-          padding-inline-start: 0;
+  padding-inline: 0 var(--padding-end);
   text-align: start;
   flex: 0 1 auto;
-  min-width: 130px;
-  width: 130px;
+  min-inline-size: 130px;
+  inline-size: 130px;
 }
 :host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]) {
   padding-inline: 0 var(--padding-end);
   padding-block: 0;
   font-size: var(--icon-size);
-  width: var(--icon-size);
+  inline-size: var(--icon-size);
   flex: 0 0 var(--icon-size);
 }
 :host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]) {
   padding: 0 var(--padding-end) 0 0;
   font-size: 10px;
   flex: 0 0 20px;
-  min-width: 20px;
+  min-inline-size: 20px;
 }
 :host(.nano-menu-drawer) .secondary-menu {
   display: none;
   position: absolute;
   background-color: var(--secondary-bg-color);
   color: var(--secondary-color);
-  height: 100vh;
+  block-size: 100vh;
   inset-inline: auto 0;
   inset-block: 0;
   transform: translateX(0);
   z-index: -1;
   transition: transform 0.3s ease, opacity 0.2s ease;
   overflow-y: auto;
-  width: var(--secondary-width, 400px);
-  max-width: 62vw;
+  inline-size: var(--secondary-width, 400px);
+  max-inline-size: 62vw;
   opacity: 1;
   padding-inline: var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));
   padding-block: var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom));
@@ -376,8 +355,8 @@
   content: "";
   display: block;
   position: absolute;
-  width: 6px;
-  height: 6px;
+  inline-size: 6px;
+  block-size: 6px;
   background-color: #ef4135;
   inset-inline-start: 10px;
   inset-block-start: 7px;
@@ -385,8 +364,8 @@
 }
 @media (min-width: 52em) {
   :host(.nano-menu-drawer) .notification::after {
-    width: 7px;
-    height: 7px;
+    inline-size: 7px;
+    block-size: 7px;
     inset-inline-start: 8px;
     inset-block-start: 5px;
   }

package/dist/collection/components/option/option.css

@@ -56,7 +56,7 @@
   cursor: pointer;
   display: flex;
   align-items: stretch;
-  width: 100%;
+  inline-size: 100%;
   background: var(--bg);
   padding-inline: var(--padding-start) var(--padding-end);
   padding-block: var(--padding-top) var(--padding-bottom);
@@ -94,8 +94,7 @@
   font-size: var(--opt-icon-size);
 }
 .option__start ::slotted(:last-child) {
-  -webkit-margin-end: 0.5em;
-          margin-inline-end: 0.5em;
+  margin-inline-end: 0.5em;
 }
 .option__end {
   flex: 0 0 auto;
@@ -106,8 +105,7 @@
   font-size: var(--opt-icon-size);
 }
 .option__end ::slotted(:first-child) {
-  -webkit-margin-start: 0.5em;
-          margin-inline-start: 0.5em;
+  margin-inline-start: 0.5em;
 }
 .option__check {
   visibility: hidden;

package/dist/collection/components/overflow-nav/overflow-nav.css

@@ -90,7 +90,7 @@
 .onav__items {
   flex: 1 1 auto;
   position: relative;
-  width: auto;
+  inline-size: auto;
   flex-wrap: nowrap;
   display: flex;
 }
@@ -130,8 +130,7 @@
   box-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset;
 }
 .onav--horizontal .onav__scroller {
-  overflow-x: auto;
-  overflow-y: hidden;
+  overflow: auto hidden;
   -webkit-mask-repeat: no-repeat;
           mask-repeat: no-repeat;
   padding-inline: var(--padding);
@@ -144,24 +143,20 @@
 }
 .onav--horizontal.onav--has-scroll-controls .onav__scroller {
   padding-inline: var(--fade-size) 0;
-  -webkit-padding-before: 0;
-          padding-block-start: 0;
-  -webkit-padding-after: 0;
-          padding-block-end: 0;
+  padding-block: 0 0;
 }
 .onav--horizontal .onav__items {
   flex-direction: row;
 }
 .onav--horizontal .onav__items::before {
   content: "";
-  width: 100%;
-  height: var(--indicator-track-size);
+  inline-size: 100%;
+  block-size: var(--indicator-track-size);
   inset-block-end: 0;
 }
 .onav--horizontal .onav__active-indicator {
   inset-block-end: 0;
-  -webkit-border-after: solid var(--indicator-size) var(--indicator-color);
-          border-block-end: solid var(--indicator-size) var(--indicator-color);
+  border-block-end: solid var(--indicator-size) var(--indicator-color);
 }
 .onav--horizontal .onav__scroll-button {
   inset-block: 0;
@@ -173,27 +168,22 @@
   inset-inline-end: 0;
 }
 .onav--vertical {
-  width: 100%;
+  inline-size: 100%;
 }
 .onav--vertical .onav__nav {
-  max-height: 100%;
+  max-block-size: 100%;
   display: flex;
 }
 .onav--vertical .onav__scroller {
-  width: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
+  inline-size: 100%;
+  overflow: hidden auto;
   flex-direction: column;
   -webkit-mask-repeat: no-repeat;
           mask-repeat: no-repeat;
-  padding-block: var(--padding);
   -webkit-mask-image: linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));
           mask-image: linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));
   padding-inline: 0 0;
-  -webkit-padding-before: calc(var(--fade-size) + 12px);
-          padding-block-start: calc(var(--fade-size) + 12px);
-  -webkit-padding-after: var(--fade-size);
-          padding-block-end: var(--fade-size);
+  padding-block: calc(var(--fade-size) + 12px) var(--fade-size);
 }
 .onav--vertical .onav__scroller::after {
   padding-inline: 0 0;
@@ -201,19 +191,18 @@
 }
 .onav--vertical .onav__items {
   flex-direction: column;
-  width: -moz-fit-content;
-  width: fit-content;
+  inline-size: -moz-fit-content;
+  inline-size: fit-content;
 }
 .onav--vertical .onav__items::before {
   content: "";
-  height: 100%;
-  width: var(--indicator-track-size);
+  block-size: 100%;
+  inline-size: var(--indicator-track-size);
   inset-inline-start: 0;
 }
 .onav--vertical .onav__active-indicator {
   inset-inline-start: 0;
-  -webkit-border-start: solid var(--indicator-size) var(--indicator-color);
-          border-inline-start: solid var(--indicator-size) var(--indicator-color);
+  border-inline-start: solid var(--indicator-size) var(--indicator-color);
 }
 .onav--vertical .onav__scroll-button {
   inset-inline: 0;

package/dist/collection/components/progress-bar/progress-bar.css

@@ -27,13 +27,13 @@
 .progress-bar {
   position: relative;
   background-color: var(--track-color);
-  height: var(--height);
+  block-size: var(--height);
   border-radius: var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));
   overflow: hidden;
 }
 
 .progress-bar__indicator {
-  height: 100%;
+  block-size: 100%;
   font-size: 0.75em;
   background-color: var(--indicator-color);
   color: var(--label-color);

package/dist/collection/components/range/range.css

@@ -68,8 +68,8 @@
 .range-slider {
   position: relative;
   flex: 1;
-  width: 100%;
-  height: var(--height);
+  inline-size: 100%;
+  block-size: var(--height);
   contain: size layout style;
   cursor: grab;
   touch-action: pan-y;
@@ -84,8 +84,8 @@
   inset-block-start: calc((var(--height) - var(--bar-height)) / 2);
   inset-inline-start: 0;
   position: absolute;
-  width: 100%;
-  height: var(--bar-height);
+  inline-size: 100%;
+  block-size: var(--bar-height);
   background: var(--bar-background);
   pointer-events: none;
 }
@@ -95,7 +95,7 @@
 
 .range-bar-active {
   inset-block-end: 0;
-  width: auto;
+  inline-size: auto;
   background: var(--bar-background-active);
 }
 
@@ -104,8 +104,8 @@
   inset-block-start: calc(50% - var(--knob-size) / 2);
   inset-inline-start: calc(50% - var(--knob-size) / 2);
   position: absolute;
-  width: var(--knob-size);
-  height: var(--knob-size);
+  inline-size: var(--knob-size);
+  block-size: var(--knob-size);
   background: var(--knob-background);
   box-shadow: var(--knob-box-shadow);
   z-index: 2;
@@ -122,11 +122,10 @@
 .range-knob-handle {
   inset-block-start: calc((var(--height) - var(--knob-handle-size)) / 2);
   inset-inline-start: 0;
-  -webkit-margin-start: calc(0px - var(--knob-handle-size) / 2);
-          margin-inline-start: calc(0px - var(--knob-handle-size) / 2);
+  margin-inline-start: calc(0px - var(--knob-handle-size) / 2);
   position: absolute;
-  width: calc(var(--knob-handle-size));
-  height: calc(var(--knob-handle-size));
+  inline-size: calc(var(--knob-handle-size));
+  block-size: calc(var(--knob-handle-size));
   text-align: center;
 }
 .range-knob-handle:active, .range-knob-handle:focus {
@@ -139,8 +138,8 @@
 .range-tick {
   position: absolute;
   inset-block-start: calc((var(--height) - var(--bar-height)) / 2);
-  width: var(--bar-height);
-  height: var(--bar-height);
+  inline-size: var(--bar-height);
+  block-size: var(--bar-height);
   background: var(--bar-background-active);
   z-index: 1;
   pointer-events: none;
@@ -164,8 +163,8 @@
   box-sizing: border-box;
   display: inline-block;
   position: relative;
-  min-width: 2.33em;
-  height: 2.33em;
+  min-inline-size: 2.33em;
+  block-size: 2.33em;
   transition: transform 120ms ease, background 120ms ease;
   background: var(--pin-background);
   color: var(--pin-color);
@@ -174,12 +173,11 @@
 .range-pin::before {
   inset-block-start: 0.25em;
   inset-inline-start: 50%;
-  -webkit-margin-start: -1.08em;
-          margin-inline-start: -1.08em;
+  margin-inline-start: -1.08em;
   border-radius: 50% 50% 50% 0;
   position: absolute;
-  width: 2.16em;
-  height: 2.16em;
+  inline-size: 2.16em;
+  block-size: 2.16em;
   transform: rotate(-45deg);
   transition: background 120ms ease;
   background: var(--pin-background);

package/dist/collection/components/rating/rating.css

@@ -27,14 +27,8 @@
 
 .rating-wrap {
   position: relative;
-  -webkit-margin-before: 0;
-          margin-block-start: 0;
-  -webkit-margin-after: 0;
-          margin-block-end: 0;
-  -webkit-margin-start: calc(var(--symbol-spacing) * -1);
-          margin-inline-start: calc(var(--symbol-spacing) * -1);
-  -webkit-margin-end: calc(var(--symbol-spacing) * -1);
-          margin-inline-end: calc(var(--symbol-spacing) * -1);
+  margin-block: 0 0;
+  margin-inline: calc(var(--symbol-spacing) * -1) calc(var(--symbol-spacing) * -1);
 }
 
 .rating {