@nanoporetech-digital/components 4.10.0 → 5.0.0

package/dist/collection/components/form-control/form-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-control.js","sourceRoot":"","sources":["../../../src/components/form-control/form-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport type { TextFieldTypes } from '../../interface';\n\ninterface FormControlWrapProps {\n  rtl: boolean;\n  floatLabel: boolean;\n  labelId: string;\n  label: string;\n  moreId: string;\n  helperEndId: string;\n  type?: TextFieldTypes;\n  showInlineError: boolean;\n  hasHelperSlot: boolean;\n  errorMessage: string;\n  controlId: string;\n  hasLabelSlot: boolean;\n  hideLabel: boolean;\n  placeholder: string;\n  hasValue: boolean;\n  showCharCount?: boolean;\n  maxlength?: number;\n  charCount?: number;\n  hasHelperEndSlot?: boolean;\n}\n\ninterface FormControlProps {\n  clearControl: boolean;\n  onClearText?: () => void;\n  readonly: boolean;\n  disabled: boolean;\n  control: HTMLNanoInputElement | HTMLNanoSelectElement;\n  ref?: (elm?: HTMLElement) => void;\n  endSlot?: VNode;\n  endValueSlot?: VNode;\n  startSlot?: VNode;\n}\n\ninterface LabelProps extends FormControlWrapProps {\n  rtl: boolean;\n}\n\nconst renderLabel = ({\n  label,\n  hasLabelSlot,\n  controlId,\n  labelId,\n  floatLabel,\n  placeholder,\n  hideLabel,\n  hasValue,\n  rtl,\n  showCharCount,\n  maxlength,\n  charCount,\n}: LabelProps) => {\n  if (!label && !hasLabelSlot) return;\n  if (floatLabel) {\n    return (\n      <label class=\"form-ctrl__float-label\" htmlFor={controlId} id={labelId}>\n        {label && label}\n        {!label && hasLabelSlot && <slot name=\"label\" />}\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength ? ` ${charCount}/${maxlength}` : ` ${charCount}`}\n          </span>\n        )}\n      </label>\n    );\n  } else {\n    return (\n      <label\n        class={{ 'form-ctrl__label': true, 'visually-hide': hideLabel }}\n        htmlFor={controlId}\n        id={labelId}\n      >\n        <div class=\"form-ctrl__label-wrap\">\n          {placeholder && hasValue && rtl && (\n            <span class=\"form-ctrl__label-placeholder\">{placeholder} / </span>\n          )}\n          <span class=\"form-ctrl__labeltext\">\n            {label && label}\n            {!label && hasLabelSlot && <slot name=\"label\" />}\n          </span>\n          {placeholder && hasValue && !rtl && (\n            <span class=\"form-ctrl__label-placeholder\"> / {placeholder}</span>\n          )}\n        </div>\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength\n              ? maxlength - charCount + ' left'\n              : charCount + ' characters'}\n          </span>\n        )}\n      </label>\n    );\n  }\n};\n\nexport const FormControlWrap: FunctionalComponent<FormControlWrapProps> = (\n  props: FormControlWrapProps,\n  children\n) => {\n  const {\n    rtl,\n    floatLabel,\n    label,\n    moreId,\n    helperEndId,\n    type,\n    hasHelperSlot,\n    showInlineError,\n    errorMessage,\n    hasHelperEndSlot,\n  } = props;\n\n  const MainTag = hasHelperEndSlot ? 'nano-resize-observe' : 'div';\n\n  return (\n    <MainTag\n      states=\"350w has-enough-width\"\n      class={{\n        'has-label': label !== null && !floatLabel,\n        'has-float-label': label !== null && floatLabel,\n        'has-helper-end': hasHelperEndSlot,\n        rtl,\n        'form-ctrl': true,\n      }}\n    >\n      <div class=\"form-ctrl__wrapper\">\n        {!floatLabel ? renderLabel({ ...props }) : ''}\n        <div\n          class={{\n            'form-ctrl__input': true,\n            'form-ctrl__textarea': type === 'textarea',\n          }}\n        >\n          {floatLabel && renderLabel({ ...props, rtl })}\n          {children}\n        </div>\n        {showInlineError || hasHelperSlot ? (\n          <div class=\"form-ctrl__more\" id={moreId}>\n            {!!showInlineError ? (\n              <div class=\"form-ctrl__error\" aria-live=\"polite\">\n                {errorMessage}\n              </div>\n            ) : (\n              ''\n            )}\n            <div class=\"form-ctrl__helper\">\n              <slot name=\"helper\" />\n            </div>\n          </div>\n        ) : (\n          ''\n        )}\n      </div>\n      {hasHelperEndSlot ? (\n        <div class=\"form-ctrl__helper-end\" id={helperEndId}>\n          <slot name=\"helper-end\" />\n        </div>\n      ) : (\n        ''\n      )}\n    </MainTag>\n  );\n};\n\nexport const FormControl: FunctionalComponent<FormControlProps> = (\n  props: FormControlProps,\n  children\n) => {\n  const {\n    clearControl,\n    onClearText,\n    readonly,\n    disabled,\n    control,\n    ref,\n    endSlot,\n    endValueSlot,\n    startSlot,\n  } = props;\n  const clickThrough = () => {\n    control.setFocus();\n  };\n\n  return (\n    <div\n      class=\"form-ctrl__input-wrap\"\n      ref={(el) => {\n        if (ref) ref(el);\n      }}\n    >\n      <span class=\"form-ctrl__slot-start\">\n        <slot name=\"start\" />\n        {startSlot}\n      </span>\n      {children}\n      {clearControl && !readonly && !disabled && (\n        <button\n          type=\"button\"\n          class=\"icon form-ctrl__clear-btn\"\n          tabindex=\"-1\"\n          onTouchStart={onClearText}\n          onMouseDown={onClearText}\n        >\n          <nano-icon name=\"light/times\"></nano-icon>\n        </button>\n      )}\n      <span class=\"form-ctrl__slot-value-end\" onClick={clickThrough}>\n        <slot name=\"value-end\" />\n        {endValueSlot}\n      </span>\n      <span class=\"form-ctrl__slot-end\">\n        <slot name=\"end\" />\n        {endSlot}\n      </span>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"form-control.js","sourceRoot":"","sources":["../../../src/components/form-control/form-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport type { TextFieldTypes } from '../../interface';\n\ninterface FormControlWrapProps {\n  rtl: boolean;\n  floatLabel: boolean;\n  labelId: string;\n  label: string;\n  moreId: string;\n  helperEndId: string;\n  type?: TextFieldTypes;\n  showInlineError: boolean;\n  hasHelperSlot: boolean;\n  errorMessage: string;\n  controlId: string;\n  hasLabelSlot: boolean;\n  hideLabel: boolean;\n  placeholder: string;\n  hasValue: boolean;\n  showCharCount?: boolean;\n  maxlength?: number;\n  charCount?: number;\n  hasHelperEndSlot?: boolean;\n}\n\ninterface FormControlProps {\n  clearControl: boolean;\n  onClearText?: () => void;\n  readonly: boolean;\n  disabled: boolean;\n  control: HTMLNanoInputElement | HTMLNanoSelectElement;\n  ref?: (elm?: HTMLElement) => void;\n  endSlot?: VNode;\n  endValueSlot?: VNode;\n  startSlot?: VNode;\n}\n\ninterface LabelProps extends FormControlWrapProps {\n  rtl: boolean;\n}\n\nconst renderLabel = ({\n  label,\n  hasLabelSlot,\n  controlId,\n  labelId,\n  floatLabel,\n  placeholder,\n  hideLabel,\n  hasValue,\n  rtl,\n  showCharCount,\n  maxlength,\n  charCount,\n}: LabelProps) => {\n  if (!label && !hasLabelSlot) return;\n  if (floatLabel) {\n    return (\n      <label class=\"form-ctrl__float-label\" htmlFor={controlId} id={labelId}>\n        {label && label}\n        {!label && hasLabelSlot && <slot name=\"label\" />}\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength ? ` ${charCount}/${maxlength}` : ` ${charCount}`}\n          </span>\n        )}\n      </label>\n    );\n  } else {\n    return (\n      <label\n        class={{ 'form-ctrl__label': true, 'visually-hide': hideLabel }}\n        htmlFor={controlId}\n        id={labelId}\n      >\n        <div class=\"form-ctrl__label-wrap\">\n          {placeholder && hasValue && rtl && (\n            <span class=\"form-ctrl__label-placeholder\">{placeholder} / </span>\n          )}\n          <span class=\"form-ctrl__labeltext\">\n            {label && label}\n            {!label && hasLabelSlot && <slot name=\"label\" />}\n          </span>\n          {placeholder && hasValue && !rtl && (\n            <span class=\"form-ctrl__label-placeholder\"> / {placeholder}</span>\n          )}\n        </div>\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength\n              ? maxlength - charCount + ' left'\n              : charCount + ' characters'}\n          </span>\n        )}\n      </label>\n    );\n  }\n};\n\nexport const FormControlWrap: FunctionalComponent<FormControlWrapProps> = (\n  props: FormControlWrapProps,\n  children\n) => {\n  const {\n    rtl,\n    floatLabel,\n    label,\n    moreId,\n    helperEndId,\n    type,\n    hasHelperSlot,\n    showInlineError,\n    errorMessage,\n    hasHelperEndSlot,\n  } = props;\n\n  return (\n    <div\n      class={{\n        'has-label': label !== null && !floatLabel,\n        'has-float-label': label !== null && floatLabel,\n        'has-helper-end': hasHelperEndSlot,\n        rtl,\n        'form-ctrl': true,\n      }}\n    >\n      <div class=\"form-ctrl__wrapper\">\n        {!floatLabel ? renderLabel({ ...props }) : ''}\n        <div\n          class={{\n            'form-ctrl__input': true,\n            'form-ctrl__textarea': type === 'textarea',\n          }}\n        >\n          {floatLabel && renderLabel({ ...props, rtl })}\n          {children}\n        </div>\n        {showInlineError || hasHelperSlot ? (\n          <div class=\"form-ctrl__more\" id={moreId}>\n            {!!showInlineError ? (\n              <div class=\"form-ctrl__error\" aria-live=\"polite\">\n                {errorMessage}\n              </div>\n            ) : (\n              ''\n            )}\n            <div class=\"form-ctrl__helper\">\n              <slot name=\"helper\" />\n            </div>\n          </div>\n        ) : (\n          ''\n        )}\n      </div>\n      {hasHelperEndSlot ? (\n        <div class=\"form-ctrl__helper-end\" id={helperEndId}>\n          <slot name=\"helper-end\" />\n        </div>\n      ) : (\n        ''\n      )}\n    </div>\n  );\n};\n\nexport const FormControl: FunctionalComponent<FormControlProps> = (\n  props: FormControlProps,\n  children\n) => {\n  const {\n    clearControl,\n    onClearText,\n    readonly,\n    disabled,\n    control,\n    ref,\n    endSlot,\n    endValueSlot,\n    startSlot,\n  } = props;\n  const clickThrough = () => {\n    control.setFocus();\n  };\n\n  return (\n    <div\n      class=\"form-ctrl__input-wrap\"\n      ref={(el) => {\n        if (ref) ref(el);\n      }}\n    >\n      <span class=\"form-ctrl__slot-start\">\n        <slot name=\"start\" />\n        {startSlot}\n      </span>\n      {children}\n      {clearControl && !readonly && !disabled && (\n        <button\n          type=\"button\"\n          class=\"icon form-ctrl__clear-btn\"\n          tabindex=\"-1\"\n          onTouchStart={onClearText}\n          onMouseDown={onClearText}\n        >\n          <nano-icon name=\"light/times\"></nano-icon>\n        </button>\n      )}\n      <span class=\"form-ctrl__slot-value-end\" onClick={clickThrough}>\n        <slot name=\"value-end\" />\n        {endValueSlot}\n      </span>\n      <span class=\"form-ctrl__slot-end\">\n        <slot name=\"end\" />\n        {endSlot}\n      </span>\n    </div>\n  );\n};\n"]}

package/dist/collection/components/grid/grid-item.js

@@ -2,152 +2,27 @@
  * Web Components for Nanopore digital Web Apps
  */
 import { h } from '@stencil/core';
-const STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];
+// import type { GridSizes } from '../../interface';
+// const STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];
 /**
+ * @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 class GridItem {
-  constructor() {
-    this.currGridSizes = [null];
-    this.gridStates = '';
-  }
-  updateGridClasses() {
-    this.applyChildrenClasses();
-  }
   /**
-   * Called by parent grid to trigger new classes
-   * @internal
+   * 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
    */
-  async changeBP(newGridSizes) {
-    if (this.currGridSizes === newGridSizes)
-      return;
-    this.currGridSizes = newGridSizes;
-    if (!this.gridStates.length)
-      return;
-    this.applyChildrenClasses();
-  }
-  applyChildrenClasses() {
-    let stateArr = [''];
-    let itemState = '';
-    let found;
-    let classes;
-    // item states come in 4 possible flavours at every breakpoint. E.g.
-    // xl-col-span-2
-    // xl-col-start-2
-    // xl-row-span-2
-    // xl-row-start-2
-    // clear all previous grid state classnames
-    classes = this.el.className
-      .split(' ')
-      .filter((c) => !c.startsWith('nano-grid-'));
-    this.el.className = classes.join(' ').trim();
-    // get all potential states this element can have
-    const itemStates = this.gridStates.split(' ');
-    // loop through all potential state options: col & row span & start
-    STATEOPTS.forEach((stateOpt) => {
-      // reset found flag
-      found = false;
-      // loop through all the current valid breakpoints / sizes backwards because
-      // we only care about the item's state at the largest current breakpoint.
-      this.currGridSizes
-        .slice()
-        .reverse()
-        .forEach((size) => {
-        if (found || !size)
-          return;
-        found = itemStates.find((state) => state.indexOf(`${size.size}-${stateOpt}`) === 0);
-        // found a state at this current size. apply class.
-        if (found) {
-          // clear previous grid state classname
-          classes = this.el.className
-            .split(' ')
-            .filter((c) => !c.includes('nano-grid-${stateOpt}'));
-          this.el.className = classes.join(' ').trim();
-          stateArr = found.split('-');
-          // remove the size of the state
-          stateArr.shift();
-          itemState = stateArr.join('-');
-          // add new class
-          this.el.classList.add(`nano-grid-${itemState}`);
-        }
-      });
-    });
-  }
   render() {
     return h("slot", null);
   }
   static get is() { return "nano-grid-item"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["grid-item.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["grid-item.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "gridStates": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "How to position this item within it's parent grid at different break points. Examples:\nxl-col-span-2\nl-col-start-2\nxxl-row-span-2\nm-row-start-2"
-        },
-        "getter": false,
-        "setter": false,
-        "attribute": "grid-states",
-        "reflect": false,
-        "defaultValue": "''"
-      }
-    };
-  }
-  static get methods() {
-    return {
-      "changeBP": {
-        "complexType": {
-          "signature": "(newGridSizes: GridSizes[]) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "GridSizes": {
-              "location": "import",
-              "path": "../../interface"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Called by parent grid to trigger new classes",
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "gridStates",
-        "methodName": "updateGridClasses"
-      }];
-  }
+  static get styles() { return ":host { display: inline-block; }"; }
 }
 //# sourceMappingURL=grid-item.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"grid-item.js","sourceRoot":"","sources":["../../../src/components/grid/grid-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Method, Watch } from '@stencil/core';\nimport type { GridSizes } from '../../interface';\n\nconst STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];\n\n/**\n * Grid items to be used with [grid](/story/nano-components-grid) elements\n */\n@Component({\n  tag: 'nano-grid-item',\n  styleUrl: 'grid-item.scss',\n  shadow: true,\n})\nexport class GridItem {\n  private currGridSizes: GridSizes[] = [null];\n\n  @Element() private el: HTMLNanoGridItemElement;\n  /**\n   * How to position this item within it's parent grid at different break points. Examples:\n   * xl-col-span-2\n   * l-col-start-2\n   * xxl-row-span-2\n   * m-row-start-2\n   */\n  @Prop() gridStates: string = '';\n\n  @Watch('gridStates')\n  updateGridClasses() {\n    this.applyChildrenClasses();\n  }\n\n  /**\n   * Called by parent grid to trigger new classes\n   * @internal\n   */\n  @Method()\n  async changeBP(newGridSizes: GridSizes[]) {\n    if (this.currGridSizes === newGridSizes) return;\n    this.currGridSizes = newGridSizes;\n\n    if (!this.gridStates.length) return;\n    this.applyChildrenClasses();\n  }\n\n  private applyChildrenClasses() {\n    let stateArr: Array<string> = [''];\n    let itemState: string = '';\n    let found: any;\n    let classes: Array<string>;\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    // clear all previous grid state classnames\n    classes = this.el.className\n      .split(' ')\n      .filter((c) => !c.startsWith('nano-grid-'));\n    this.el.className = classes.join(' ').trim();\n\n    // get all potential states this element can have\n    const itemStates = this.gridStates.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.currGridSizes\n        .slice()\n        .reverse()\n        .forEach((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 = this.el.className\n              .split(' ')\n              .filter((c) => !c.includes('nano-grid-${stateOpt}'));\n            this.el.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            this.el.classList.add(`nano-grid-${itemState}`);\n          }\n        });\n    });\n  }\n\n  render() {\n    return <slot />;\n  }\n}\n"]}
+{"version":3,"file":"grid-item.js","sourceRoot":"","sources":["../../../src/components/grid/grid-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAC7C,oDAAoD;AAEpD,wEAAwE;AAExE;;;;;GAKG;AAMH,MAAM,OAAO,QAAQ;EACnB;;;;;;KAMG;EAEH,MAAM;IACJ,OAAO,eAAQ,CAAC;EAClB,CAAC;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n// import type { GridSizes } from '../../interface';\n\n// const STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];\n\n/**\n * @deprecated - you can now use `grid-states=\"...\"`\n * on any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.\n *\n * Grid items to be used with [grid](/story/nano-components-grid) elements\n */\n@Component({\n  tag: 'nano-grid-item',\n  styles: /* css */ `:host { display: inline-block; }`,\n  shadow: true,\n})\nexport class GridItem {\n  /**\n   * How to position this item within it's parent grid at different break points. Examples:\n   * xl-col-span-2\n   * l-col-start-2\n   * xxl-row-span-2\n   * m-row-start-2\n   */\n\n  render() {\n    return <slot />;\n  }\n}\n"]}

package/dist/collection/components/grid/grid.css

@@ -17,173 +17,26 @@
   */
   --grid-col-gap: var(--nano-spacing-medium, 16px);
   --grid-row-gap: var(--nano-spacing-medium, 16px);
-  --current-grid-size: "'grid size: sm'";
+  --current-grid-size: "grid size: s";
+  container-type: inline-size;
   display: block;
-  opacity: 0;
-  transition: 0.2s ease opacity;
-  max-width: 100%;
 }
 :host .grid {
-  /* autoprefixer: ignore next */
   display: grid;
-  /* autoprefixer: ignore next */
-  grid-gap: var(--grid-row-gap) var(--grid-col-gap);
+  gap: var(--grid-row-gap) var(--grid-col-gap);
   block-size: inherit;
   min-block-size: inherit;
 }
 
-:host(.ready) {
-  opacity: 1;
-}
-
-:host(.has-grid) .grid {
-  display: grid;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-start-1) {
-  grid-column-start: 1 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-start-1) {
-  grid-row-start: 1 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-span-1) {
-  grid-column-end: span 1 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-span-1) {
-  grid-row-end: span 1 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-start-2) {
-  grid-column-start: 2 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-start-2) {
-  grid-row-start: 2 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-span-2) {
-  grid-column-end: span 2 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-span-2) {
-  grid-row-end: span 2 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-start-3) {
-  grid-column-start: 3 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-start-3) {
-  grid-row-start: 3 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-span-3) {
-  grid-column-end: span 3 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-span-3) {
-  grid-row-end: span 3 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-start-4) {
-  grid-column-start: 4 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-start-4) {
-  grid-row-start: 4 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-span-4) {
-  grid-column-end: span 4 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-span-4) {
-  grid-row-end: span 4 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-start-5) {
-  grid-column-start: 5 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-start-5) {
-  grid-row-start: 5 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-span-5) {
-  grid-column-end: span 5 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-span-5) {
-  grid-row-end: span 5 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-start-6) {
-  grid-column-start: 6 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-start-6) {
-  grid-row-start: 6 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-span-6) {
-  grid-column-end: span 6 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-span-6) {
-  grid-row-end: span 6 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-start-7) {
-  grid-column-start: 7 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-start-7) {
-  grid-row-start: 7 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-span-7) {
-  grid-column-end: span 7 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-span-7) {
-  grid-row-end: span 7 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-start-8) {
-  grid-column-start: 8 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-start-8) {
-  grid-row-start: 8 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-span-8) {
-  grid-column-end: span 8 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-span-8) {
-  grid-row-end: span 8 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-start-9) {
-  grid-column-start: 9 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-start-9) {
-  grid-row-start: 9 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-span-9) {
-  grid-column-end: span 9 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-span-9) {
-  grid-row-end: span 9 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-start-10) {
-  grid-column-start: 10 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-start-10) {
-  grid-row-start: 10 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-span-10) {
-  grid-column-end: span 10 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-span-10) {
-  grid-row-end: span 10 !important;
-}
-
-:host([content-panel]:not([content-panel=false])) .grid {
-  grid-template-rows: auto 1fr;
-}
-
-:host([full-height]:not([full-height=false])) {
-  block-size: 100%;
-}
-:host([full-height]:not([full-height=false])) .grid {
-  grid-template-rows: 1fr;
-}
-
-:host([show-helper]:not([show-helper=false])) .grid {
+:host([show-helper]:not([show-helper=false])) {
   position: relative;
 }
-:host([show-helper]:not([show-helper=false])) .grid::after {
-  content: "";
+:host([show-helper]:not([show-helper=false])) .grid--helper {
   position: absolute;
   inset: 0;
   pointer-events: none;
-  background-image: repeating-linear-gradient(to right, rgba(126, 195, 241, 0.25), rgba(126, 195, 241, 0.25) var(--col-width), transparent var(--col-width), transparent var(--repeat-width));
-  background-size: calc(100% + var(--grid-col-gap)) 100%;
-  z-index: 100;
 }
-:host([show-helper]:not([show-helper=false])) .grid::before {
+:host([show-helper]:not([show-helper=false])) .grid--helper::before {
   content: var(--current-grid-size);
   font-size: 30px;
   position: absolute;
@@ -197,93 +50,7 @@
   z-index: 99;
   pointer-events: none;
 }
-
-:host(.nano-grid-1) {
-  --current-grid-size: "grid size: 1";
-  --col-width: calc(100% - var(--grid-col-gap));
-  --repeat-width: calc(100% / 1);
-}
-:host(.nano-grid-1) .grid {
-  grid-template-columns: repeat(1, minmax(var(--col-width), 1fr));
-}
-
-:host(.nano-grid-2) {
-  --current-grid-size: "grid size: 2";
-  --col-width: calc(50% - var(--grid-col-gap));
-  --repeat-width: calc(100% / 2);
-}
-:host(.nano-grid-2) .grid {
-  grid-template-columns: repeat(2, minmax(var(--col-width), 1fr));
-}
-
-:host(.nano-grid-3) {
-  --current-grid-size: "grid size: 3";
-  --col-width: calc(33.3333333333% - var(--grid-col-gap));
-  --repeat-width: calc(100% / 3);
-}
-:host(.nano-grid-3) .grid {
-  grid-template-columns: repeat(3, minmax(var(--col-width), 1fr));
-}
-
-:host(.nano-grid-4) {
-  --current-grid-size: "grid size: 4";
-  --col-width: calc(25% - var(--grid-col-gap));
-  --repeat-width: calc(100% / 4);
-}
-:host(.nano-grid-4) .grid {
-  grid-template-columns: repeat(4, minmax(var(--col-width), 1fr));
-}
-
-:host(.nano-grid-5) {
-  --current-grid-size: "grid size: 5";
-  --col-width: calc(20% - var(--grid-col-gap));
-  --repeat-width: calc(100% / 5);
-}
-:host(.nano-grid-5) .grid {
-  grid-template-columns: repeat(5, minmax(var(--col-width), 1fr));
-}
-
-:host(.nano-grid-6) {
-  --current-grid-size: "grid size: 6";
-  --col-width: calc(16.6666666667% - var(--grid-col-gap));
-  --repeat-width: calc(100% / 6);
-}
-:host(.nano-grid-6) .grid {
-  grid-template-columns: repeat(6, minmax(var(--col-width), 1fr));
-}
-
-:host(.nano-grid-7) {
-  --current-grid-size: "grid size: 7";
-  --col-width: calc(14.2857142857% - var(--grid-col-gap));
-  --repeat-width: calc(100% / 7);
-}
-:host(.nano-grid-7) .grid {
-  grid-template-columns: repeat(7, minmax(var(--col-width), 1fr));
-}
-
-:host(.nano-grid-8) {
-  --current-grid-size: "grid size: 8";
-  --col-width: calc(12.5% - var(--grid-col-gap));
-  --repeat-width: calc(100% / 8);
-}
-:host(.nano-grid-8) .grid {
-  grid-template-columns: repeat(8, minmax(var(--col-width), 1fr));
-}
-
-:host(.nano-grid-9) {
-  --current-grid-size: "grid size: 9";
-  --col-width: calc(11.1111111111% - var(--grid-col-gap));
-  --repeat-width: calc(100% / 9);
-}
-:host(.nano-grid-9) .grid {
-  grid-template-columns: repeat(9, minmax(var(--col-width), 1fr));
-}
-
-:host(.nano-grid-10) {
-  --current-grid-size: "grid size: 10";
-  --col-width: calc(10% - var(--grid-col-gap));
-  --repeat-width: calc(100% / 10);
-}
-:host(.nano-grid-10) .grid {
-  grid-template-columns: repeat(10, minmax(var(--col-width), 1fr));
+:host([show-helper]:not([show-helper=false])) .grid__helper-item {
+  display: none;
+  background: rgba(126, 195, 241, 0.25);
 }