@nanoporetech-digital/components 4.9.4 → 5.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../src/components/grid/grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Host,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { debounce } from '../../utils/throttle';\nimport type { GridSizes } from '../../interface';\n\nconst STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];\n\n/**\n * A context-aware CSS grid implementation.\n * Uses it's own width to choose column number - not screen width.\n */\n@Component({\n  tag: 'nano-grid',\n  styleUrl: 'grid.scss',\n  shadow: true,\n})\nexport class Grid {\n  @Element() private el: HTMLNanoGridElement;\n  private ro: ResizeObserver;\n  private generalClasses: Array<string> = [''];\n  private gridClass: string = null;\n  private isSizes: GridSizes[] = [null];\n  private currentWidth: number;\n\n  constructor() {\n    this.stateChange = debounce(this.stateChange.bind(this), 100);\n  }\n\n  @State() ready: boolean = false;\n  @State() isSmall = false;\n  @State() isMedium = false;\n  @State() isLarge = false;\n  @State() isXL = false;\n  @State() isXXL = false;\n\n  /**\n   * the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() sSize: number = 300;\n\n  /**\n   * the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() mSize: number = 550;\n\n  /**\n   * the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() lSize: number = 800;\n\n  /**\n   * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() xlSize: number = 1000;\n\n  /**\n   * the number of columns the grid has at the small breakpoint.\n   */\n  @Prop() sCols: number;\n\n  /**\n   * the number of columns the grid has at the medium breakpoint.\n   */\n  @Prop() mCols: number;\n\n  /**\n   * the number of columns the grid has at the large breakpoint.\n   */\n  @Prop() lCols: number;\n\n  /**\n   * the number of columns the grid has at the xl breakpoint.\n   */\n  @Prop() xlCols: number;\n\n  /**\n   * the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)\n   */\n  @Prop() xxlCols: number;\n\n  /**\n   * shows a grid helper to visualise where columns are\n   */\n  @Prop({ reflect: true }) showHelper: boolean = false;\n\n  /**\n   * 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.\n   */\n  @Prop({ reflect: true }) contentPanel: boolean = false;\n\n  /**\n   * Helper to make grid items expand to full height in IE11\n   */\n  @Prop({ reflect: true }) fullHeight: boolean = false;\n\n  /**\n   * Emitted when the `nano-grid` changes breakpoint\n   */\n  @Event() nanoBpChange: EventEmitter<string[]>;\n\n  @Watch('sSize')\n  @Watch('mSize')\n  @Watch('lSize')\n  @Watch('xlSize')\n  @Watch('sCols')\n  @Watch('mCols')\n  @Watch('lCols')\n  @Watch('xlCols')\n  @Watch('xxlCols')\n  propChanged() {\n    this.applySizeClasses();\n  }\n\n  private applySizeClasses() {\n    const size = this.currentWidth;\n\n    this.isSmall = false;\n    this.isMedium = false;\n    this.isLarge = false;\n    this.isXL = false;\n    this.isXXL = false;\n\n    this.generalClasses = [];\n    this.gridClass = null;\n    this.isSizes = [null];\n\n    this.isSmall = true;\n    this.generalClasses.push('is-small');\n    if (this.sCols) this.gridClass = `nano-grid-${this.sCols}`;\n    this.isSizes.push({ size: 's', active: true });\n\n    if (size > this.sSize) {\n      this.isMedium = true;\n      this.generalClasses.push('is-medium');\n      if (this.mCols) this.gridClass = `nano-grid-${this.mCols}`;\n      this.isSizes.push({ size: 'm', active: true });\n    }\n\n    if (size > this.mSize) {\n      this.isLarge = true;\n      this.generalClasses.push('is-large');\n      if (this.lCols) this.gridClass = `nano-grid-${this.lCols}`;\n      this.isSizes.push({ size: 'l', active: true });\n    }\n\n    if (size > this.lSize) {\n      this.isXL = true;\n      this.generalClasses.push('is-xl');\n      if (this.xlCols) this.gridClass = `nano-grid-${this.xlCols}`;\n      this.isSizes.push({ size: 'xl', active: true });\n    }\n\n    if (size > this.xlSize) {\n      this.isXXL = true;\n      this.generalClasses.push('is-xxl');\n      if (this.xxlCols) this.gridClass = `nano-grid-${this.xxlCols}`;\n      this.isSizes.push({ size: 'xxl', active: true });\n    }\n\n    this.el.style.setProperty(\n      '--current-grid-size',\n      `'grid size: ${this.isSizes.slice().pop().size}'`\n    );\n    this.applyChildrenClasses();\n    setTimeout(() => (this.ready = true), 0);\n  }\n\n  @Watch('isSmall')\n  @Watch('isMedium')\n  @Watch('isLarge')\n  @Watch('isXL')\n  @Watch('isXXL')\n  stateChange() {\n    this.nanoBpChange.emit(this.generalClasses);\n  }\n\n  private applyChildrenClasses() {\n    const gridItems = this.el.querySelectorAll('nano-grid-item');\n    if (gridItems.length) {\n      gridItems.forEach((gridItem: HTMLNanoGridItemElement) => {\n        gridItem.changeBP(this.isSizes);\n      });\n      return;\n    }\n\n    // this logic has been put into grid-item. Keep here for legacy for now\n    let stateArr: Array<string> = [''];\n    let itemState: string = '';\n    let found: any;\n    let classes: Array<string>;\n\n    const ctx = this.el;\n\n    // item states come in 4 possible flavours at every breakpoint. E.g.\n    // xl-col-span-2\n    // xl-col-start-2\n    // xl-row-span-2\n    // xl-row-start-2\n\n    // loop through all grid items with states.\n    [].map.call(ctx.children, (gItem: HTMLElement) => {\n      if (!gItem.hasAttribute('grid-states')) return;\n\n      // gridItems.forEach(gItem => {\n\n      // clear all previous grid state classnames\n      classes = gItem.className\n        .split(' ')\n        .filter((c) => !c.startsWith('nano-grid-'));\n      gItem.className = classes.join(' ').trim();\n\n      // get all potential states this element can have\n      const itemStates = gItem.getAttribute('grid-states').split(' ');\n\n      // loop through all potential state options: col & row span & start\n      STATEOPTS.forEach((stateOpt) => {\n        // reset found flag\n        found = false;\n\n        // loop through all the current valid breakpoints / sizes backwards because\n        // we only care about the item's state at the largest current breakpoint.\n        this.isSizes\n          .slice()\n          .reverse()\n          .forEach(function (size) {\n            if (found || !size) return;\n            found = itemStates.find(\n              (state) => state.indexOf(`${size.size}-${stateOpt}`) === 0\n            );\n\n            // found a state at this current size. apply class.\n            if (found) {\n              // clear previous grid state classname\n              classes = gItem.className\n                .split(' ')\n                .filter((c) => !c.includes('nano-grid-${stateOpt}'));\n              gItem.className = classes.join(' ').trim();\n\n              stateArr = found.split('-');\n\n              // remove the size of the state\n              stateArr.shift();\n              itemState = stateArr.join('-');\n\n              // add new class\n              gItem.classList.add(`nano-grid-${itemState}`);\n            }\n          });\n      });\n    });\n  }\n\n  componentWillLoad() {\n    const ctx = this.el;\n    [].map.call(ctx.children, (ele: HTMLElement) =>\n      ele.classList.add('nano-griditem')\n    );\n  }\n\n  componentDidLoad() {\n    if (!window['ResizeObserver']) return;\n\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (!entry.contentRect.width) return;\n        this.currentWidth = entry.contentRect.width;\n        this.applySizeClasses();\n      }\n    });\n    this.ro.observe(this.el);\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [this.generalClasses.join(' ')]: true,\n          'has-grid': !!this.gridClass,\n          ready: this.ready,\n          [this.gridClass]: true,\n        }}\n      >\n        <div\n          class={{\n            grid: true,\n          }}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../src/components/grid/grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Host, State, Watch } from '@stencil/core';\nimport { ConstructibleStyle } from '../../utils/constructible-style';\n\n/**\n * A lightweight, context-aware CSS grid implementation.\n *\n * - Define multiple grids templates at different breakpoints\n * - Uses `@container` queries to select the correct grid depending on the current dimensions\n * - Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n * - SSR optimised\n\n * @part grid - the main grid element.\n * Use this to set css such as `justify-items|content` / `align-items|content` / `place-content`\n * @part helper - a replica grid showed when `show-helper` is true\n *\n * @slot - default slot. Use this to place grid items. Use `grid-states=\"...\"` attribute to opt-out of auto / sequential placement.\n */\n@Component({\n  tag: 'nano-grid',\n  styleUrl: 'grid.scss',\n  shadow: true,\n})\nexport class Grid {\n  private grids: {\n    cols: number;\n    breakpoint: number | string;\n    name: string;\n    template?: string;\n  }[] = [];\n  @State() cacheKey: string;\n\n  /** the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n   * Will default to `px` if no unit supplied e.g. `20rem` */\n  @Prop() sSize: number | string = 300;\n\n  /** the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n   * Will default to `px` if no unit supplied e.g. `20rem` */\n  @Prop() mSize: number | string = 550;\n\n  /** the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n   * Will default to `px` if no unit supplied e.g. `20rem` */\n  @Prop() lSize: number | string = 800;\n\n  /** the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n   * Will default to `px` if no unit supplied e.g. `20rem` */\n  @Prop() xlSize: number | string = 1000;\n\n  /** the number of columns the grid has at the small breakpoint. */\n  @Prop() sCols: number;\n\n  /** the number of columns the grid has at the medium breakpoint. */\n  @Prop() mCols: number;\n\n  /** the number of columns the grid has at the large breakpoint. */\n  @Prop() lCols: number;\n\n  /** the number of columns the grid has at the xl breakpoint. */\n  @Prop() xlCols: number;\n\n  /** the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) */\n  @Prop() xxlCols: number;\n\n  /** Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect */\n  @Prop() sTpl?: string;\n\n  /** Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect */\n  @Prop() mTpl?: string;\n\n  /** Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect */\n  @Prop() lTpl?: string;\n\n  /** Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect */\n  @Prop() xlTpl?: string;\n\n  /** Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect */\n  @Prop() xxlTpl?: string;\n\n  /** shows a grid helper to visualise where columns are */\n  @Prop({ reflect: true }) showHelper: boolean = false;\n\n  @Watch('sTpl')\n  @Watch('mTpl')\n  @Watch('lTpl')\n  @Watch('xlTpl')\n  @Watch('xxlTpl')\n  @Watch('sSize')\n  @Watch('mSize')\n  @Watch('lSize')\n  @Watch('xlSize')\n  @Watch('sCols')\n  @Watch('mCols')\n  @Watch('lCols')\n  @Watch('xlCols')\n  @Watch('xxlCols')\n  @Watch('showHelper')\n  constructSizeArray() {\n    this.grids = [];\n\n    if (this.sCols)\n      this.grids.push({\n        cols: this.sCols,\n        breakpoint: 0,\n        name: 's',\n        template: this.sTpl,\n      });\n    if (this.mCols)\n      this.grids.push({\n        cols: this.mCols,\n        breakpoint: this.sSize,\n        name: 'm',\n        template: this.mTpl,\n      });\n    if (this.lSize)\n      this.grids.push({\n        cols: this.lCols,\n        breakpoint: this.mSize,\n        name: 'l',\n        template: this.lTpl,\n      });\n    if (this.xlCols)\n      this.grids.push({\n        cols: this.xlCols,\n        breakpoint: this.lSize,\n        name: 'xl',\n        template: this.xlTpl,\n      });\n    if (this.xxlCols)\n      this.grids.push({\n        cols: this.xxlCols,\n        breakpoint: this.xlSize,\n        name: 'xxl',\n        template: this.xxlTpl,\n      });\n\n    this.cacheKey =\n      this.grids\n        .map((bp) => `${bp.cols}-${bp.breakpoint}-${bp.template || ''}`)\n        .join('') +\n      '-helper-' +\n      this.showHelper;\n  }\n\n  @ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }) protected styles =\n    () => {\n      const css = /* css */ `\n      ${this.grids\n        .map(\n          (bp) => /* css */ `\n          @container (min-width: ${\n            typeof bp.breakpoint === 'number'\n              ? bp.breakpoint + 1 + 'px'\n              : bp.breakpoint\n          }) {\n            .grid {\n              --current-grid-size: \"grid size: ${bp.name}\";\n              ${\n                bp.template\n                  ? `grid-template: ${bp.template};`\n                  : `grid-template-columns: repeat(${bp.cols}, 1fr);`\n              }\n            }\n            ${[...Array(bp.cols)]\n              .map((_, i) => {\n                const gItm = i + 1;\n                return /* css */ `\n                  .grid > [grid-states~=\"${bp.name}-col-start-${gItm}\"],\n                  ::slotted([grid-states~=\"${bp.name}-col-start-${gItm}\"]) {\n                    grid-column-start: ${gItm} !important;\n                  }\n                  .grid > [grid-states~=\"${bp.name}-row-start-${gItm}\"],\n                  ::slotted([grid-states~=\"${bp.name}-row-start-${gItm}\"]) {\n                    grid-row-start: ${gItm} !important;\n                  }\n                  .grid > [grid-states~=\"${bp.name}-col-span-${gItm}\"],\n                  ::slotted([grid-states~=\"${bp.name}-col-span-${gItm}\"]) {\n                    grid-column-end: span ${gItm} !important;\n                  }\n                  .grid > [grid-states~=\"${bp.name}-row-span-${gItm}\"],\n                  ::slotted([grid-states~=\"${bp.name}-row-span-${gItm}\"]) {\n                    grid-row-end: span ${gItm} !important;\n                  }\n              `;\n              })\n              .join('')}\n            ${\n              this.showHelper &&\n              /* css */ `\n              .grid--helper :nth-child(-n+${bp.cols}) {\n                display: block !important;\n              }\n            `\n            }\n          }\n        `\n        )\n        .join('')}\n    `;\n      return css;\n    };\n\n  componentWillLoad() {\n    this.constructSizeArray();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div part=\"grid\" class=\"grid\">\n          <slot />\n        </div>\n        {this.showHelper && (\n          <div class=\"grid grid--helper\" part=\"helper\">\n            {[...Array(24)].map(() => (\n              <div class=\"grid__helper-item\" />\n            ))}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/hero/hero.css

@@ -25,7 +25,6 @@ TODO - as soon as container queries hits everywhere, strip out reliance on nano-
    * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;
    * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;
   */
-  display: block;
   --nano-loader-base: #4a4a4a;
   --nano-loader-tint: #7d7d7d;
   --theme-color: #fff;
@@ -37,10 +36,8 @@ TODO - as soon as container queries hits everywhere, strip out reliance on nano-
   --padding: 0;
   --quote-size: 1.3rem;
   color: var(--theme-color);
-}
-
-:host(.is-xl) {
-  --quote-size: 3rem;
+  display: block;
+  container-type: inline-size;
 }
 
 :host([theme=light]) {
@@ -60,6 +57,11 @@ TODO - as soon as container queries hits everywhere, strip out reliance on nano-
 .hero {
   position: relative;
 }
+@container (min-width: 800px) {
+  .hero {
+    --quote-size: 3rem;
+  }
+}
 .hero--rtl {
   --scrim-direction: 270deg;
 }
@@ -103,7 +105,6 @@ TODO - as soon as container queries hits everywhere, strip out reliance on nano-
 }
 .hero__img {
   display: block;
-  container-type: inline-size;
   --padding: inherit;
 }
 .hero__breadcrumbs {
@@ -115,11 +116,6 @@ TODO - as soon as container queries hits everywhere, strip out reliance on nano-
 .hero--breadcrumb .hero__breadcrumbs {
   display: block;
 }
-.is-xl .hero__breadcrumbs {
-  margin-block: 0;
-  margin-inline: 50px;
-  max-inline-size: 50%;
-}
 @container (min-width: 800px) {
   .hero__breadcrumbs {
     margin-block: 0;
@@ -127,10 +123,6 @@ TODO - as soon as container queries hits everywhere, strip out reliance on nano-
     max-inline-size: 50%;
   }
 }
-.is-xxl .hero__breadcrumbs {
-  margin-block: 0;
-  margin-inline: 83px;
-}
 @container (min-width: 900px) {
   .hero__breadcrumbs {
     margin-block: 0;
@@ -180,22 +172,12 @@ TODO - as soon as container queries hits everywhere, strip out reliance on nano-
   margin-inline: auto;
   position: relative;
 }
-.hero__content.is-xl {
-  -webkit-margin-before: 50px;
-          margin-block-start: 50px;
-  max-inline-size: 1540px;
-}
 @container (min-width: 800px) {
   .hero__content {
     margin-block: 50px 0 !important;
     max-inline-size: 1540px !important;
   }
 }
-.hero__content.is-xxl {
-  -webkit-margin-before: 83px;
-          margin-block-start: 83px;
-  max-inline-size: 1606px;
-}
 @container (min-width: 900px) {
   .hero__content {
     margin-block: 83px 0 !important;
@@ -216,14 +198,6 @@ TODO - as soon as container queries hits everywhere, strip out reliance on nano-
 .hero__primary ::slotted(nano-icon-button[slot=back-btn]) {
   font-size: 2rem;
 }
-.is-xl .hero__primary {
-  margin-block: 0 50px;
-  margin-inline: 50px 0;
-}
-.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]) {
-  margin-block: 0;
-  margin-inline: -3rem 0;
-}
 @container (min-width: 800px) {
   .hero__primary {
     margin-block: 0 50px !important;
@@ -234,10 +208,6 @@ TODO - as soon as container queries hits everywhere, strip out reliance on nano-
     margin-inline: -3rem 0 !important;
   }
 }
-.is-xxl .hero__primary {
-  margin-block: 0 83px !important;
-  margin-inline: 83px 0 !important;
-}
 @container (min-width: 900px) {
   .hero__primary {
     margin-block: 0 83px !important;
@@ -258,15 +228,6 @@ TODO - as soon as container queries hits everywhere, strip out reliance on nano-
   margin-block: 0 18px !important;
   font-size: 2rem !important;
 }
-.is-xl .hero__primary-content ::slotted(h1[slot=primary-content]) {
-  line-height: 31px !important;
-  -webkit-margin-after: 30px !important;
-          margin-block-end: 30px !important;
-}
-.is-xl .hero__primary-content ::slotted(.button[slot=primary-content]) {
-  -webkit-margin-before: 20px !important;
-          margin-block-start: 20px !important;
-}
 @container (min-width: 800px) {
   .hero__primary-content ::slotted(h1[slot=primary-content]) {
     line-height: 31px !important;
@@ -288,11 +249,6 @@ TODO - as soon as container queries hits everywhere, strip out reliance on nano-
   display: flex;
   align-items: center;
 }
-.is-xl .hero__secondary {
-  padding-block: 0 50px;
-  padding-inline: 50px;
-  justify-content: flex-end;
-}
 @container (min-width: 800px) {
   .hero__secondary {
     padding-block: 0 50px;
@@ -300,10 +256,6 @@ TODO - as soon as container queries hits everywhere, strip out reliance on nano-
     justify-content: flex-end;
   }
 }
-.is-xxl .hero__secondary {
-  padding-block: 0 83px;
-  padding-inline: 83px;
-}
 @container (min-width: 900px) {
   .hero__secondary {
     padding-block: 0 83px;
@@ -320,9 +272,11 @@ TODO - as soon as container queries hits everywhere, strip out reliance on nano-
   flex-direction: column;
   color: white;
 }
-.is-xl .hero__icon-box {
-  max-inline-size: 410px;
-  flex: 0 1 410px;
+@container (min-width: 800px) {
+  .hero__icon-box {
+    max-inline-size: 410px;
+    flex: 0 1 410px;
+  }
 }
 .hero__icon-box ::slotted([slot=icon-box-item]) {
   --nano-color-base: var(--theme-tint-color);
@@ -344,11 +298,6 @@ TODO - as soon as container queries hits everywhere, strip out reliance on nano-
   text-align: center;
   inline-size: 100%;
 }
-.is-xl .hero__quote-content {
-  max-inline-size: 500px;
-  flex: 0 1 500px;
-  text-align: initial;
-}
 @container (min-width: 800px) {
   .hero__quote-content {
     max-inline-size: 500px;
@@ -377,31 +326,35 @@ TODO - as soon as container queries hits everywhere, strip out reliance on nano-
   font-size: 1rem;
   opacity: 0.8;
 }
-.hero--sub .hero__content.is-xl {
-  -webkit-margin-before: 40px;
-          margin-block-start: 40px;
-}
-.hero--sub .hero__content.is-xl .hero__primary {
-  margin-block: 0 40px;
-  margin-inline: 50px 0;
-}
-.hero--sub .hero__content.is-xl .hero__secondary {
-  padding-block: 0 50px;
-  padding-inline: 40px 50px;
-}
-.hero--sub .hero__content.is-xl ::slotted(.button[slot=primary-content]) {
-  -webkit-margin-before: 8px !important;
-          margin-block-start: 8px !important;
-}
-.hero--sub .hero__content.is-xl ::slotted(h1[slot=primary-content]) {
-  -webkit-margin-after: 18px !important;
-          margin-block-end: 18px !important;
-}
-.hero--sub .hero__content.is-xxl .hero__primary {
-  margin-block: 0 40px;
-  margin-inline: 83px 0;
+@container (min-width: 800px) {
+  .hero--sub .hero__content {
+    -webkit-margin-before: 40px;
+            margin-block-start: 40px;
+  }
+  .hero--sub .hero__content .hero__primary {
+    margin-block: 0 40px;
+    margin-inline: 50px 0;
+  }
+  .hero--sub .hero__content .hero__secondary {
+    padding-block: 0 50px;
+    padding-inline: 40px 50px;
+  }
+  .hero--sub .hero__content ::slotted(.button[slot=primary-content]) {
+    -webkit-margin-before: 8px !important;
+            margin-block-start: 8px !important;
+  }
+  .hero--sub .hero__content ::slotted(h1[slot=primary-content]) {
+    -webkit-margin-after: 18px !important;
+            margin-block-end: 18px !important;
+  }
 }
-.hero--sub .hero__content.is-xxl .hero__secondary {
-  padding-block: 0 83px;
-  padding-inline: 40px 83px;
+@container (min-width: 900px) {
+  .hero--sub .hero__content .hero__primary {
+    margin-block: 0 40px;
+    margin-inline: 83px 0;
+  }
+  .hero--sub .hero__content .hero__secondary {
+    padding-block: 0 83px;
+    padding-inline: 40px 83px;
+  }
 }

package/dist/collection/components/hero/hero.js

@@ -18,19 +18,15 @@ import { h, Host, } from '@stencil/core';
  */
 export class Hero {
   constructor() {
-    this.handleGridChange = (e) => {
-      this.gridSizes = e.detail;
-    };
     this.HeroContent = () => {
       return [
         !this.hasIconBox && this.hasCtas ? (h("div", { class: "hero__ctas" }, h("slot", { name: "secondary-ctas" }))) : (''),
         h("div", { class: "hero__scrim" }, h("slot", { name: "scrim" })),
-        h("nano-grid", { onNanoBpChange: this.handleGridChange, class: "hero__content", xlCols: 2, xlSize: this.largeScreenBP }, h("nano-grid-item", { gridStates: "xl-col-span-2" }, h("div", { class: "hero__breadcrumbs" }, h("slot", { name: "breadcrumb" }))), h("nano-grid-item", { gridStates: this.hasSecondaryContent
+        h("nano-grid", { class: "hero__content", xlCols: 2, xlSize: this.largeScreenBP }, h("div", { "grid-states": "xl-col-span-2" }, h("div", { class: "hero__breadcrumbs" }, h("slot", { name: "breadcrumb" }))), h("div", { "grid-states": this.hasSecondaryContent
             ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'
-            : 'xl-col-span-2 xl-col-start-1 xl-row-start-2' }, h("div", { class: "hero__primary" }, h("div", { class: "hero__primary-content" }, h("slot", { name: "back-btn" }), h("div", null, h("slot", { name: "primary-content" }))))), this.hasSecondaryContent && (h("nano-grid-item", { gridStates: "xl-col-span-1 xl-col-start-2 xl-row-start-2" }, h("div", { class: "hero__secondary" }, h("slot", { name: "secondary-content" }), this.hasIconBox && (h("div", { class: "hero__icon-box" }, h("slot", { name: "icon-box" }), h("slot", { name: "icon-box-item" }))), this.hasQuote && (h("div", { class: "hero__quote-content" }, h("span", { class: "hero__quote" }, h("slot", { name: "quote" })), h("div", { class: "hero__quote-author" }, h("slot", { name: "quote-author" })))))))),
+            : 'xl-col-span-2 xl-col-start-1 xl-row-start-2' }, h("div", { class: "hero__primary" }, h("div", { class: "hero__primary-content" }, h("slot", { name: "back-btn" }), h("div", null, h("slot", { name: "primary-content" }))))), this.hasSecondaryContent && (h("div", { "grid-states": "xl-col-span-1 xl-col-start-2 xl-row-start-2" }, h("div", { class: "hero__secondary" }, h("slot", { name: "secondary-content" }), this.hasIconBox && (h("div", { class: "hero__icon-box" }, h("slot", { name: "icon-box" }), h("slot", { name: "icon-box-item" }))), this.hasQuote && (h("div", { class: "hero__quote-content" }, h("span", { class: "hero__quote" }, h("slot", { name: "quote" })), h("div", { class: "hero__quote-author" }, h("slot", { name: "quote-author" })))))))),
       ];
     };
-    this.gridSizes = [];
     this.hasIconBox = undefined;
     this.hasScrim = undefined;
     this.hasSecondaryContent = undefined;
@@ -102,9 +98,7 @@ export class Hero {
   render() {
     const rtl = this.host.dir === 'rtl' ||
       this.host.ownerDocument.dir === 'rtl';
-    return (h(Host, { class: {
-        [this.gridSizes.join(' ')]: true,
-      } }, h("div", { class: {
+    return (h(Host, null, h("div", { class: {
         hero: true,
         'hero--light': this.theme === 'light',
         'hero--secondary': this.hasSecondaryContent,
@@ -146,7 +140,7 @@ export class Hero {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "src for backgronund image. For more control use the `background` slot instead."
+          "text": "src for background image. For more control use the `background` slot instead."
         },
         "getter": false,
         "setter": false,
@@ -237,7 +231,6 @@ export class Hero {
   }
   static get states() {
     return {
-      "gridSizes": {},
       "hasIconBox": {},
       "hasScrim": {},
       "hasSecondaryContent": {},

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

@@ -1 +1 @@
-{"version":3,"file":"hero.js","sourceRoot":"","sources":["../../../src/components/hero/hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  h,\n  ComponentInterface,\n  VNode,\n  State,\n  Element,\n  Watch,\n  Host,\n} from '@stencil/core';\n/**\n * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n */\n@Component({\n  tag: 'nano-hero',\n  styleUrl: 'hero.scss',\n  shadow: true,\n})\nexport class Hero implements ComponentInterface {\n  private mo?: MutationObserver;\n\n  @Element() host: HTMLNanoHeroElement;\n\n  @State() gridSizes: string[] = [];\n  @State() hasIconBox: boolean;\n  @State() hasScrim: boolean;\n  @State() hasSecondaryContent: boolean;\n  @State() hasQuote: boolean;\n  @State() hasBg: boolean;\n  @State() hasBackBtn: boolean;\n  @State() hasCtas: boolean;\n  @State() breadCrumbs: Element[];\n  @Watch('breadCrumbs')\n  breadCrumbChange() {\n    // safari doesn't support ::slotted()::after ... so this :/\n    this.breadCrumbs\n      .filter(\n        (crumb) =>\n          crumb.tagName === 'A' &&\n          !crumb.nextElementSibling.classList.contains('slash')\n      )\n      .forEach((crumb) => {\n        crumb.insertAdjacentHTML(\n          'afterend',\n          '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n        );\n      });\n  }\n  @State() iconBoxItems: Element[];\n  @Watch('iconBoxItems')\n  iconBoxItemChange() {\n    this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n    if (\n      this.iconBoxItems[this.iconBoxItems.length - 1] &&\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList\n    )\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n  }\n\n  /** src for backgronund image. For more control use the `background` slot instead. */\n  @Prop() imgSrc?: string;\n\n  /** Optional list string providing media sizes with corresponding image srcs.\n   * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n  @Prop() imgSrcSet?: string = null;\n\n  /** The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) */\n  @Prop() largeScreenBP: number = 900;\n\n  /** Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) */\n  @Prop() theme: 'dark' | 'light' = 'dark';\n\n  /** Set the content structure level of the hero. Defaults to 'top'  */\n  @Prop() level: 'top' | 'sub' = 'top';\n\n  private slotChangeObserver() {\n    if (!window['MutationObserver']) return;\n\n    if (this.mo) this.mo.disconnect();\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.host, { childList: true });\n  }\n\n  // Event handlers\n\n  private processSlottedContent() {\n    this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n    this.iconBoxItems = Array.from(\n      this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n    );\n    this.hasIconBox =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.iconBoxItems.length;\n    this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n    this.breadCrumbs = Array.from(\n      this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n    );\n    this.hasSecondaryContent =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.host.querySelector('[slot=\"quote\"]') ||\n      !!this.host.querySelector('[slot=\"icon-box-item\"]') ||\n      !!this.host.querySelector('[slot=\"secondary-content\"]');\n    this.hasBg =\n      !!this.host.querySelector('[slot=\"background\"]') || !!this.imgSrc;\n    this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n    this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n  }\n\n  private handleGridChange = (e: CustomEvent & { detail: string[] }) => {\n    this.gridSizes = e.detail;\n  };\n\n  // Component lifecycle\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  private HeroContent = (): VNode[] => {\n    return [\n      !this.hasIconBox && this.hasCtas ? (\n        <div class=\"hero__ctas\">\n          <slot name=\"secondary-ctas\" />\n        </div>\n      ) : (\n        ''\n      ),\n      <div class=\"hero__scrim\">\n        <slot name=\"scrim\" />\n      </div>,\n      <nano-grid\n        onNanoBpChange={this.handleGridChange}\n        class=\"hero__content\"\n        xlCols={2}\n        xlSize={this.largeScreenBP}\n      >\n        <nano-grid-item gridStates=\"xl-col-span-2\">\n          <div class=\"hero__breadcrumbs\">\n            <slot name=\"breadcrumb\" />\n          </div>\n        </nano-grid-item>\n        <nano-grid-item\n          gridStates={\n            this.hasSecondaryContent\n              ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n              : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n          }\n        >\n          <div class=\"hero__primary\">\n            <div class=\"hero__primary-content\">\n              <slot name=\"back-btn\" />\n              <div>\n                <slot name=\"primary-content\" />\n              </div>\n            </div>\n          </div>\n        </nano-grid-item>\n        {this.hasSecondaryContent && (\n          <nano-grid-item gridStates=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n            <div class=\"hero__secondary\">\n              <slot name=\"secondary-content\" />\n              {this.hasIconBox && (\n                <div class=\"hero__icon-box\">\n                  <slot name=\"icon-box\" />\n                  <slot name=\"icon-box-item\" />\n                </div>\n              )}\n              {this.hasQuote && (\n                <div class=\"hero__quote-content\">\n                  <span class=\"hero__quote\">\n                    <slot name=\"quote\" />\n                  </span>\n                  <div class=\"hero__quote-author\">\n                    <slot name=\"quote-author\" />\n                  </div>\n                </div>\n              )}\n            </div>\n          </nano-grid-item>\n        )}\n      </nano-grid>,\n    ];\n  };\n\n  render() {\n    const rtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host\n        class={{\n          [this.gridSizes.join(' ')]: true,\n        }}\n      >\n        <div\n          class={{\n            hero: true,\n            'hero--light': this.theme === 'light',\n            'hero--secondary': this.hasSecondaryContent,\n            'hero--iconbox': this.hasIconBox,\n            'hero--rtl': rtl,\n            'hero--scrim': this.hasScrim,\n            'hero--breadcrumb': !!this.breadCrumbs.length,\n            'hero--hasbg': this.hasBg,\n            'hero--backbtn': this.hasBackBtn,\n            'hero--sub': this.level === 'sub',\n          }}\n        >\n          <div class=\"hero__bg-wrap\">\n            {!!this.imgSrc && (\n              <nano-img\n                class=\"hero__img\"\n                lazy={false}\n                background\n                srcSet={this.imgSrcSet}\n                src={this.imgSrc}\n              >\n                <this.HeroContent />\n              </nano-img>\n            )}\n            {!this.imgSrc && [\n              <div class=\"hero__bg-slot\">\n                <slot name=\"background\" />\n              </div>,\n              <this.HeroContent />,\n            ]}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"hero.js","sourceRoot":"","sources":["../../../src/components/hero/hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  h,\n  ComponentInterface,\n  VNode,\n  State,\n  Element,\n  Watch,\n  Host,\n} from '@stencil/core';\n/**\n * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n */\n@Component({\n  tag: 'nano-hero',\n  styleUrl: 'hero.scss',\n  shadow: true,\n})\nexport class Hero implements ComponentInterface {\n  private mo?: MutationObserver;\n\n  @Element() host: HTMLNanoHeroElement;\n\n  @State() hasIconBox: boolean;\n  @State() hasScrim: boolean;\n  @State() hasSecondaryContent: boolean;\n  @State() hasQuote: boolean;\n  @State() hasBg: boolean;\n  @State() hasBackBtn: boolean;\n  @State() hasCtas: boolean;\n  @State() breadCrumbs: Element[];\n  @Watch('breadCrumbs')\n  breadCrumbChange() {\n    // safari doesn't support ::slotted()::after ... so this :/\n    this.breadCrumbs\n      .filter(\n        (crumb) =>\n          crumb.tagName === 'A' &&\n          !crumb.nextElementSibling.classList.contains('slash')\n      )\n      .forEach((crumb) => {\n        crumb.insertAdjacentHTML(\n          'afterend',\n          '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n        );\n      });\n  }\n  @State() iconBoxItems: Element[];\n  @Watch('iconBoxItems')\n  iconBoxItemChange() {\n    this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n    if (\n      this.iconBoxItems[this.iconBoxItems.length - 1] &&\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList\n    )\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n  }\n\n  /** src for background image. For more control use the `background` slot instead. */\n  @Prop() imgSrc?: string;\n\n  /** Optional list string providing media sizes with corresponding image srcs.\n   * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n  @Prop() imgSrcSet?: string = null;\n\n  /** The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) */\n  @Prop() largeScreenBP: number = 900;\n\n  /** Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) */\n  @Prop() theme: 'dark' | 'light' = 'dark';\n\n  /** Set the content structure level of the hero. Defaults to 'top'  */\n  @Prop() level: 'top' | 'sub' = 'top';\n\n  private slotChangeObserver() {\n    if (!window['MutationObserver']) return;\n\n    if (this.mo) this.mo.disconnect();\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.host, { childList: true });\n  }\n\n  // Event handlers\n\n  private processSlottedContent() {\n    this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n    this.iconBoxItems = Array.from(\n      this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n    );\n    this.hasIconBox =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.iconBoxItems.length;\n    this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n    this.breadCrumbs = Array.from(\n      this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n    );\n    this.hasSecondaryContent =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.host.querySelector('[slot=\"quote\"]') ||\n      !!this.host.querySelector('[slot=\"icon-box-item\"]') ||\n      !!this.host.querySelector('[slot=\"secondary-content\"]');\n    this.hasBg =\n      !!this.host.querySelector('[slot=\"background\"]') || !!this.imgSrc;\n    this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n    this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n  }\n\n  // Component lifecycle\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  private HeroContent = (): VNode[] => {\n    return [\n      !this.hasIconBox && this.hasCtas ? (\n        <div class=\"hero__ctas\">\n          <slot name=\"secondary-ctas\" />\n        </div>\n      ) : (\n        ''\n      ),\n      <div class=\"hero__scrim\">\n        <slot name=\"scrim\" />\n      </div>,\n      <nano-grid class=\"hero__content\" xlCols={2} xlSize={this.largeScreenBP}>\n        <div grid-states=\"xl-col-span-2\">\n          <div class=\"hero__breadcrumbs\">\n            <slot name=\"breadcrumb\" />\n          </div>\n        </div>\n        <div\n          grid-states={\n            this.hasSecondaryContent\n              ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n              : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n          }\n        >\n          <div class=\"hero__primary\">\n            <div class=\"hero__primary-content\">\n              <slot name=\"back-btn\" />\n              <div>\n                <slot name=\"primary-content\" />\n              </div>\n            </div>\n          </div>\n        </div>\n        {this.hasSecondaryContent && (\n          <div grid-states=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n            <div class=\"hero__secondary\">\n              <slot name=\"secondary-content\" />\n              {this.hasIconBox && (\n                <div class=\"hero__icon-box\">\n                  <slot name=\"icon-box\" />\n                  <slot name=\"icon-box-item\" />\n                </div>\n              )}\n              {this.hasQuote && (\n                <div class=\"hero__quote-content\">\n                  <span class=\"hero__quote\">\n                    <slot name=\"quote\" />\n                  </span>\n                  <div class=\"hero__quote-author\">\n                    <slot name=\"quote-author\" />\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n      </nano-grid>,\n    ];\n  };\n\n  render() {\n    const rtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host>\n        <div\n          class={{\n            hero: true,\n            'hero--light': this.theme === 'light',\n            'hero--secondary': this.hasSecondaryContent,\n            'hero--iconbox': this.hasIconBox,\n            'hero--rtl': rtl,\n            'hero--scrim': this.hasScrim,\n            'hero--breadcrumb': !!this.breadCrumbs.length,\n            'hero--hasbg': this.hasBg,\n            'hero--backbtn': this.hasBackBtn,\n            'hero--sub': this.level === 'sub',\n          }}\n        >\n          <div class=\"hero__bg-wrap\">\n            {!!this.imgSrc && (\n              <nano-img\n                class=\"hero__img\"\n                lazy={false}\n                background\n                srcSet={this.imgSrcSet}\n                src={this.imgSrc}\n              >\n                <this.HeroContent />\n              </nano-img>\n            )}\n            {!this.imgSrc && [\n              <div class=\"hero__bg-slot\">\n                <slot name=\"background\" />\n              </div>,\n              <this.HeroContent />,\n            ]}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/icon-button/icon-button.css

@@ -12,21 +12,22 @@
 }
 :host {
   /**
-    * @prop --border-radius: defaults to var(--nano-border-radius-medium, 4px);
-    * @prop --border-radius: defaults to var(--nano-border-radius-medium, 4px);
     * @prop --color: defaults to #b5aea7;
     * @prop --active-color: defaults to #005c75;
     * @prop --hover-color: defaults to #007495;
     * @prop --background: defaults to transparent;
     * @prop --padding: defaults to var(--nano-spacing-small, 8px);
+    * @prop --box-shadow: defaults to none;
     */
-  display: inline-block;
   --border-radius: var(--nano-border-radius-medium, 4px);
   --active-color: #005c75;
   --hover-color: #007495;
   --nano-color-base: var(--color, #687576);
   --background: transparent;
   --padding: var(--nano-spacing-small, 8px);
+  --box-shadow: none;
+  border-radius: var(--border-radius);
+  display: inline-block;
 }
 
 .icon-button {
@@ -34,7 +35,7 @@
   display: flex;
   align-items: center;
   border: none;
-  border-radius: var(--border-radius);
+  border-radius: inherit;
   background: var(--background);
   font-size: inherit;
   color: var(--color);
@@ -43,6 +44,7 @@
   -webkit-appearance: none;
           appearance: none;
   transition: box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;
+  box-shadow: var(--box-shadow);
 }
 .icon-button:hover:not(.icon-button--disabled), .icon-button:focus:not(.icon-button--disabled) {
   color: var(--hover-color);
@@ -56,6 +58,18 @@
   outline: none;
 }
 
+.icon-button__label {
+  clip: rect(1px, 1px, 1px, 1px);
+  -webkit-clip-path: inset(50%);
+          clip-path: inset(50%);
+  block-size: 1px;
+  inline-size: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+
 .icon-button--disabled {
   opacity: 0.5;
   cursor: not-allowed;

package/dist/collection/components/icon-button/icon-button.js

@@ -1,7 +1,7 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { h } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 import { focusVisible } from '../../utils/focus-visible';
 /** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
  *
@@ -10,6 +10,20 @@ import { focusVisible } from '../../utils/focus-visible';
  */
 export class IconButton {
   constructor() {
+    this.handleClick = (ev) => {
+      if (this.type === 'button')
+        return;
+      const formEl = this.findForm();
+      if (formEl) {
+        ev.preventDefault();
+        const fakeButton = document.createElement('button');
+        fakeButton.type = this.type;
+        fakeButton.style.display = 'none';
+        formEl.appendChild(fakeButton);
+        fakeButton.click();
+        fakeButton.remove();
+      }
+    };
     this.iconName = undefined;
     this.iconSrc = undefined;
     this.type = 'button';
@@ -19,12 +33,34 @@ export class IconButton {
     this.showTooltip = false;
     this.disabled = false;
     this.href = undefined;
+    this.rel = undefined;
     this.target = undefined;
+    this.form = undefined;
   }
   /** Sets focus on the internal button */
   async setFocus() {
     this.button.focus();
   }
+  /**
+   * Finds the form element based on the provided `form` selector
+   * or element reference provided.
+   * @returns the found form element (if found)
+   */
+  findForm() {
+    const { form, host } = this;
+    if (!form)
+      return host.closest('form');
+    if (form instanceof HTMLFormElement) {
+      return form;
+    }
+    if (typeof form === 'string') {
+      const el = document.getElementById(form);
+      if (el instanceof HTMLFormElement) {
+        return el;
+      }
+    }
+    return null;
+  }
   componentDidLoad() {
     focusVisible.observe(this.button);
   }
@@ -37,10 +73,10 @@ export class IconButton {
   }
   content() {
     const TagType = this.href === undefined ? 'button' : 'a';
-    return (h(TagType, { part: "base", ref: (el) => (this.button = el), class: {
+    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null }, h(TagType, { onClick: this.handleClick, part: "base", ref: (el) => (this.button = el), class: {
         'icon-button': true,
         'icon-button--disabled': this.disabled,
-      }, "aria-label": this.label, name: this.name, value: this.value, href: this.href || undefined, target: this.href && this.target ? this.target : undefined, type: !this.href && this.type ? this.type : undefined }, h("nano-icon", { name: this.iconName, src: this.iconSrc, "aria-hidden": "true", lazy: false, part: "icon" })));
+      }, name: this.name, value: this.value, href: this.href || undefined, target: this.href && this.target ? this.target : undefined, rel: this.rel || undefined, type: !this.href && this.type ? this.type : undefined }, h("span", { class: "icon-button__label" }, this.label), h("nano-icon", { name: this.iconName, src: this.iconSrc, "aria-hidden": "true", lazy: false, part: "icon" }))));
   }
   render() {
     if (this.showTooltip) {
@@ -49,7 +85,7 @@ export class IconButton {
     return this.content();
   }
   static get is() { return "nano-icon-button"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["icon-button.scss"]
@@ -236,6 +272,25 @@ export class IconButton {
         "attribute": "href",
         "reflect": false
       },
+      "rel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "rel",
+        "reflect": false
+      },
       "target": {
         "type": "string",
         "mutable": false,
@@ -254,6 +309,29 @@ export class IconButton {
         "setter": false,
         "attribute": "target",
         "reflect": false
+      },
+      "form": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLFormElement | string",
+          "resolved": "HTMLFormElement | string",
+          "references": {
+            "HTMLFormElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The HTML form element or form element id.\nUsed to submit a form when the button is not a child of the form."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "form",
+        "reflect": false
       }
     };
   }
@@ -277,5 +355,6 @@ export class IconButton {
       }
     };
   }
+  static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=icon-button.js.map