@nanoporetech-digital/components 4.10.0 → 5.1.0

package/dist/nano-components/p-ebb98a9e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["iconButtonCss","IconButton","this","handleClick","ev","type","formEl","findForm","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","async","button","focus","form","host","closest","HTMLFormElement","el","getElementById","componentDidLoad","focusVisible","observe","connectedCallback","disconnectedCallback","unobserve","content","TagType","href","undefined","h","Host","disabled","onClick","part","ref","class","name","value","target","rel","label","iconName","src","iconSrc","lazy","render","showTooltip","tooltipCss","Tooltip","isVisible","handleBlur","hasTrigger","hide","open","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","getTarget","_target","newTarget","removeAttribute","setAttribute","setLabel","contentSlotNodes","Array","from","querySelectorAll","textContent","map","node","join","trim","handleOpenChange","slShow","nanoShow","emit","defaultPrevented","popover","slHide","nanoHide","children","find","tagName","toLowerCase","getAttribute","Error","triggerType","triggers","trigger","split","includes","syncOptions","setOptions","strategy","hoist","placement","distance","skidding","transitionElement","tooltip","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","Popover","tooltipPositioner","hidden","componentDidUpdate","destroy","onKeyDown","onMouseOver","onMouseOut","onBlur","onFocus","onSlotchange","role"],"sources":["./src/components/icon-button/icon-button.scss?tag=nano-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx","./src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n    * @prop --color: defaults to #{map.get($colors, palegrey)};\n    * @prop --active-color: defaults to #{map.get($colors, darkblue--faded)};\n    * @prop --hover-color: defaults to #{map.get($colors, blue)};\n    * @prop --background: defaults to transparent;\n    * @prop --padding: defaults to #{$spacing-small};\n    * @prop --box-shadow: defaults to none;\n    */\n\n  --border-radius: #{$border-radius-medium};\n  --active-color: #{map.get($colors, darkblue--faded)};\n  --hover-color: #{map.get($colors, blue)};\n  --nano-color-base: var(--color, #{map.get($colors, mediumgrey)});\n  --background: transparent;\n  --padding: #{$spacing-small};\n  --box-shadow: none;\n\n  border-radius: var(--border-radius);\n  display: inline-block;\n}\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  border: none;\n  border-radius: inherit;\n  background: var(--background);\n  font-size: inherit;\n  color: var(--color);\n  padding: var(--padding);\n  cursor: pointer;\n  appearance: none;\n  transition: box-shadow #{$transition-xfast} ease-in-out;\n  box-shadow: var(--box-shadow);\n\n  &:hover:not(.icon-button--disabled),\n  &:focus:not(.icon-button--disabled) {\n    color: var(--hover-color);\n\n    --nano-color-base: var(--hover-color);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--active-color);\n\n    --nano-color-base: var(--active-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.icon-button__label {\n  @include visually-hide();\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.focus-visible.icon-button:focus {\n  box-shadow: #{$control-focus-style};\n}\n","import {\n  Component,\n  Prop,\n  h,\n  ComponentInterface,\n  Method,\n  Element,\n  Host,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n *\n * @part base - the main control (either `<a />` or `<button />`)\n * @part icon - a `<nano-icon />` component\n */\n@Component({\n  tag: 'nano-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\nexport class IconButton implements ComponentInterface {\n  private button: HTMLButtonElement;\n\n  @Element() host: HTMLNanoIconButtonElement;\n\n  /** The name of the icon to draw. */\n  @Prop() iconName?: string;\n\n  /** An external URL of an SVG file. */\n  @Prop() iconSrc?: string;\n\n  /** The default behavior of the button. */\n  @Prop({ reflect: true }) type: 'submit' | 'reset' | 'button' = 'button';\n\n  /** The name of the button, submitted as a pair with the button’s value as part of the form data. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** Defines the value associated with the button’s name when it’s submitted with the form data. */\n  @Prop({ reflect: true }) value?: string;\n\n  /** A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does. */\n  @Prop() label!: string;\n\n  /** display the label as a `<nano-tooltip />` */\n  @Prop() showTooltip: boolean = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered. */\n  @Prop() href: string | undefined;\n\n  /** Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) */\n  @Prop() rel: string | undefined;\n\n  /** Specifies where to display the linked URL. Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. */\n  @Prop() target: string | undefined;\n\n  /** The HTML form element or form element id.\n   * Used to submit a form when the button is not a child of the form. */\n  @Prop() form: HTMLFormElement | string;\n\n  /** Sets focus on the internal button */\n  @Method()\n  async setFocus() {\n    this.button.focus();\n  }\n\n  /**\n   * Finds the form element based on the provided `form` selector\n   * or element reference provided.\n   * @returns the found form element (if found)\n   */\n  private findForm(): HTMLFormElement | null {\n    const { form, host } = this;\n    if (!form) return host.closest('form');\n\n    if (form instanceof HTMLFormElement) {\n      return form;\n    }\n    if (typeof form === 'string') {\n      const el = document.getElementById(form);\n      if (el instanceof HTMLFormElement) {\n        return el;\n      }\n    }\n    return null;\n  }\n\n  private handleClick = (ev: Event) => {\n    if (this.type === 'button') return;\n    const formEl = this.findForm();\n\n    if (formEl) {\n      ev.preventDefault();\n\n      const fakeButton = document.createElement('button');\n      fakeButton.type = this.type;\n      fakeButton.style.display = 'none';\n      formEl.appendChild(fakeButton);\n      fakeButton.click();\n      fakeButton.remove();\n    }\n  };\n\n  componentDidLoad() {\n    focusVisible.observe(this.button);\n  }\n\n  connectedCallback() {\n    if (this.button) focusVisible.observe(this.button);\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.button);\n  }\n\n  private content() {\n    const TagType: 'a' | 'button' = this.href === undefined ? 'button' : 'a';\n\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null}>\n        <TagType\n          onClick={this.handleClick}\n          part=\"base\"\n          ref={(el) => (this.button = el)}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          name={this.name}\n          value={this.value}\n          href={this.href || undefined}\n          target={this.href && this.target ? this.target : undefined}\n          rel={this.rel || undefined}\n          type={!this.href && this.type ? this.type : undefined}\n        >\n          <span class=\"icon-button__label\">{this.label}</span>\n          <nano-icon\n            name={this.iconName}\n            src={this.iconSrc}\n            aria-hidden=\"true\"\n            lazy={false}\n            part=\"icon\"\n          />\n        </TagType>\n      </Host>\n    );\n  }\n\n  render() {\n    if (this.showTooltip) {\n      return <nano-tooltip content={this.label}>{this.content()}</nano-tooltip>;\n    }\n    return this.content();\n  }\n}\n","@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --max-width: 20rem;\n  --hide-delay: 0s;\n  --hide-duration: 0.125s;\n  --hide-timing-function: ease;\n  --show-delay: 0.125s;\n  --show-duration: 0.125s;\n  --show-timing-function: ease;\n\n  /* autoprefixer: ignore next */\n  display: contents;\n}\n\n.tooltip {\n  $self: &;\n\n  max-inline-size: var(--max-width);\n  border-radius: #{$tooltip-border-radius};\n  background-color: black;\n  font-size: #{$tooltip-fontsize};\n  line-height: 1.5;\n  color: white;\n  opacity: 0;\n  padding: #{$tooltip-padding};\n  transform: translateY(10px) translateZ(0);\n  transform-origin: bottom;\n  transition: opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);\n  white-space: normal;\n\n  &-arrow {\n    content: '';\n    position: absolute;\n    inline-size: 0;\n    block-size: 0;\n    color: black;\n    transition: 0.2s ease transform;\n  }\n\n  &-positioner {\n    position: absolute;\n    z-index: #{$layer-index-tooltip};\n\n    &[data-popper-placement^='top'] #{$self} {\n      transform-origin: bottom;\n      transform: translateY(-10px) translateZ(0);\n    }\n\n    &[data-popper-placement^='bottom'] #{$self} {\n      transform-origin: top;\n    }\n\n    &[data-popper-placement^='left'] #{$self} {\n      transform-origin: right;\n    }\n\n    &[data-popper-placement^='right'] #{$self} {\n      transform-origin: left;\n    }\n\n    &.popover-visible #{$self} {\n      opacity: 1;\n      transform: none;\n      transition-delay: var(--show-delay);\n      transition-duration: var(--show-duration);\n      transition-timing-function: var(--show-timing-function);\n    }\n\n    // Arrow + bottom\n    &[data-popper-placement^='bottom'] #{$self}-arrow {\n      inset-block-end: 100%;\n      inset-inline-start: calc(50% - #{$tooltip-arrow-size});\n      border-block-end: #{$tooltip-arrow-size} solid;\n      border-inline-start: #{$tooltip-arrow-size} solid transparent;\n      border-inline-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='bottom-start'] #{$self}-arrow {\n      inset-inline-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='bottom-end'] #{$self}-arrow {\n      inset-inline: auto #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + top\n    &[data-popper-placement^='top'] #{$self}-arrow {\n      inset-block-start: 100%;\n      inset-inline-start: calc(50% - #{$tooltip-arrow-size});\n      border-block-start: #{$tooltip-arrow-size} solid;\n      border-inline-start: #{$tooltip-arrow-size} solid transparent;\n      border-inline-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='top-start'] #{$self}-arrow {\n      inset-inline-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='top-end'] #{$self}-arrow {\n      inset-inline: auto #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + left\n    &[data-popper-placement^='left'] #{$self}-arrow {\n      inset-block-start: calc(50% - #{$tooltip-arrow-size});\n      inset-inline-start: 100%;\n      border-inline-start: #{$tooltip-arrow-size} solid;\n      border-block-start: #{$tooltip-arrow-size} solid transparent;\n      border-block-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='left-start'] #{$self}-arrow {\n      inset-block-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='left-end'] #{$self}-arrow {\n      inset-block: auto #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + right\n    &[data-popper-placement^='right'] #{$self}-arrow {\n      inset-block-start: calc(50% - #{$tooltip-arrow-size});\n      inset-inline-end: 100%;\n      border-inline-end: #{$tooltip-arrow-size} solid;\n      border-block-start: #{$tooltip-arrow-size} solid transparent;\n      border-block-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='right-start'] #{$self}-arrow {\n      inset-block-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='right-end'] #{$self}-arrow {\n      inset-block: auto #{$tooltip-arrow-offset};\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  Watch,\n  h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\n/**\n * Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n */\n@Component({\n  tag: 'nano-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  private isVisible = false;\n  private popover: Popover;\n  private tooltipPositioner: HTMLElement;\n  private tooltip: any;\n\n  private _target: HTMLElement;\n  private get target() {\n    return this._target;\n  }\n  private set target(newTarget) {\n    if (newTarget !== this._target && this._target) {\n      this._target.removeAttribute('aria-label');\n    }\n    newTarget.setAttribute('aria-label', this.label);\n    this._target = newTarget;\n  }\n\n  private label = '';\n\n  @Element() host: HTMLNanoTooltipElement;\n\n  /** The tooltip's content. Alternatively, you can use the content slot. */\n  @Prop() content = '';\n\n  @Watch('content')\n  setLabel() {\n    const contentSlotNodes = Array.from(\n      this.host.querySelectorAll('[slot=\"content\"]')\n    );\n    const textContent = contentSlotNodes\n      .map((node) => node.textContent)\n      .join(' ')\n      .trim();\n\n    if (!this.target) {\n      this.target = this.getTarget();\n\n      if (!this.target) return;\n    }\n\n    this.label = textContent || this.content;\n    this.target.setAttribute('aria-label', this.label);\n  }\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Set to true to disable the tooltip so it won't show when triggered. */\n  @Prop() disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @Prop() distance = 10;\n\n  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover focus';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  // Events\n\n  /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the tooltip has shown and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the tooltip has hidden and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // Public methods\n\n  /** Shows the tooltip. */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible || this.disabled) {\n      return;\n    }\n    const slShow = this.nanoShow.emit();\n    if (slShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n    this.popover.show();\n  }\n\n  /** Hides the tooltip. */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const slHide = this.nanoHide.emit();\n    if (slHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover.hide();\n  }\n\n  // Private methods\n\n  private getTarget() {\n    // Get the first child that isn't a <style> or content slot\n    const target = [...Array.from(this.host.children)].find(\n      (el) =>\n        el.tagName.toLowerCase() !== 'style' &&\n        el.getAttribute('slot') !== 'content'\n    ) as HTMLElement;\n\n    if (!target) {\n      throw new Error('Invalid tooltip target: no child element was found.');\n    }\n\n    return target;\n  }\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  private syncOptions() {\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.tooltip,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n    });\n  }\n\n  // Event Handlers\n\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  };\n\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.open ? this.hide() : this.show();\n    }\n  };\n\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when the target element has focus should dismiss the tooltip\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.show();\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.target = this.getTarget();\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    this.target = this.getTarget();\n    this.popover = new Popover(this.target, this.tooltipPositioner);\n    this.syncOptions();\n    this.setLabel();\n\n    // Show on init if open\n    this.tooltipPositioner.hidden = !this.open;\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  componentDidUpdate() {\n    this.syncOptions();\n  }\n\n  disconnectedCallback() {\n    if (this.popover) this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <Host\n        onKeyDown={this.handleKeyDown}\n        onMouseOver={this.handleMouseOver}\n        onMouseOut={this.handleMouseOut}\n        onBlur={this.handleBlur}\n        onFocus={this.handleFocus}\n        onClick={this.handleClick}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n        <div\n          ref={(el) => (this.tooltipPositioner = el)}\n          class=\"tooltip-positioner\"\n        >\n          <div\n            part=\"base\"\n            ref={(el) => (this.tooltip = el)}\n            class={{\n              tooltip: true,\n              'tooltip--open': this.open,\n            }}\n            role=\"tooltip\"\n            aria-hidden={this.open ? 'false' : 'true'}\n          >\n            <slot name=\"content\" onSlotchange={() => this.setLabel()}>\n              {this.content}\n            </slot>\n            <div class=\"tooltip-arrow\" data-popper-arrow></div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/types/components/grid/grid-item.d.ts

@@ -1,10 +1,10 @@
-import type { GridSizes } from '../../interface';
 /**
+ * @deprecated - you can now use `grid-states="..."`
+ * on any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.
+ *
  * Grid items to be used with [grid](/story/nano-components-grid) elements
  */
 export declare class GridItem {
-  private currGridSizes;
-  private el;
   /**
    * How to position this item within it's parent grid at different break points. Examples:
    * xl-col-span-2
@@ -12,13 +12,5 @@ export declare class GridItem {
    * xxl-row-span-2
    * m-row-start-2
    */
-  gridStates: string;
-  updateGridClasses(): void;
-  /**
-   * Called by parent grid to trigger new classes
-   * @internal
-   */
-  changeBP(newGridSizes: GridSizes[]): Promise<void>;
-  private applyChildrenClasses;
   render(): any;
 }

package/dist/types/components/grid/grid.d.ts

@@ -1,80 +1,56 @@
-import { EventEmitter } from '../../stencil-public-runtime';
 /**
- * A context-aware CSS grid implementation.
- * Uses it's own width to choose column number - not screen width.
+ * A lightweight, context-aware CSS grid implementation.
+ *
+ * - Define multiple grids templates at different breakpoints
+ * - Uses `@container` queries to select the correct grid depending on the current dimensions
+ * - Use `grid-states="..."` on direct descendants for `column` / `row` - `start` / `end`
+ * - SSR optimised
+
+ * @part grid - the main grid element.
+ * Use this to set css such as `justify-items|content` / `align-items|content` / `place-content`
+ * @part helper - a replica grid showed when `show-helper` is true
+ *
+ * @slot - default slot. Use this to place grid items. Use `grid-states="..."` attribute to opt-out of auto / sequential placement.
  */
 export declare class Grid {
-  private el;
-  private ro;
-  private generalClasses;
-  private gridClass;
-  private isSizes;
-  private currentWidth;
-  constructor();
-  ready: boolean;
-  isSmall: boolean;
-  isMedium: boolean;
-  isLarge: boolean;
-  isXL: boolean;
-  isXXL: boolean;
-  /**
-   * the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.
-   */
-  sSize: number;
-  /**
-   * the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.
-   */
-  mSize: number;
-  /**
-   * the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.
-   */
-  lSize: number;
-  /**
-   * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.
-   */
-  xlSize: number;
-  /**
-   * the number of columns the grid has at the small breakpoint.
-   */
+  private grids;
+  cacheKey: string;
+  /** the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.
+   * Will default to `px` if no unit supplied e.g. `20rem` */
+  sSize: number | string;
+  /** the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.
+   * Will default to `px` if no unit supplied e.g. `20rem` */
+  mSize: number | string;
+  /** the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.
+   * Will default to `px` if no unit supplied e.g. `20rem` */
+  lSize: number | string;
+  /** the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.
+   * Will default to `px` if no unit supplied e.g. `20rem` */
+  xlSize: number | string;
+  /** the number of columns the grid has at the small breakpoint. */
   sCols: number;
-  /**
-   * the number of columns the grid has at the medium breakpoint.
-   */
+  /** the number of columns the grid has at the medium breakpoint. */
   mCols: number;
-  /**
-   * the number of columns the grid has at the large breakpoint.
-   */
+  /** the number of columns the grid has at the large breakpoint. */
   lCols: number;
-  /**
-   * the number of columns the grid has at the xl breakpoint.
-   */
+  /** the number of columns the grid has at the xl breakpoint. */
   xlCols: number;
-  /**
-   * the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)
-   */
+  /** the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) */
   xxlCols: number;
-  /**
-   * shows a grid helper to visualise where columns are
-   */
+  /** Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect */
+  sTpl?: string;
+  /** Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect */
+  mTpl?: string;
+  /** Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect */
+  lTpl?: string;
+  /** Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect */
+  xlTpl?: string;
+  /** Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect */
+  xxlTpl?: string;
+  /** shows a grid helper to visualise where columns are */
   showHelper: boolean;
-  /**
-   * shortcut for a traditional website like grid (requires more than one row). The second row will auto expand to fill the grid height. The first row and > 2nd row will be the size of their content. e.g. header, body and footer.
-   */
-  contentPanel: boolean;
-  /**
-   * Helper to make grid items expand to full height in IE11
-   */
-  fullHeight: boolean;
-  /**
-   * Emitted when the `nano-grid` changes breakpoint
-   */
-  nanoBpChange: EventEmitter<string[]>;
-  propChanged(): void;
-  private applySizeClasses;
-  stateChange(): void;
-  private applyChildrenClasses;
+  constructSizeArray(): void;
+  protected styles: () => string;
   componentWillLoad(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
   render(): any;
 }

package/dist/types/components/hero/hero.d.ts

@@ -16,7 +16,6 @@ import { ComponentInterface } from '../../stencil-public-runtime';
 export declare class Hero implements ComponentInterface {
   private mo?;
   host: HTMLNanoHeroElement;
-  gridSizes: string[];
   hasIconBox: boolean;
   hasScrim: boolean;
   hasSecondaryContent: boolean;
@@ -28,7 +27,7 @@ export declare class Hero implements ComponentInterface {
   breadCrumbChange(): void;
   iconBoxItems: Element[];
   iconBoxItemChange(): void;
-  /** src for backgronund image. For more control use the `background` slot instead. */
+  /** src for background image. For more control use the `background` slot instead. */
   imgSrc?: string;
   /** Optional list string providing media sizes with corresponding image srcs.
    * i.e. show img-x at 300px wide. Format `srcSet="200w src/imgSmall.jpg, 500h src/imgMed.png"` */
@@ -41,7 +40,6 @@ export declare class Hero implements ComponentInterface {
   level: 'top' | 'sub';
   private slotChangeObserver;
   private processSlottedContent;
-  private handleGridChange;
   disconnectedCallback(): void;
   componentDidLoad(): void;
   componentWillLoad(): void;

package/dist/types/components/table/table.d.ts

@@ -227,6 +227,11 @@ export declare class Table implements ComponentInterface {
   private getBlockHeight;
   /** cache the height for all active blocks for later renders */
   private setBlockHeight;
+  /**
+   * On scroll, loop through all blocks' heights and cumulatively, add them together.
+   * When we find that the scroll position is less than this cumulative block height -
+   * stop loop - it's on the current active block.
+   */
   private scrollHandler;
   /** Process slotted content */
   private processSlots;

package/dist/types/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AlgoliaNetworkError, AloliaSearchResultDetail, CheckboxChangeEventDetail, Color, ControlValidity, ControlValidityEventDetail, DateDisabledPredicate, DateInputChangeEventDetail, DragEvent, DuetLocalizedText, FileInputChangeEventDetail, FileWithUrl, FilterChangeEventDetail, Flickity, FlickityOptions, GridSizes, IndexResult, InputChangeEventDetail, LocalDateOpts, MyAccountData, MyAccountUser, NanoFormEles, NavItemEventDetail, OptionInterface, PageChangeEventDetail, PickerChangeEvent, PlainFormEles, RangeChangeEventDetail, RangeValue, ResizeStateChangeEventDetail, SearchIndex, SelectChangeEventDetail, SlideAnimation, StyleEventDetail, TableTypes, TextFieldTypes, ValidationState, ValidatorValueStore } from "./interface";
+import { AlgoliaNetworkError, AloliaSearchResultDetail, CheckboxChangeEventDetail, Color, ControlValidity, ControlValidityEventDetail, DateDisabledPredicate, DateInputChangeEventDetail, DragEvent, DuetLocalizedText, FileInputChangeEventDetail, FileWithUrl, FilterChangeEventDetail, Flickity, FlickityOptions, IndexResult, InputChangeEventDetail, LocalDateOpts, MyAccountData, MyAccountUser, NanoFormEles, NavItemEventDetail, OptionInterface, PageChangeEventDetail, PickerChangeEvent, PlainFormEles, RangeChangeEventDetail, RangeValue, ResizeStateChangeEventDetail, SearchIndex, SelectChangeEventDetail, SlideAnimation, StyleEventDetail, TableTypes, TextFieldTypes, ValidationState, ValidatorValueStore } from "./interface";
 import { StorageMethods } from "./utils/store/component-store";
 import { DaysOfWeek } from "./utils/date-utils";
 import { PopoverPlacement } from "./utils/popover";
@@ -1118,42 +1118,49 @@ export namespace Components {
     interface NanoGlobalSearchResults {
     }
     /**
-     * A context-aware CSS grid implementation.
-     * Uses it's own width to choose column number - not screen width.
+     * A lightweight, context-aware CSS grid implementation.
+     * - Define multiple grids templates at different breakpoints
+     * - Uses `@container` queries to select the correct grid depending on the current dimensions
+     * - Use `grid-states="..."` on direct descendants for `column` / `row` - `start` / `end`
+     * - SSR optimised
      */
     interface NanoGrid {
-        /**
-          * shortcut for a traditional website like grid (requires more than one row). The second row will auto expand to fill the grid height. The first row and > 2nd row will be the size of their content. e.g. header, body and footer.
-         */
-        "contentPanel": boolean;
-        /**
-          * Helper to make grid items expand to full height in IE11
-         */
-        "fullHeight": boolean;
         /**
           * the number of columns the grid has at the large breakpoint.
          */
         "lCols": number;
         /**
-          * the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's large breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
          */
-        "lSize": number;
+        "lSize": number | string;
+        /**
+          * Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect
+         */
+        "lTpl"?: string;
         /**
           * the number of columns the grid has at the medium breakpoint.
          */
         "mCols": number;
         /**
-          * the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
+         */
+        "mSize": number | string;
+        /**
+          * Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect
          */
-        "mSize": number;
+        "mTpl"?: string;
         /**
           * the number of columns the grid has at the small breakpoint.
          */
         "sCols": number;
         /**
-          * the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's small breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
          */
-        "sSize": number;
+        "sSize": number | string;
+        /**
+          * Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect
+         */
+        "sTpl"?: string;
         /**
           * shows a grid helper to visualise where columns are
          */
@@ -1163,33 +1170,35 @@ export namespace Components {
          */
         "xlCols": number;
         /**
-          * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
+         */
+        "xlSize": number | string;
+        /**
+          * Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect
          */
-        "xlSize": number;
+        "xlTpl"?: string;
         /**
           * the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)
          */
         "xxlCols": number;
+        /**
+          * Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect
+         */
+        "xxlTpl"?: string;
     }
     /**
+     * @deprecated - you can now use `grid-states="..."`
+     * on any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.
      * Grid items to be used with [grid](/story/nano-components-grid) elements
      */
     interface NanoGridItem {
-        /**
-          * Called by parent grid to trigger new classes
-         */
-        "changeBP": (newGridSizes: GridSizes[]) => Promise<void>;
-        /**
-          * How to position this item within it's parent grid at different break points. Examples: xl-col-span-2 l-col-start-2 xxl-row-span-2 m-row-start-2
-         */
-        "gridStates": string;
     }
     /**
      * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.
      */
     interface NanoHero {
         /**
-          * src for backgronund image. For more control use the `background` slot instead.
+          * src for background image. For more control use the `background` slot instead.
          */
         "imgSrc"?: string;
         /**
@@ -2622,10 +2631,6 @@ export interface NanoGlobalSearchResultsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNanoGlobalSearchResultsElement;
 }
-export interface NanoGridCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLNanoGridElement;
-}
 export interface NanoImgCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNanoImgElement;
@@ -2932,8 +2937,11 @@ declare global {
         new (): HTMLNanoGlobalSearchResultsElement;
     };
     /**
-     * A context-aware CSS grid implementation.
-     * Uses it's own width to choose column number - not screen width.
+     * A lightweight, context-aware CSS grid implementation.
+     * - Define multiple grids templates at different breakpoints
+     * - Uses `@container` queries to select the correct grid depending on the current dimensions
+     * - Use `grid-states="..."` on direct descendants for `column` / `row` - `start` / `end`
+     * - SSR optimised
      */
     interface HTMLNanoGridElement extends Components.NanoGrid, HTMLStencilElement {
     }
@@ -2942,6 +2950,8 @@ declare global {
         new (): HTMLNanoGridElement;
     };
     /**
+     * @deprecated - you can now use `grid-states="..."`
+     * on any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.
      * Grid items to be used with [grid](/story/nano-components-grid) elements
      */
     interface HTMLNanoGridItemElement extends Components.NanoGridItem, HTMLStencilElement {
@@ -4438,46 +4448,49 @@ declare namespace LocalJSX {
         "onNanoSearchGoBack"?: (event: NanoGlobalSearchResultsCustomEvent<any>) => void;
     }
     /**
-     * A context-aware CSS grid implementation.
-     * Uses it's own width to choose column number - not screen width.
+     * A lightweight, context-aware CSS grid implementation.
+     * - Define multiple grids templates at different breakpoints
+     * - Uses `@container` queries to select the correct grid depending on the current dimensions
+     * - Use `grid-states="..."` on direct descendants for `column` / `row` - `start` / `end`
+     * - SSR optimised
      */
     interface NanoGrid {
-        /**
-          * shortcut for a traditional website like grid (requires more than one row). The second row will auto expand to fill the grid height. The first row and > 2nd row will be the size of their content. e.g. header, body and footer.
-         */
-        "contentPanel"?: boolean;
-        /**
-          * Helper to make grid items expand to full height in IE11
-         */
-        "fullHeight"?: boolean;
         /**
           * the number of columns the grid has at the large breakpoint.
          */
         "lCols"?: number;
         /**
-          * the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's large breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
+         */
+        "lSize"?: number | string;
+        /**
+          * Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect
          */
-        "lSize"?: number;
+        "lTpl"?: string;
         /**
           * the number of columns the grid has at the medium breakpoint.
          */
         "mCols"?: number;
         /**
-          * the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
          */
-        "mSize"?: number;
+        "mSize"?: number | string;
         /**
-          * Emitted when the `nano-grid` changes breakpoint
+          * Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect
          */
-        "onNanoBpChange"?: (event: NanoGridCustomEvent<string[]>) => void;
+        "mTpl"?: string;
         /**
           * the number of columns the grid has at the small breakpoint.
          */
         "sCols"?: number;
         /**
-          * the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's small breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
          */
-        "sSize"?: number;
+        "sSize"?: number | string;
+        /**
+          * Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect
+         */
+        "sTpl"?: string;
         /**
           * shows a grid helper to visualise where columns are
          */
@@ -4487,29 +4500,35 @@ declare namespace LocalJSX {
          */
         "xlCols"?: number;
         /**
-          * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
+         */
+        "xlSize"?: number | string;
+        /**
+          * Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect
          */
-        "xlSize"?: number;
+        "xlTpl"?: string;
         /**
           * the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)
          */
         "xxlCols"?: number;
+        /**
+          * Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect
+         */
+        "xxlTpl"?: string;
     }
     /**
+     * @deprecated - you can now use `grid-states="..."`
+     * on any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.
      * Grid items to be used with [grid](/story/nano-components-grid) elements
      */
     interface NanoGridItem {
-        /**
-          * How to position this item within it's parent grid at different break points. Examples: xl-col-span-2 l-col-start-2 xxl-row-span-2 m-row-start-2
-         */
-        "gridStates"?: string;
     }
     /**
      * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.
      */
     interface NanoHero {
         /**
-          * src for backgronund image. For more control use the `background` slot instead.
+          * src for background image. For more control use the `background` slot instead.
          */
         "imgSrc"?: string;
         /**
@@ -6119,11 +6138,16 @@ declare module "@stencil/core" {
              */
             "nano-global-search-results": LocalJSX.NanoGlobalSearchResults & JSXBase.HTMLAttributes<HTMLNanoGlobalSearchResultsElement>;
             /**
-             * A context-aware CSS grid implementation.
-             * Uses it's own width to choose column number - not screen width.
+             * A lightweight, context-aware CSS grid implementation.
+             * - Define multiple grids templates at different breakpoints
+             * - Uses `@container` queries to select the correct grid depending on the current dimensions
+             * - Use `grid-states="..."` on direct descendants for `column` / `row` - `start` / `end`
+             * - SSR optimised
              */
             "nano-grid": LocalJSX.NanoGrid & JSXBase.HTMLAttributes<HTMLNanoGridElement>;
             /**
+             * @deprecated - you can now use `grid-states="..."`
+             * on any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.
              * Grid items to be used with [grid](/story/nano-components-grid) elements
              */
             "nano-grid-item": LocalJSX.NanoGridItem & JSXBase.HTMLAttributes<HTMLNanoGridItemElement>;

package/dist/types/utils/constructible-style.d.ts

@@ -0,0 +1,31 @@
+import { ComponentInterface } from '../stencil-public-runtime';
+declare type ConstructibleStyleDecorator = (target: ComponentInterface, propertyKey: string) => void;
+/**
+ * Dynamically create a constructible stylesheet which is applied to the component.
+ * The stylesheet is then cached for future instances of the component.
+ * @usage
+As a string:
+```
+@ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
+```
+As a function:
+```
+@ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
+```
+ * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.
+ * @returns `@ConstructableStyle` decorator
+ */
+export declare function ConstructibleStyle(opts?: ConstructibleStyleOptions): ConstructibleStyleDecorator;
+export interface ConstructibleStyleOptions {
+  /**
+   * Set this in case an instance of a component could produce different styles based on variables.
+   * This will ensure that you get new styles for each mode.
+   * @example
+```
+@Prop() mode: string;
+@ConstructableStyle({ cacheKeyProperty: "mode" }) style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
+```
+   */
+  cacheKeyProperty?: string;
+}
+export {};