@nanoporetech-digital/components 3.1.1 → 3.3.0

package/dist/collection/components/resize-observe/resize-observe.js.map

@@ -1 +1 @@
-{"version":3,"file":"resize-observe.js","sourceRoot":"","sources":["../../../src/components/resize-observe/resize-observe.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Host,\n  State,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  readTask,\n} from '@stencil/core';\nimport { debounce } from '../../utils/throttle';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n  h: Map<number, ResizeObserverState>;\n  w: Map<number, ResizeObserverState>;\n}\n\n/**\n * A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * @slot - Main slot for any content.\n */\n@Component({\n  tag: 'nano-resize-observe',\n  shadow: true,\n  styles: `:host { display: inline-block } div { height: 100%; }`,\n})\nexport class ResizeObserve implements ComponentInterface {\n  private ro: ResizeObserver;\n  private appliedStates: StateMaps;\n\n  @Element() host: HTMLNanoResizeObserveElement;\n  @State() currentWidth: number;\n  @State() currentHeight: number;\n  @State() classNames: string[] = [];\n\n  /** string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n   * Format: `states=\"800w, 300h class1 class2\"` */\n  @Prop() states: string;\n\n  /** A resize break point is switched on or off */\n  @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n  @Watch('currentHeight')\n  @Watch('currentWidth')\n  dimensionChanged() {\n    this.assessChanges();\n  }\n\n  @Watch('states')\n  statesChanged() {\n    if (!this.states) return;\n    if (!this.ro) this.attachRO();\n\n    const toBpDir = (bpDir: string) => {\n      const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n      return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n    };\n    this.appliedStates = { h: new Map(), w: new Map() };\n\n    // parse state string\n    this.states.split(',').map((st) => {\n      st = st.trim();\n      if (st.includes(' ')) {\n        const [key, ...classes] = st.split(' ');\n        const { bp, dir } = toBpDir(key);\n        this.appliedStates[dir as keyof StateMaps].set(bp, {\n          states: classes,\n          applied: false,\n        });\n      } else {\n        const { bp, dir } = toBpDir(st);\n        this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n      }\n    });\n  }\n\n  private assessChanges = () => {\n    if (!this.currentWidth && !this.currentHeight) return;\n    const changedStates: StateMaps = { h: new Map(), w: new Map() };\n    let hasChanged = false;\n\n    Object.keys(this.appliedStates).forEach((dimType) => {\n      let dim: number;\n      if (dimType === 'h') dim = this.currentHeight;\n      else dim = this.currentWidth;\n\n      this.appliedStates[dimType].forEach(\n        (state: ResizeObserverState, bp: number) => {\n          if (dim >= bp && state.applied === false) {\n            state.applied = true;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          } else if (dim < bp && state.applied === true) {\n            state.applied = false;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          }\n        }\n      );\n    });\n    if (hasChanged) this.applyChanges(changedStates);\n    else if (!this.classNames.includes('is-ready'))\n      this.classNames = ['is-ready'];\n  };\n\n  private applyChanges(changes: StateMaps) {\n    let classNames = [...this.classNames];\n    Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n      changes[dimType].forEach((state) => {\n        if (!state.states) return;\n        state.states.map((st) => {\n          if (state.applied) classNames.push(st);\n          else classNames = classNames.filter((cl) => cl !== st);\n        });\n      });\n    });\n    this.classNames = ['is-ready', ...classNames];\n    this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n  }\n\n  private toSimpleObj(stateMaps: StateMaps) {\n    const retObj = {};\n    Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n      stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n        retObj[bp + dimType] = state.applied;\n      });\n    });\n    return retObj;\n  }\n\n  private attachRO() {\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        this.currentWidth = entry.contentRect.width;\n        this.currentHeight = entry.contentRect.height;\n      }\n    });\n    this.ro.observe(this.host);\n  }\n\n  connectedCallback() {\n    this.assessChanges = debounce(this.assessChanges, 50);\n  }\n\n  componentDidLoad() {\n    if (!this.states) return;\n    if (!this.currentWidth || !this.currentHeight) {\n      readTask(() => {\n        const { width, height } = this.host.getBoundingClientRect();\n        this.currentWidth = width;\n        this.currentHeight = height;\n      });\n    }\n    this.statesChanged();\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [this.classNames.join(' ')]: true,\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"resize-observe.js","sourceRoot":"","sources":["../../../src/components/resize-observe/resize-observe.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Host,\n  State,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  readTask,\n} from '@stencil/core';\n// import { debounce } from '../../utils/throttle';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n  h: Map<number, ResizeObserverState>;\n  w: Map<number, ResizeObserverState>;\n}\n\n/**\n * A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * @slot - Main slot for any content.\n */\n@Component({\n  tag: 'nano-resize-observe',\n  styles: `nano-resize-observe { display: block }`,\n})\nexport class ResizeObserve implements ComponentInterface {\n  private ro: ResizeObserver;\n  private appliedStates: StateMaps;\n  private isReady = false;\n\n  @Element() host: HTMLNanoResizeObserveElement;\n  @State() currentWidth: number;\n  @State() currentHeight: number;\n  @State() classNames: string[] = [];\n\n  @Watch('classNames')\n  classNameChange() {\n    this.host.className = this.classNames.join(' ');\n    if (!this.isReady && this.classNames.includes('is-ready')) {\n      this.isReady = true;\n      this.nanoResizeObserverReady.emit();\n    }\n  }\n\n  /** string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n   * Format: `states=\"800w, 300h class1 class2\"` */\n  @Prop() states: string;\n\n  /** A resize break point is switched on or off */\n  @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n  /** Fires after the initial loading and assessment */\n  @Event() nanoResizeObserverReady!: EventEmitter<void>;\n\n  @Watch('currentHeight')\n  @Watch('currentWidth')\n  dimensionChanged() {\n    this.assessChanges();\n  }\n\n  @Watch('states')\n  statesChanged() {\n    if (!this.states) return;\n    if (!this.ro) this.attachRO();\n\n    const toBpDir = (bpDir: string) => {\n      const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n      return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n    };\n    this.appliedStates = { h: new Map(), w: new Map() };\n\n    // parse state string\n    this.states.split(',').map((st) => {\n      st = st.trim();\n      if (st.includes(' ')) {\n        const [key, ...classes] = st.split(' ');\n        const { bp, dir } = toBpDir(key);\n        this.appliedStates[dir as keyof StateMaps].set(bp, {\n          states: classes,\n          applied: false,\n        });\n      } else {\n        const { bp, dir } = toBpDir(st);\n        this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n      }\n    });\n  }\n\n  private assessChanges = () => {\n    if (!this.currentWidth && !this.currentHeight) return;\n    const changedStates: StateMaps = { h: new Map(), w: new Map() };\n    let hasChanged = false;\n\n    Object.keys(this.appliedStates).forEach((dimType) => {\n      let dim: number;\n      if (dimType === 'h') dim = this.currentHeight;\n      else dim = this.currentWidth;\n\n      this.appliedStates[dimType].forEach(\n        (state: ResizeObserverState, bp: number) => {\n          if (dim >= bp && state.applied === false) {\n            state.applied = true;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          } else if (dim < bp && state.applied === true) {\n            state.applied = false;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          }\n        }\n      );\n    });\n    if (hasChanged) this.applyChanges(changedStates);\n    else if (!this.classNames.includes('is-ready'))\n      this.classNames = ['is-ready'];\n  };\n\n  private applyChanges(changes: StateMaps) {\n    let classNames = [...this.classNames];\n    Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n      changes[dimType].forEach((state) => {\n        if (!state.states) return;\n        state.states.map((st) => {\n          if (state.applied) {\n            classNames.push(st);\n            classNames = classNames.filter((cl) => cl !== 'not-' + st);\n          } else {\n            classNames.push('not-' + st);\n            classNames = classNames.filter((cl) => cl !== st);\n          }\n        });\n      });\n    });\n    this.classNames = ['is-ready', ...classNames];\n    this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n  }\n\n  private toSimpleObj(stateMaps: StateMaps) {\n    const retObj = {};\n    Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n      stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n        retObj[bp + dimType] = state.applied;\n      });\n    });\n    return retObj;\n  }\n\n  private attachRO() {\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        this.currentWidth = entry.contentRect.width;\n        this.currentHeight = entry.contentRect.height;\n      }\n    });\n    this.ro.observe(this.host);\n  }\n\n  componentWillLoad() {\n    this.classNames = Array.from(this.host.classList);\n    if (!this.states) return;\n\n    if (!this.currentWidth || !this.currentHeight) {\n      readTask(() => {\n        const { width, height } = this.host.getBoundingClientRect();\n        this.currentWidth = width;\n        this.currentHeight = height;\n      });\n    }\n    this.statesChanged();\n    // set all class as 'not-' by deafult\n    this.applyChanges(this.appliedStates);\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/select/select.css

@@ -19,8 +19,6 @@
   display: block;
 }
 .form-ctrl.has-helper-end {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   gap: 1rem;
   opacity: 0;
@@ -29,9 +27,7 @@
   opacity: 1;
 }
 .form-ctrl.has-helper-end .form-ctrl__wrapper {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 100%;
-          flex: 1 1 100%;
+  flex: 1 1 100%;
 }
 .form-ctrl.has-helper-end .form-ctrl__helper-end {
   display: none;
@@ -74,31 +70,24 @@ label.visually-hide,
 
 .form-ctrl__float-label {
   padding-block: 0;
-  -webkit-padding-end: 0;
-          padding-inline-end: 0;
-  -webkit-padding-start: var(--padding-start);
-          padding-inline-start: var(--padding-start);
+  padding-inline-end: 0;
+  padding-inline-start: var(--padding-start);
   color: var(--label-color);
   position: absolute;
   font-size: 1.15em;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-  -webkit-transform-origin: top left;
-          transform-origin: top left;
+  transform: translateY(-50%);
+  transform-origin: top left;
   inset-block-start: 50%;
-  -webkit-transition: all 0.125s ease-in;
   transition: all 0.125s ease-in;
   opacity: 1;
 }
 :host(.has-focus) .form-ctrl__float-label, :host(.has-value) .form-ctrl__float-label {
-  -webkit-transform: translateY(-110%);
-          transform: translateY(-110%);
+  transform: translateY(-110%);
   font-size: 0.8em;
   opacity: 0.7;
 }
 .form-ctrl__float-label .form-ctrl__label-charcount {
   opacity: 0;
-  -webkit-transition: opacity 0.125s ease-in;
   transition: opacity 0.125s ease-in;
 }
 :host(.has-focus) .form-ctrl__float-label .form-ctrl__label-charcount, :host(.has-value) .form-ctrl__float-label .form-ctrl__label-charcount {
@@ -109,53 +98,40 @@ label.visually-hide,
 }
 :host(.has-focus) .form-ctrl__textarea .form-ctrl__float-label {
   inset-block-start: 0;
-  -webkit-transform: translateY(38%);
-          transform: translateY(38%);
+  transform: translateY(38%);
 }
 :host(.has-value) .form-ctrl__textarea .form-ctrl__float-label {
   inset-block-start: 0;
-  -webkit-transform: translateY(38%);
-          transform: translateY(38%);
+  transform: translateY(38%);
 }
 
 .form-ctrl__label {
   color: var(--label-color);
   font-size: var(--label-font-size);
-  -webkit-padding-after: var(--padding-bottom);
-          padding-block-end: var(--padding-bottom);
+  padding-block-end: var(--padding-bottom);
   line-height: 1;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 .form-ctrl__label .form-ctrl__label-wrap {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 .form-ctrl__label .form-ctrl__label-placeholder {
   margin-block: unset;
-  -webkit-margin-end: 5px;
-          margin-inline-end: 5px;
-  -webkit-margin-start: 0;
-          margin-inline-start: 0;
+  margin-inline-end: 5px;
+  margin-inline-start: 0;
   opacity: 0;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  -webkit-transition: 0.3s ease opacity;
   transition: 0.3s ease opacity;
   font-size: 0.9em;
 }
 .form-ctrl__label .form-ctrl__label-charcount {
   margin-block: unset;
-  -webkit-margin-end: 0;
-          margin-inline-end: 0;
-  -webkit-margin-start: auto;
-          margin-inline-start: auto;
+  margin-inline-end: 0;
+  margin-inline-start: auto;
   font-size: 0.9em;
   opacity: 0.5;
 }
@@ -173,7 +149,6 @@ label.visually-hide,
 .has-float-label .select__native-input,
 .has-float-label .input__native-ctrl {
   opacity: 0;
-  -webkit-transition: opacity 0.125s ease-in;
   transition: opacity 0.125s ease-in;
 }
 :host(.has-focus) .has-float-label .select__multi-input, :host(.has-value) .has-float-label .select__multi-input,
@@ -198,7 +173,6 @@ label.visually-hide,
   position: absolute;
   font-size: var(--invalid-msg-font-size);
   line-height: 1.2;
-  -webkit-transition: 0.3s ease-out opacity;
   transition: 0.3s ease-out opacity;
 }
 
@@ -211,9 +185,7 @@ label.visually-hide,
 }
 
 .form-ctrl__helper-end {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 30%;
-          flex: 1 1 30%;
+  flex: 1 1 30%;
   min-inline-size: 150px;
   font-size: var(--invalid-msg-font-size);
   color: var(--help-msg-color);
@@ -246,55 +218,39 @@ label.visually-hide,
   inline-size: 100%;
   padding: 0 !important;
   position: relative;
-  -webkit-box-flex: 1;
-      -ms-flex: 1 0 auto;
-          flex: 1 0 auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  flex: 1 0 auto;
   display: flex;
   background: var(--input-bg-color);
   border: var(--input-border-style);
   border-width: var(--input-border-width);
   font-size: var(--input-font-size);
-  -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
-          padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
+  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
 }
 :host(.has-focus) .form-ctrl__input {
   background: var(--input-bg-color--focus);
   border: var(--input-border-style--focus);
   border-width: var(--input-border-width);
-  -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
-          padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
+  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
 }
 :host(.is-invalid) .form-ctrl__input {
   background: var(--input-bg-color--invalid);
   border: var(--input-border-style--invalid);
   border-width: var(--input-border-width);
-  -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
-          border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
-  -webkit-padding-start: 0 !important;
-          padding-inline-start: 0 !important;
+  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
+  padding-inline-start: 0 !important;
 }
 :host(.is-invalid.has-focus) .form-ctrl__input {
   background: var(--input-bg-color--invalid);
   border: var(--input-border-style--invalid-focus);
   border-width: var(--input-border-width);
-  -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
-          border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
-  -webkit-padding-start: 0 !important;
-          padding-inline-start: 0 !important;
+  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
+  padding-inline-start: 0 !important;
 }
 
 .form-ctrl__input-wrap {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  align-items: stretch;
+  flex: 1;
   max-inline-size: 100%;
 }
 
@@ -310,12 +266,8 @@ label.visually-hide,
   outline: none;
   background-color: transparent;
   background-repeat: no-repeat;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
+  align-items: stretch;
   inline-size: auto;
 }
 
@@ -332,16 +284,10 @@ label.visually-hide,
 .form-ctrl__slot-value-end * {
   --nano-icon-size: 1.4em;
   padding-inline: unset;
-  -webkit-padding-start: var(--padding-start);
-          padding-inline-start: var(--padding-start);
-  -webkit-padding-end: var(--padding-end);
-          padding-inline-end: var(--padding-end);
+  padding-inline-start: var(--padding-start);
+  padding-inline-end: var(--padding-end);
   font-size: 1em;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
   block-size: 100%;
   z-index: 1;
@@ -368,11 +314,8 @@ label.visually-hide,
   opacity: 0;
   inline-size: 0;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   overflow: hidden;
 }
 :host(.is-invalid) .form-ctrl__clear-btn {
@@ -521,9 +464,7 @@ select {
   text-overflow: ellipsis;
   color: var(--input-text-color);
   display: inline-block;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
   width: 100%;
   max-width: 100%;
   max-height: 100%;
@@ -531,25 +472,18 @@ select {
   outline: none;
   background: transparent;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   margin: 0;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   resize: none;
   overflow: hidden;
   cursor: default;
   line-height: 2.5em;
-  min-height: 2.5em;
 }
 .has-float-label .select__native-input {
   line-height: 2.1em;
   min-height: 2.1em;
-  -webkit-padding-before: 1.4em;
-          padding-block-start: 1.4em;
-}
-.select__native-input::-moz-selection {
-  background: transparent;
+  padding-block-start: 1.4em;
 }
 .select__native-input::selection {
   background: transparent;
@@ -557,42 +491,6 @@ select {
 .select__native-input::-moz-selection {
   background: transparent;
 }
-.select__native-input::-webkit-input-placeholder {
-  color: var(--placeholder-color);
-  font-family: inherit;
-  font-style: var(--placeholder-font-style);
-  font-weight: var(--placeholder-font-weight);
-  opacity: var(--placeholder-opacity);
-  line-height: inherit;
-  min-height: initial;
-}
-.select__native-input::-moz-placeholder {
-  color: var(--placeholder-color);
-  font-family: inherit;
-  font-style: var(--placeholder-font-style);
-  font-weight: var(--placeholder-font-weight);
-  opacity: var(--placeholder-opacity);
-  line-height: inherit;
-  min-height: initial;
-}
-.select__native-input:-ms-input-placeholder {
-  color: var(--placeholder-color);
-  font-family: inherit;
-  font-style: var(--placeholder-font-style);
-  font-weight: var(--placeholder-font-weight);
-  opacity: var(--placeholder-opacity);
-  line-height: inherit;
-  min-height: initial;
-}
-.select__native-input::-ms-input-placeholder {
-  color: var(--placeholder-color);
-  font-family: inherit;
-  font-style: var(--placeholder-font-style);
-  font-weight: var(--placeholder-font-weight);
-  opacity: var(--placeholder-opacity);
-  line-height: inherit;
-  min-height: initial;
-}
 .select__native-input::placeholder {
   color: var(--placeholder-color);
   font-family: inherit;
@@ -614,8 +512,7 @@ select {
           appearance: none;
 }
 .select__native-input:invalid {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 .select__native-input::-ms-clear, .select__native-input::-ms-reveal {
   display: none;
@@ -629,24 +526,11 @@ select {
   padding-block: var(--padding-top) var(--padding-bottom);
   white-space: pre-wrap;
 }
-.form-ctrl__textarea .select__native-input::-webkit-input-placeholder {
-  line-height: 1.5em;
-}
-.form-ctrl__textarea .select__native-input::-moz-placeholder {
-  line-height: 1.5em;
-}
-.form-ctrl__textarea .select__native-input:-ms-input-placeholder {
-  line-height: 1.5em;
-}
-.form-ctrl__textarea .select__native-input::-ms-input-placeholder {
-  line-height: 1.5em;
-}
 .form-ctrl__textarea .select__native-input::placeholder {
   line-height: 1.5em;
 }
 .has-float-label.textarea .select__native-input {
-  -webkit-padding-before: 1.8em;
-          padding-block-start: 1.8em;
+  padding-block-start: 1.8em;
 }
 :host(.masked) .select__native-input {
   opacity: 0;
@@ -677,27 +561,16 @@ select {
 }
 
 .select__multi-wrap {
-  -webkit-padding-before: 0;
-          padding-block-start: 0;
-  -webkit-padding-end: 0;
-          padding-inline-end: 0;
-  -webkit-padding-after: var(--padding-bottom);
-          padding-block-end: var(--padding-bottom);
-  -webkit-padding-start: 0;
-          padding-inline-start: 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  padding-block: 0 var(--padding-bottom);
+  padding-inline: 0 0;
   display: flex;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex: 1;
+  flex-wrap: wrap;
   overflow: hidden;
+  align-items: flex-start;
 }
 :host(.has-float-label) .select__multi-wrap {
-  -webkit-padding-before: 1em;
-          padding-block-start: 1em;
+  padding-block-start: 1em;
 }
 .select__multi-input {
   font-family: inherit;
@@ -712,71 +585,51 @@ select {
   text-align: inherit;
   white-space: inherit;
   color: inherit;
-  -webkit-padding-before: var(--padding-top);
-          padding-block-start: var(--padding-top);
-  -webkit-padding-end: var(--padding-end);
-          padding-inline-end: var(--padding-end);
-  -webkit-padding-after: 0;
-          padding-block-end: 0;
-  -webkit-padding-start: var(--padding-start);
-          padding-inline-start: var(--padding-start);
+  padding-inline: var(--padding-start) var(--padding-end);
+  padding-block: var(--padding-bottom) 0;
   min-width: 50px;
   width: 100%;
   max-height: 100%;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   border: 0;
   outline: none;
   display: inline-block;
   background: transparent;
-  -webkit-box-flex: 0;
-      -ms-flex: 0;
-          flex: 0;
+  flex: 0;
   position: relative;
-  min-height: calc(2.5em - var(--padding-bottom));
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
+  line-height: calc(2.5em - var(--padding-bottom));
+  height: calc(2.5em - var(--padding-bottom));
 }
 .select__multi-input:last-child {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
 }
 .select__multi-value {
-  -webkit-margin-before: var(--padding-bottom);
-          margin-block-start: var(--padding-bottom);
-  -webkit-margin-start: var(--padding-start);
-          margin-inline-start: var(--padding-start);
-  -webkit-margin-end: -3px;
-          margin-inline-end: -3px;
+  margin-block: var(--padding-bottom) 0;
+  margin-inline: var(--padding-start) -3px;
   background: rgba(var(--multi-input-value-bg), 0.8);
   color: var(--multi-input-value-text-color);
   border: 1px solid;
   border-color: var(--multi-input-value-border);
   padding: 0.35em 0.5em;
-  line-height: 1;
   max-width: 100%;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   font-size: var(--input-font-size);
   letter-spacing: 1px;
+  max-height: calc(2.5em - 8px);
 }
 .select__multi-value span {
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 100%;
   overflow: hidden;
-  line-height: 1.2;
+  line-height: 1;
 }
 .select__multi-value-remove {
   background-position: center;
-  -webkit-padding-start: 0.5em;
-          padding-inline-start: 0.5em;
+  padding-inline-start: 0.5em;
   margin: 0;
   color: inherit;
   border: 0;
@@ -784,14 +637,9 @@ select {
   background-color: transparent;
   background-repeat: no-repeat;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   inset-block-start: 0;
   font-size: 1em;
 }
@@ -803,13 +651,11 @@ select {
   width: calc(100% - (1em + var(--padding-start) * 2));
 }
 :host(.has-focus.has-multiple) .form-ctrl__float-label {
-  -webkit-transform: translateY(-110%);
-          transform: translateY(-110%);
+  transform: translateY(-110%);
   font-size: 0.8em;
 }
 :host(.has-value.has-multiple) .form-ctrl__float-label {
-  -webkit-transform: translateY(21%);
-          transform: translateY(21%);
+  transform: translateY(21%);
   inset-block-start: 0;
 }
 

package/dist/collection/components/skeleton/skeleton.css

@@ -27,8 +27,6 @@
 }
 
 .skeleton {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   min-inline-size: 100%;
   min-block-size: 100%;
@@ -37,29 +35,16 @@
 }
 
 .skeleton__indicator {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  flex: 1 1 auto;
   background: var(--color);
   border-radius: inherit;
   line-height: inherit;
 }
 
 .skeleton.animate .skeleton__indicator {
-  background: -webkit-gradient(linear, right top, left top, from(var(--tint)), color-stop(var(--color)), color-stop(var(--color)), to(var(--tint)));
   background: linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));
   background-size: 400% 100%;
-  -webkit-animation: loader 6s ease-in-out infinite;
-          animation: loader 6s ease-in-out infinite;
-}
-
-@-webkit-keyframes loader {
-  0% {
-    background-position: 200% 0;
-  }
-  to {
-    background-position: -200% 0;
-  }
+  animation: loader 6s ease-in-out infinite;
 }
 
 @keyframes loader {

package/dist/collection/components/slides/slide.css

@@ -11,26 +11,17 @@
   display: none !important;
 }
 :host {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   position: relative;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
   inline-size: 100%;
   min-block-size: 100%;
   font-size: 18px;
   text-align: center;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   overflow: hidden;
-  -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
   opacity: 0;
 }