@roadtrip/components 3.11.0 → 3.11.1

package/dist/cjs/road-spinner.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-spinner.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,2xBAA2xB;;MCOjyB,OAAO;;;gBAKqD,OAAO;iBAKZ,SAAS;;EAEzE,MAAM;IACJ,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,oBAAoB,IAAI,CAAC,IAAI,EAAE,GAAG,SAAS,CAAC;IACxF,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,kCAAkC,IAAI,CAAC,KAAK,EAAE,GAAG,gBAAgB,CAAC;IAG/G,QACEA,iBAAK,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,OAAO,EAAC,aAAa,IAC/CA,oBAAQ,KAAK,EAAE,GAAG,UAAU,EAAE,EAAE,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAU,CAC5D,EACN;GACH;;;;;;","names":["h"],"sources":["./src/components/spinner/spinner.css?tag=road-spinner&encapsulation=shadow","./src/components/spinner/spinner.tsx"],"sourcesContent":["/*\n * Spinner\n *\n * Index\n * - Spinner\n * - Circle\n * - Animation\n */\n\n:host {\n  display: block;\n}\n\n/* SPINNER\n -------------------- */\n\n.spinner {\n  transform-origin: center;\n  animation: road-rotate 2s linear infinite;\n}\n\n.spinner.spinner--small{\n  width: 1rem;\n  height: 1rem;\n}\n\n.spinner.spinner--medium{\n  width: 2rem;\n  height: 2rem;\n}\n\n.spinner.spinner--large {\n  width: 3rem;\n  height: 3rem;\n}\n\n.spinner.spinner--xl {\n  width: 8rem;\n  height: 8rem;\n}\n\n/* CIRCLE\n -------------------- */\n\n.spinner-circle {\n  animation: road-dash 1.5s ease-in-out infinite;\n  fill: none;\n  stroke: var(--road-primary);\n  stroke-width: 3;\n  stroke-dasharray: 1, 200;\n  stroke-dashoffset: 0;\n  stroke-linecap: round;\n}\n\n.spinner-circle.spinner-circle--dark {\n  stroke: var(--road-grey-0);\n}\n\n.spinner-circle.spinner-circle--light {\n  stroke: var(--road-grey-90);\n}\n\n/* ANIMATION\n -------------------- */\n\n@keyframes road-rotate {\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes road-dash {\n\n  0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n\n  50% {\n    stroke-dasharray: 90, 200;\n    stroke-dashoffset: -35px;\n  }\n\n  100% {\n    stroke-dashoffset: -125px;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'road-spinner',\n  styleUrl: 'spinner.css',\n  shadow: true,\n})\nexport class Spinner {\n\n  /**\n    * The button size.\n    */\n   @Prop({ reflect: true }) size?: 'small' | 'medium' | 'large' | 'xl' = 'large';\n\n   /**\n    * The color spinner.\n    */\n    @Prop({ reflect: true }) color?: 'default' | 'light' | 'dark' = 'default';\n\n    render() {\n      const sizeClass = this.size !== undefined ? `spinner spinner--${this.size}` : 'spinner';\n      const colorClass = this.size !== undefined ? `spinner-circle spinner-circle--${this.color}` : 'spinner-circle';\n\n\n      return (\n        <svg class={`${sizeClass}`} viewBox=\"25 25 50 50\">\n          <circle class={`${colorClass}`} cx=\"50\" cy=\"50\" r=\"20\"></circle>\n        </svg>\n      );\n    }\n\n}\n"],"version":3}
+{"file":"road-spinner.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,2xBAA2xB;;MCOjyB,OAAO;;;gBAKqD,OAAO;iBAKZ,SAAS;;EAEzE,MAAM;IACJ,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,oBAAoB,IAAI,CAAC,IAAI,EAAE,GAAG,SAAS,CAAC;IACxF,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,kCAAkC,IAAI,CAAC,KAAK,EAAE,GAAG,gBAAgB,CAAC;IAG/G,QACEA,iBAAK,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,OAAO,EAAC,aAAa,IAC/CA,oBAAQ,KAAK,EAAE,GAAG,UAAU,EAAE,EAAE,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAU,CAC5D,EACN;GACH;;;;;;","names":["h"],"sources":["src/components/spinner/spinner.css?tag=road-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"sourcesContent":["/*\n * Spinner\n *\n * Index\n * - Spinner\n * - Circle\n * - Animation\n */\n\n:host {\n  display: block;\n}\n\n/* SPINNER\n -------------------- */\n\n.spinner {\n  transform-origin: center;\n  animation: road-rotate 2s linear infinite;\n}\n\n.spinner.spinner--small{\n  width: 1rem;\n  height: 1rem;\n}\n\n.spinner.spinner--medium{\n  width: 2rem;\n  height: 2rem;\n}\n\n.spinner.spinner--large {\n  width: 3rem;\n  height: 3rem;\n}\n\n.spinner.spinner--xl {\n  width: 8rem;\n  height: 8rem;\n}\n\n/* CIRCLE\n -------------------- */\n\n.spinner-circle {\n  animation: road-dash 1.5s ease-in-out infinite;\n  fill: none;\n  stroke: var(--road-primary);\n  stroke-width: 3;\n  stroke-dasharray: 1, 200;\n  stroke-dashoffset: 0;\n  stroke-linecap: round;\n}\n\n.spinner-circle.spinner-circle--dark {\n  stroke: var(--road-grey-0);\n}\n\n.spinner-circle.spinner-circle--light {\n  stroke: var(--road-grey-90);\n}\n\n/* ANIMATION\n -------------------- */\n\n@keyframes road-rotate {\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes road-dash {\n\n  0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n\n  50% {\n    stroke-dasharray: 90, 200;\n    stroke-dashoffset: -35px;\n  }\n\n  100% {\n    stroke-dashoffset: -125px;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'road-spinner',\n  styleUrl: 'spinner.css',\n  shadow: true,\n})\nexport class Spinner {\n\n  /**\n    * The button size.\n    */\n   @Prop({ reflect: true }) size?: 'small' | 'medium' | 'large' | 'xl' = 'large';\n\n   /**\n    * The color spinner.\n    */\n    @Prop({ reflect: true }) color?: 'default' | 'light' | 'dark' = 'default';\n\n    render() {\n      const sizeClass = this.size !== undefined ? `spinner spinner--${this.size}` : 'spinner';\n      const colorClass = this.size !== undefined ? `spinner-circle spinner-circle--${this.color}` : 'spinner-circle';\n\n\n      return (\n        <svg class={`${sizeClass}`} viewBox=\"25 25 50 50\">\n          <circle class={`${colorClass}`} cx=\"50\" cy=\"50\" r=\"20\"></circle>\n        </svg>\n      );\n    }\n\n}\n"],"version":3}

package/dist/cjs/road-switch.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e4bd5b5f.js');
-require('./polyfill-9453e116.js');
+const index = require('./index-4fdb2a28.js');
+require('./polyfill-b1fff766.js');
 
 const switchCss = ".sc-road-switch-h{--switch-lever-width:4.5rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);font-size:1rem;color:var(--road-grey-900)}.form-switch-input.sc-road-switch{position:absolute;z-index:-1;opacity:0}.form-switch-label.sc-road-switch{display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-switch-lever.sc-road-switch{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;width:var(--switch-lever-width);height:2rem;padding:0.5rem 0.625rem;margin-right:0.75rem;font-size:0.625rem;font-weight:700;line-height:1.6;content:\"\";background:var(--road-grey-400);border:0.125rem solid transparent;border-radius:1.125rem;transition:background 0.2s ease-in-out}.form-switch-lever.sc-road-switch::before{font-size:0.625rem;font-weight:700;color:var(--road-grey-000);text-transform:uppercase;content:attr(data-off)}.form-switch-lever.sc-road-switch::after{position:absolute;top:0.0625rem;left:0.0625rem;display:block;width:1.625rem;height:1.625rem;content:\"\";background:var(--road-grey-000);border-radius:50%;box-shadow:0 0.125rem 0.125rem rgba(0, 0, 0, 0.1);transition:transform 0.2s ease-in-out}.form-switch-input.sc-road-switch:checked~.form-switch-label.sc-road-switch .form-switch-lever.sc-road-switch{justify-content:flex-start}.form-switch-input.sc-road-switch:checked~.form-switch-label.sc-road-switch .form-switch-lever.sc-road-switch::before{content:attr(data-on)}.form-switch-input.sc-road-switch:checked~.form-switch-label.sc-road-switch .form-switch-lever.sc-road-switch::after{transform:translateX(calc(var(--switch-lever-width) - 2rem))}.form-switch-input.focus-visible.sc-road-switch~.form-switch-label.sc-road-switch .form-switch-lever.sc-road-switch{box-shadow:0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700)}.form-switch-input.sc-road-switch:checked~.form-switch-secondary.sc-road-switch .form-switch-lever.sc-road-switch{background:var(--road-primary-500)}.form-switch-input.sc-road-switch:checked~.form-switch-secondary.sc-road-switch .form-switch-lever.sc-road-switch::before{color:var(--road-primary-contrast)}.form-switch-input.sc-road-switch:checked~.form-switch-info.sc-road-switch .form-switch-lever.sc-road-switch{background:var(--road-info-default)}.form-switch-input.sc-road-switch:checked~.form-switch-info.sc-road-switch .form-switch-lever.sc-road-switch::before{color:var(--road-info-contrast)}.form-switch-input.sc-road-switch:checked~.form-switch-success.sc-road-switch .form-switch-lever.sc-road-switch{background:var(--road-success-default)}.form-switch-input.sc-road-switch:checked~.form-switch-success.sc-road-switch .form-switch-lever.sc-road-switch::before{color:var(--road-success-contrast)}.form-switch-input.sc-road-switch:checked~.form-switch-warning.sc-road-switch .form-switch-lever.sc-road-switch{background:var(--road-warning-default)}.form-switch-input.sc-road-switch:checked~.form-switch-warning.sc-road-switch .form-switch-lever.sc-road-switch::before{color:var(--road-warning-contrast)}.form-switch-input.sc-road-switch:checked~.form-switch-danger.sc-road-switch .form-switch-lever.sc-road-switch{background:var(--road-danger-default)}.form-switch-input.sc-road-switch:checked~.form-switch-danger.sc-road-switch .form-switch-lever.sc-road-switch::before{color:var(--road-danger-contrast)}.form-switch-right.sc-road-switch{margin-right:0;margin-left:0.75rem}.form-switch-spaced.sc-road-switch{display:flex;justify-content:space-between}";
 

package/dist/cjs/road-switch.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-switch.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,k/GAAk/G;;MCUv/G,MAAM;;;;;;;;;IAgGT,YAAO,GAAG;MAChB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;KAC9B,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;oBAvGyB,eAAe,SAAS,EAAE,EAAE;gBAKhC,IAAI,CAAC,QAAQ;mBAKD,KAAK;oBAKrB,KAAK;iBAKA,GAAG,IAAI,CAAC,QAAQ,QAAQ;iBAKD,WAAW;wBAK1B,KAAK;oBAKT,KAAK;iBAKT,IAAI;cAKP,KAAK;eAKJ,IAAI;;EA8B1B,cAAc,CAAC,SAAkB;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;IACH,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;GACJ;EAgBD,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IACzC,MAAM,SAAS,GAAGA,mBAAO,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAS,CAAC;IAC7G,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,cAAc,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAC/E,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,IAAI,oBAAoB,CAAC;IAC5D,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,GAAG,mBAAmB,GAAG,EAAE,CAAC;IAEtE,QACEA,QAACC,UAAI,QACHD,mBACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,kBACH,GAAG,IAAI,CAAC,OAAO,EAAE,mBAChB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,qBAC3B,OAAO,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB,EACFA,mBAAO,KAAK,EAAE,qBAAqB,aAAa,IAAI,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACrF,IAAI,CAAC,YAAY,IAAI,SAAS,EAC/BA,iBAAK,KAAK,EAAE,qBAAqB,gBAAgB,EAAE,cAAY,IAAI,CAAC,GAAG,aAAW,IAAI,CAAC,EAAE,GAAQ,EAChG,IAAI,CAAC,YAAY,GAAG,EAAE,GAAG,SAAS,CAC7B,CACH,EACP;GACH;;;;;AAGH,IAAI,SAAS,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["./src/components/switch/switch.css?tag=road-switch&encapsulation=scoped","./src/components/switch/switch.tsx"],"sourcesContent":["/*\n * Switch\n *\n * For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Switch\n * - Label\n * - Lever\n * - Feedback\n * - Position\n */\n\n/**\n * @prop --switch-lever-width: width of the lever\n */\n\n/* SWITCH\n -------------------- */\n\n:host {\n  --switch-lever-width: 4.5rem;\n\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n  font-family: var(--road-font, sans-serif);\n  font-size: 1rem;\n  color: var(--road-grey-900);\n}\n\n/**\n * Hide input\n */\n\n.form-switch-input {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n}\n\n/* LABEL\n -------------------- */\n\n.form-switch-label {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* LEVER\n -------------------- */\n\n.form-switch-lever {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: flex-end;\n  width: var(--switch-lever-width);\n  height: 2rem;\n  padding: 0.5rem 0.625rem;\n  margin-right: 0.75rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  line-height: 1.6;\n  content: \"\";\n  background: var(--road-grey-400);\n  border: 0.125rem solid transparent;\n  border-radius: 1.125rem;\n  transition: background 0.2s ease-in-out;\n}\n\n/**\n * Text in the switch widget\n */\n\n.form-switch-lever::before {\n  font-size: 0.625rem;\n  font-weight: 700;\n  color: var(--road-grey-000);\n  text-transform: uppercase;\n  content: attr(data-off);\n}\n\n/**\n * Round lever in the widget\n */\n\n.form-switch-lever::after {\n  position: absolute;\n  top: 0.0625rem;\n  left: 0.0625rem;\n  display: block;\n  width: 1.625rem;\n  height: 1.625rem;\n  content: \"\";\n  background: var(--road-grey-000);\n  border-radius: 50%;\n  box-shadow: 0 0.125rem 0.125rem rgba(0, 0, 0, 0.1);\n  transition: transform 0.2s ease-in-out;\n}\n\n/**\n * Checked state\n */\n\n.form-switch-input:checked ~ .form-switch-label .form-switch-lever {\n  justify-content: flex-start;\n}\n\n.form-switch-input:checked ~ .form-switch-label .form-switch-lever::before {\n  content: attr(data-on);\n}\n\n.form-switch-input:checked ~ .form-switch-label .form-switch-lever::after {\n  transform: translateX(calc(var(--switch-lever-width) - 2rem));\n}\n\n/**\n * Focus on Tab\n */\n\n.form-switch-input.focus-visible ~ .form-switch-label .form-switch-lever {\n  box-shadow: 0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700);\n}\n\n/* FEEDBACK\n -------------------- */\n\n/**\n * Secondary\n */\n\n.form-switch-input:checked ~ .form-switch-secondary .form-switch-lever {\n  background: var(--road-primary-500);\n}\n\n.form-switch-input:checked ~ .form-switch-secondary .form-switch-lever::before {\n  color: var(--road-primary-contrast);\n}\n\n/**\n * Info\n */\n\n.form-switch-input:checked ~ .form-switch-info .form-switch-lever {\n  background: var(--road-info-default);\n}\n\n.form-switch-input:checked ~ .form-switch-info .form-switch-lever::before {\n  color: var(--road-info-contrast);\n}\n\n/**\n * Success\n */\n\n.form-switch-input:checked ~ .form-switch-success .form-switch-lever {\n  background: var(--road-success-default);\n}\n\n.form-switch-input:checked ~ .form-switch-success .form-switch-lever::before {\n  color: var(--road-success-contrast);\n}\n\n/**\n * Warning\n */\n\n.form-switch-input:checked ~ .form-switch-warning .form-switch-lever {\n  background: var(--road-warning-default);\n}\n\n.form-switch-input:checked ~ .form-switch-warning .form-switch-lever::before {\n  color: var(--road-warning-contrast);\n}\n\n/**\n * Danger\n */\n\n.form-switch-input:checked ~ .form-switch-danger .form-switch-lever {\n  background: var(--road-danger-default);\n}\n\n.form-switch-input:checked ~ .form-switch-danger .form-switch-lever::before {\n  color: var(--road-danger-contrast);\n}\n\n/* POSITION\n -------------------- */\n\n.form-switch-right {\n  margin-right: 0;\n  margin-left: 0.75rem;\n}\n\n.form-switch-spaced {\n  display: flex;\n  justify-content: space-between;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport './../../utils/polyfill';\n\nimport { FeedbackColors } from '../../interface';\n\n@Component({\n  tag: 'road-switch',\n  styleUrl: 'switch.css',\n  scoped: true,\n})\nexport class Switch {\n\n  /**\n   * The id of switch\n   */\n  @Prop() switchId: string = `road-switch-${switchIds++}`;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.switchId;\n\n  /**\n   * If `true`, the switch is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * If `true`, the user cannot interact with the switch.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.switchId}-label`;\n\n  /**\n   * Set the color of alert. e.g. info, success, warning, danger\n   */\n  @Prop() color?: 'secondary' | FeedbackColors = 'secondary';\n\n  /**\n   * If `true`, the label is at left of the switch\n   */\n  @Prop() hasLeftLabel: boolean = false;\n\n  /**\n   * Add space between label and switch element\n   */\n  @Prop() isSpaced: boolean = false;\n\n  /**\n   * Value the form will get\n   */\n  @Prop() value: string = 'on';\n\n  /**\n   * Text display for \"`on`\" state in the switch lever\n   */\n  @Prop() on: string = \"yes\";\n\n  /**\n   * Text display for \"`off`\" state in the switch lever\n   */\n  @Prop() off: string = \"no\";\n\n  /**\n   * Emitted when the checked property has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    checked: boolean;\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    checked: boolean;\n    value: string | undefined | null\n  }>;\n\n  /**\n   * Emitted when the switch has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the switch loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  @Watch('checked')\n  checkedChanged(isChecked: boolean) {\n    this.roadchange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n    this.roadChange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n  }\n\n  private onClick = () => {\n    this.checked = !this.checked;\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadBlur.emit();\n    this.roadblur.emit();\n  };\n\n  render() {\n    const labelId = this.switchId + '-label';\n    const textLabel = <label class=\"form-switch-label\" id={labelId} htmlFor={this.switchId}>{this.label}</label>;\n    const colorClass = this.color !== undefined ? 'form-switch-' + this.color : '';\n    const isSpacedClass = this.isSpaced && 'form-switch-spaced';\n    const rightSwitchClass = this.hasLeftLabel ? 'form-switch-right' : '';\n\n    return (\n      <Host>\n        <input\n          class=\"form-switch-input\"\n          type=\"checkbox\"\n          id={this.switchId}\n          name={this.name}\n          checked={this.checked}\n          disabled={this.disabled}\n          value={this.value}\n          aria-checked={`${this.checked}`}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          onClick={this.onClick}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        />\n        <label class={`form-switch-label ${isSpacedClass} ${colorClass}`} htmlFor={this.switchId}>\n          {this.hasLeftLabel && textLabel}\n          <div class={`form-switch-lever ${rightSwitchClass}`} data-off={this.off} data-on={this.on}></div>\n          {this.hasLeftLabel ? '' : textLabel}\n        </label>\n      </Host>\n    );\n  }\n}\n\nlet switchIds = 0;\n"],"version":3}
+{"file":"road-switch.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,k/GAAk/G;;MCUv/G,MAAM;;;;;;;;;IAgGT,YAAO,GAAG;MAChB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;KAC9B,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;oBAvGyB,eAAe,SAAS,EAAE,EAAE;gBAKhC,IAAI,CAAC,QAAQ;mBAKD,KAAK;oBAKrB,KAAK;iBAKA,GAAG,IAAI,CAAC,QAAQ,QAAQ;iBAKD,WAAW;wBAK1B,KAAK;oBAKT,KAAK;iBAKT,IAAI;cAKP,KAAK;eAKJ,IAAI;;EA8B1B,cAAc,CAAC,SAAkB;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;IACH,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;GACJ;EAgBD,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IACzC,MAAM,SAAS,GAAGA,mBAAO,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAS,CAAC;IAC7G,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,cAAc,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAC/E,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,IAAI,oBAAoB,CAAC;IAC5D,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,GAAG,mBAAmB,GAAG,EAAE,CAAC;IAEtE,QACEA,QAACC,UAAI,QACHD,mBACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,kBACH,GAAG,IAAI,CAAC,OAAO,EAAE,mBAChB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,qBAC3B,OAAO,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB,EACFA,mBAAO,KAAK,EAAE,qBAAqB,aAAa,IAAI,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACrF,IAAI,CAAC,YAAY,IAAI,SAAS,EAC/BA,iBAAK,KAAK,EAAE,qBAAqB,gBAAgB,EAAE,cAAY,IAAI,CAAC,GAAG,aAAW,IAAI,CAAC,EAAE,GAAQ,EAChG,IAAI,CAAC,YAAY,GAAG,EAAE,GAAG,SAAS,CAC7B,CACH,EACP;GACH;;;;;AAGH,IAAI,SAAS,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["src/components/switch/switch.css?tag=road-switch&encapsulation=scoped","src/components/switch/switch.tsx"],"sourcesContent":["/*\n * Switch\n *\n * For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Switch\n * - Label\n * - Lever\n * - Feedback\n * - Position\n */\n\n/**\n * @prop --switch-lever-width: width of the lever\n */\n\n/* SWITCH\n -------------------- */\n\n:host {\n  --switch-lever-width: 4.5rem;\n\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n  font-family: var(--road-font, sans-serif);\n  font-size: 1rem;\n  color: var(--road-grey-900);\n}\n\n/**\n * Hide input\n */\n\n.form-switch-input {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n}\n\n/* LABEL\n -------------------- */\n\n.form-switch-label {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* LEVER\n -------------------- */\n\n.form-switch-lever {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: flex-end;\n  width: var(--switch-lever-width);\n  height: 2rem;\n  padding: 0.5rem 0.625rem;\n  margin-right: 0.75rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  line-height: 1.6;\n  content: \"\";\n  background: var(--road-grey-400);\n  border: 0.125rem solid transparent;\n  border-radius: 1.125rem;\n  transition: background 0.2s ease-in-out;\n}\n\n/**\n * Text in the switch widget\n */\n\n.form-switch-lever::before {\n  font-size: 0.625rem;\n  font-weight: 700;\n  color: var(--road-grey-000);\n  text-transform: uppercase;\n  content: attr(data-off);\n}\n\n/**\n * Round lever in the widget\n */\n\n.form-switch-lever::after {\n  position: absolute;\n  top: 0.0625rem;\n  left: 0.0625rem;\n  display: block;\n  width: 1.625rem;\n  height: 1.625rem;\n  content: \"\";\n  background: var(--road-grey-000);\n  border-radius: 50%;\n  box-shadow: 0 0.125rem 0.125rem rgba(0, 0, 0, 0.1);\n  transition: transform 0.2s ease-in-out;\n}\n\n/**\n * Checked state\n */\n\n.form-switch-input:checked ~ .form-switch-label .form-switch-lever {\n  justify-content: flex-start;\n}\n\n.form-switch-input:checked ~ .form-switch-label .form-switch-lever::before {\n  content: attr(data-on);\n}\n\n.form-switch-input:checked ~ .form-switch-label .form-switch-lever::after {\n  transform: translateX(calc(var(--switch-lever-width) - 2rem));\n}\n\n/**\n * Focus on Tab\n */\n\n.form-switch-input.focus-visible ~ .form-switch-label .form-switch-lever {\n  box-shadow: 0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700);\n}\n\n/* FEEDBACK\n -------------------- */\n\n/**\n * Secondary\n */\n\n.form-switch-input:checked ~ .form-switch-secondary .form-switch-lever {\n  background: var(--road-primary-500);\n}\n\n.form-switch-input:checked ~ .form-switch-secondary .form-switch-lever::before {\n  color: var(--road-primary-contrast);\n}\n\n/**\n * Info\n */\n\n.form-switch-input:checked ~ .form-switch-info .form-switch-lever {\n  background: var(--road-info-default);\n}\n\n.form-switch-input:checked ~ .form-switch-info .form-switch-lever::before {\n  color: var(--road-info-contrast);\n}\n\n/**\n * Success\n */\n\n.form-switch-input:checked ~ .form-switch-success .form-switch-lever {\n  background: var(--road-success-default);\n}\n\n.form-switch-input:checked ~ .form-switch-success .form-switch-lever::before {\n  color: var(--road-success-contrast);\n}\n\n/**\n * Warning\n */\n\n.form-switch-input:checked ~ .form-switch-warning .form-switch-lever {\n  background: var(--road-warning-default);\n}\n\n.form-switch-input:checked ~ .form-switch-warning .form-switch-lever::before {\n  color: var(--road-warning-contrast);\n}\n\n/**\n * Danger\n */\n\n.form-switch-input:checked ~ .form-switch-danger .form-switch-lever {\n  background: var(--road-danger-default);\n}\n\n.form-switch-input:checked ~ .form-switch-danger .form-switch-lever::before {\n  color: var(--road-danger-contrast);\n}\n\n/* POSITION\n -------------------- */\n\n.form-switch-right {\n  margin-right: 0;\n  margin-left: 0.75rem;\n}\n\n.form-switch-spaced {\n  display: flex;\n  justify-content: space-between;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport './../../utils/polyfill';\n\nimport { FeedbackColors } from '../../interface';\n\n@Component({\n  tag: 'road-switch',\n  styleUrl: 'switch.css',\n  scoped: true,\n})\nexport class Switch {\n\n  /**\n   * The id of switch\n   */\n  @Prop() switchId: string = `road-switch-${switchIds++}`;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.switchId;\n\n  /**\n   * If `true`, the switch is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * If `true`, the user cannot interact with the switch.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.switchId}-label`;\n\n  /**\n   * Set the color of alert. e.g. info, success, warning, danger\n   */\n  @Prop() color?: 'secondary' | FeedbackColors = 'secondary';\n\n  /**\n   * If `true`, the label is at left of the switch\n   */\n  @Prop() hasLeftLabel: boolean = false;\n\n  /**\n   * Add space between label and switch element\n   */\n  @Prop() isSpaced: boolean = false;\n\n  /**\n   * Value the form will get\n   */\n  @Prop() value: string = 'on';\n\n  /**\n   * Text display for \"`on`\" state in the switch lever\n   */\n  @Prop() on: string = \"yes\";\n\n  /**\n   * Text display for \"`off`\" state in the switch lever\n   */\n  @Prop() off: string = \"no\";\n\n  /**\n   * Emitted when the checked property has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    checked: boolean;\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    checked: boolean;\n    value: string | undefined | null\n  }>;\n\n  /**\n   * Emitted when the switch has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the switch loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  @Watch('checked')\n  checkedChanged(isChecked: boolean) {\n    this.roadchange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n    this.roadChange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n  }\n\n  private onClick = () => {\n    this.checked = !this.checked;\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadBlur.emit();\n    this.roadblur.emit();\n  };\n\n  render() {\n    const labelId = this.switchId + '-label';\n    const textLabel = <label class=\"form-switch-label\" id={labelId} htmlFor={this.switchId}>{this.label}</label>;\n    const colorClass = this.color !== undefined ? 'form-switch-' + this.color : '';\n    const isSpacedClass = this.isSpaced && 'form-switch-spaced';\n    const rightSwitchClass = this.hasLeftLabel ? 'form-switch-right' : '';\n\n    return (\n      <Host>\n        <input\n          class=\"form-switch-input\"\n          type=\"checkbox\"\n          id={this.switchId}\n          name={this.name}\n          checked={this.checked}\n          disabled={this.disabled}\n          value={this.value}\n          aria-checked={`${this.checked}`}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          onClick={this.onClick}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        />\n        <label class={`form-switch-label ${isSpacedClass} ${colorClass}`} htmlFor={this.switchId}>\n          {this.hasLeftLabel && textLabel}\n          <div class={`form-switch-lever ${rightSwitchClass}`} data-off={this.off} data-on={this.on}></div>\n          {this.hasLeftLabel ? '' : textLabel}\n        </label>\n      </Host>\n    );\n  }\n}\n\nlet switchIds = 0;\n"],"version":3}

package/dist/cjs/road-tab-bar.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e4bd5b5f.js');
-require('./polyfill-9453e116.js');
+const index = require('./index-4fdb2a28.js');
+require('./polyfill-b1fff766.js');
 
 const tabBarCss = ":host{--tab-bar-background:var(--road-surface);--tab-color:var(--road-on-surface-weak);--tab-color-selected:var(--road-on-surface);--tab-underline-selected:var(--road-primary);--tab-background:var(--road-surface);--tab-background-hover:var(--road-surface-inverse);--tab-background-focused:var(--road-grey-70);display:flex;width:100%;margin:0;overflow:scroll;overflow-x:inherit;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--road-on-surface-weak);list-style:none;background:var(--tab-bar-background);border-bottom:1px solid var(--road-grey-70);fill:currentColor;scrollbar-width:none}:host(::-webkit-scrollbar){display:none}:host(.tab-expand) ::slotted(road-tab-button){flex-grow:1}:host(.tab-secondary) ::slotted(road-tab-button){--tab-underline-selected:var(--road-secondary)}:host(.tab-center){justify-content:center}";
 

package/dist/cjs/road-tab-bar.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-tab-bar.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,00BAA00B;;MCY/0B,MAAM;;;;;qBAOa,KAAK;kBAKT,KAAK;kBAKL,KAAK;;;EAO/B,kBAAkB;IAChB,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;MAClC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;MACH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;KACJ;GACF;EAOD,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3C,QACEA,QAACC,UAAI,IACH,IAAI,EAAC,SAAS,EACd,KAAK,EAAE;QACL,YAAY,EAAE,MAAM;QACpB,YAAY,EAAE,MAAM;QACpB,eAAe,EAAE,SAAS;OAC3B,IAEDD,qBAAO,CACF,EACP;GACH;;;;;;;;;;","names":["h","Host"],"sources":["./src/components/tab-bar/tab-bar.css?tag=road-tab-bar&encapsulation=shadow","./src/components/tab-bar/tab-bar.tsx"],"sourcesContent":["/*\n * Tab bar\n *\n */\n\n/**\n * @prop --tab-background: background color of the tab bar\n */\n\n\n:host {\n  --tab-bar-background: var(--road-surface);\n  --tab-color: var(--road-on-surface-weak);\n  --tab-color-selected: var(--road-on-surface);\n  --tab-underline-selected: var(--road-primary);\n  --tab-background: var(--road-surface);\n  --tab-background-hover: var(--road-surface-inverse);\n  --tab-background-focused: var(--road-grey-70);\n\n  display: flex;\n  width: 100%;\n  margin: 0;\n  overflow: scroll;\n  overflow-x: inherit;\n  font-family: var(--road-font, sans-serif);\n  line-height: 1.5;\n  color: var(--road-on-surface-weak);\n  list-style: none;\n  background: var(--tab-bar-background);\n  border-bottom: 1px solid var(--road-grey-70);\n  fill: currentColor;\n  scrollbar-width: none;\n}\n\n:host(::-webkit-scrollbar) {\n  display: none;\n}\n\n:host(.tab-expand) ::slotted(road-tab-button) {\n  flex-grow: 1;\n}\n\n:host(.tab-secondary) ::slotted(road-tab-button) {\n  --tab-underline-selected: var(--road-secondary);\n}\n\n:host(.tab-center) {\n  justify-content: center;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot  - Content of the tabBar, it should be road-tab-button elements.\n */\n\n@Component({\n  tag: 'road-tab-bar',\n  styleUrl: 'tab-bar.css',\n  shadow: true,\n})\nexport class TabBar {\n\n  @Element() el!: HTMLRoadTabBarElement;\n\n  /**\n   * The color to use the color Secondary from your application's color palette.\n   */\n   @Prop() secondary: boolean = false;\n\n  /**\n   * Set to `true` to expand buttons width to take the full size of the bar.\n   */\n  @Prop() expand: boolean = false;\n\n  /**\n   * Set to `true` to center buttons in the bar.\n   */\n  @Prop() center: boolean = false;\n\n  /**\n   * The selected tab component\n   */\n  @Prop() selectedTab?: string;\n  @Watch('selectedTab')\n  selectedTabChanged() {\n    if (this.selectedTab !== undefined) {\n      this.roadtabbarchanged.emit({\n        tab: this.selectedTab,\n      });\n      this.roadTabBarChanged.emit({\n        tab: this.selectedTab,\n      });\n    }\n  }\n\n  /** @internal */\n  @Event() roadtabbarchanged!: EventEmitter;\n  /** @internal */\n  @Event() roadTabBarChanged!: EventEmitter;\n\n  componentWillLoad() {\n    this.selectedTabChanged();\n  }\n\n  render() {\n    const { expand, center, secondary } = this;\n    return (\n      <Host\n        role=\"tablist\"\n        class={{\n          'tab-expand': expand,\n          'tab-center': center,\n          'tab-secondary': secondary,\n        }}\n      >\n        <slot/>\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"road-tab-bar.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,00BAA00B;;MCY/0B,MAAM;;;;;qBAOa,KAAK;kBAKT,KAAK;kBAKL,KAAK;;;EAO/B,kBAAkB;IAChB,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;MAClC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;MACH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;KACJ;GACF;EAOD,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3C,QACEA,QAACC,UAAI,IACH,IAAI,EAAC,SAAS,EACd,KAAK,EAAE;QACL,YAAY,EAAE,MAAM;QACpB,YAAY,EAAE,MAAM;QACpB,eAAe,EAAE,SAAS;OAC3B,IAEDD,qBAAO,CACF,EACP;GACH;;;;;;;;;;","names":["h","Host"],"sources":["src/components/tab-bar/tab-bar.css?tag=road-tab-bar&encapsulation=shadow","src/components/tab-bar/tab-bar.tsx"],"sourcesContent":["/*\n * Tab bar\n *\n */\n\n/**\n * @prop --tab-background: background color of the tab bar\n */\n\n\n:host {\n  --tab-bar-background: var(--road-surface);\n  --tab-color: var(--road-on-surface-weak);\n  --tab-color-selected: var(--road-on-surface);\n  --tab-underline-selected: var(--road-primary);\n  --tab-background: var(--road-surface);\n  --tab-background-hover: var(--road-surface-inverse);\n  --tab-background-focused: var(--road-grey-70);\n\n  display: flex;\n  width: 100%;\n  margin: 0;\n  overflow: scroll;\n  overflow-x: inherit;\n  font-family: var(--road-font, sans-serif);\n  line-height: 1.5;\n  color: var(--road-on-surface-weak);\n  list-style: none;\n  background: var(--tab-bar-background);\n  border-bottom: 1px solid var(--road-grey-70);\n  fill: currentColor;\n  scrollbar-width: none;\n}\n\n:host(::-webkit-scrollbar) {\n  display: none;\n}\n\n:host(.tab-expand) ::slotted(road-tab-button) {\n  flex-grow: 1;\n}\n\n:host(.tab-secondary) ::slotted(road-tab-button) {\n  --tab-underline-selected: var(--road-secondary);\n}\n\n:host(.tab-center) {\n  justify-content: center;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot  - Content of the tabBar, it should be road-tab-button elements.\n */\n\n@Component({\n  tag: 'road-tab-bar',\n  styleUrl: 'tab-bar.css',\n  shadow: true,\n})\nexport class TabBar {\n\n  @Element() el!: HTMLRoadTabBarElement;\n\n  /**\n   * The color to use the color Secondary from your application's color palette.\n   */\n   @Prop() secondary: boolean = false;\n\n  /**\n   * Set to `true` to expand buttons width to take the full size of the bar.\n   */\n  @Prop() expand: boolean = false;\n\n  /**\n   * Set to `true` to center buttons in the bar.\n   */\n  @Prop() center: boolean = false;\n\n  /**\n   * The selected tab component\n   */\n  @Prop() selectedTab?: string;\n  @Watch('selectedTab')\n  selectedTabChanged() {\n    if (this.selectedTab !== undefined) {\n      this.roadtabbarchanged.emit({\n        tab: this.selectedTab,\n      });\n      this.roadTabBarChanged.emit({\n        tab: this.selectedTab,\n      });\n    }\n  }\n\n  /** @internal */\n  @Event() roadtabbarchanged!: EventEmitter;\n  /** @internal */\n  @Event() roadTabBarChanged!: EventEmitter;\n\n  componentWillLoad() {\n    this.selectedTabChanged();\n  }\n\n  render() {\n    const { expand, center, secondary } = this;\n    return (\n      <Host\n        role=\"tablist\"\n        class={{\n          'tab-expand': expand,\n          'tab-center': center,\n          'tab-secondary': secondary,\n        }}\n      >\n        <slot/>\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/cjs/road-tab-button.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e4bd5b5f.js');
+const index = require('./index-4fdb2a28.js');
 
 const tabButtonCss = ":host{box-sizing:border-box;font-weight:700;color:var(--tab-color);outline:0;transition:background 0.15s ease-in-out}:host(.tab-secondary){--tab-underline-selected:var(--road-secondary-600)}:host(.tab-selected){color:var(--tab-color-selected)}:host(.tab-selected) ::slotted(road-icon){color:var(--tab-color-selected)}:host(.tab-selected) .button-native::after{background:var(--tab-underline-selected);opacity:1;transform:none}:host(:hover){background:var(--tab-background-hover)}:host(.focus-visible){background:var(--tab-background-focused)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;min-height:3.5rem;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.button-native::after{position:absolute;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";opacity:0;transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transform:scaleX(0);transform-origin:center}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:center;justify-content:center;width:100%;height:100%}:host ::slotted(road-icon){color:var(--tab-color)}:host(.tab-layout-icon-start) ::slotted(road-icon){margin-right:0.5rem}:host(.tab-layout-icon-top) .button-inner{flex-direction:column}:host ::slotted(road-label){display:-webkit-box;font-size:1rem;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:inherit}:host(.tab-layout-icon-top) ::slotted(road-label){margin-top:0.25rem;font-size:1rem}";
 

package/dist/cjs/road-tab-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-tab-button.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/tab-button/tab-button.css?tag=road-tab-button&encapsulation=shadow","./src/components/tab-button/tab-button.tsx"],"sourcesContent":["/*\n * Tab button\n *\n * Index\n * - Button\n * - Native\n * - Underline\n * - Inner\n * - Icon\n * - Label\n *\n */\n\n/**\n * @prop --padding-start: Left padding  of the button\n * @prop --padding-end: Right padding of the button\n * @prop --tab-color: Default color of the tab button text\n * @prop --tab-color-selected: Color of the tab button text when selected\n * @prop --tab-unerline-selected: Color of the tab button underline when selected\n * @prop --tab-background-hover: Color of the tab button when hover by a mouse\n * @prop --tab-background-focused: Color of the tab button when focused with the tab key\n */\n\n\n/* BUTTON\n -------------------- */\n\n:host {\n  box-sizing: border-box;\n  font-weight: 700;\n  color: var(--tab-color);\n  outline: 0;\n  transition: background 0.15s ease-in-out;\n}\n\n/**\n * Active state\n */\n\n:host(.tab-secondary) {\n  --tab-underline-selected: var(--road-secondary-600);\n}\n\n:host(.tab-selected) {\n  color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) ::slotted(road-icon) {\n  color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) .button-native::after {\n  background: var(--tab-underline-selected);\n  opacity: 1;\n  transform: none;\n}\n\n/**\n * Hover state\n */\n\n:host(:hover) {\n  background: var(--tab-background-hover);\n}\n\n/**\n * Focus state\n */\n\n:host(.focus-visible) {\n  background: var(--tab-background-focused);\n}\n\n\n/* NATIVE\n -------------------- */\n\n.button-native {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n  min-height: 3.5rem;\n  padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n  margin: 0;\n  overflow: hidden;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  cursor: pointer;\n  background: transparent;\n  -webkit-user-drag: none;\n  border-color: initial;\n  border-style: initial;\n  border-width: 0;\n  border-radius: inherit;\n  border-image: initial;\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* UNDERLINE\n -------------------- */\n\n.button-native::after {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  display: block;\n  width: 100%;\n  height: 2px;\n  content: \"\";\n  opacity: 0;\n  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  transform: scaleX(0);\n  transform-origin: center;\n}\n\n/* INNER\n -------------------- */\n\n.button-inner {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-flow: inherit;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n/* ICON\n -------------------- */\n\n:host ::slotted(road-icon) {\n  color: var(--tab-color);\n}\n\n:host(.tab-layout-icon-start) ::slotted(road-icon) {\n  margin-right: 0.5rem;\n}\n\n:host(.tab-layout-icon-top) .button-inner {\n  flex-direction: column;\n}\n\n/* LABEL\n -------------------- */\n\n:host ::slotted(road-label) {\n  display: -webkit-box;\n  font-size: 1rem;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  white-space: inherit;\n}\n\n:host(.tab-layout-icon-top) ::slotted(road-label) {\n  margin-top: 0.25rem;\n  font-size: 1rem;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/**\n * @slot  - Content of the tab-button, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-tab-button',\n  styleUrl: 'tab-button.css',\n  shadow: true,\n})\nexport class TabButton {\n\n  @Element() el!: HTMLRoadTabButtonElement;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * Set the layout of the text and icon in the tab bar.\n   * It defaults to `'icon-top'`.\n   */\n  @Prop() layout?: 'icon-start' | 'icon-top' = 'icon-start';\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadtabbuttonclick!: EventEmitter;\n  /** @internal */\n  @Event() roadTabButtonClick!: EventEmitter;\n\n  @Listen('roadTabBarChanged', { target: 'window' })\n  @Listen('roadTabbarchanged', { target: 'window' })\n  onTabBarChanged(ev: CustomEvent) {\n    const dispatchedFrom = ev.target as HTMLElement;\n    const parent = this.el.parentElement as EventTarget;\n\n    if ((ev.composedPath && ev.composedPath().includes(parent)) || (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n      this.selected = this.tab === ev.detail.tab;\n    }\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      this.roadtabbuttonclick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n      this.roadTabButtonClick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n\n      ev.preventDefault();\n    }\n  }\n\n  private get hasLabel() {\n    return !!this.el.querySelector('road-label');\n  }\n\n  private get hasIcon() {\n    return !!this.el.querySelector('road-icon');\n  }\n\n  private get tabIndex() {\n    const hasTabIndex = this.el.hasAttribute('tabindex');\n\n    if (hasTabIndex) {\n      return this.el.getAttribute('tabindex');\n    }\n\n    return 0;\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab } = this;\n    const attrs = {\n      download: this.download,\n      href,\n      rel,\n      target,\n    };\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"tab\"\n        tabindex={tabIndex}\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `tab-button-${tab}` : null}\n        class={{\n          'tab-selected': selected,\n          'tab-has-label': hasLabel,\n          'tab-has-icon': hasIcon,\n          'tab-has-label-only': hasLabel && !hasIcon,\n          'tab-has-icon-only': hasIcon && !hasLabel,\n          [`tab-layout-${layout}`]: true,\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"road-tab-button.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/tab-button/tab-button.css?tag=road-tab-button&encapsulation=shadow","src/components/tab-button/tab-button.tsx"],"sourcesContent":["/*\n * Tab button\n *\n * Index\n * - Button\n * - Native\n * - Underline\n * - Inner\n * - Icon\n * - Label\n *\n */\n\n/**\n * @prop --padding-start: Left padding  of the button\n * @prop --padding-end: Right padding of the button\n * @prop --tab-color: Default color of the tab button text\n * @prop --tab-color-selected: Color of the tab button text when selected\n * @prop --tab-unerline-selected: Color of the tab button underline when selected\n * @prop --tab-background-hover: Color of the tab button when hover by a mouse\n * @prop --tab-background-focused: Color of the tab button when focused with the tab key\n */\n\n\n/* BUTTON\n -------------------- */\n\n:host {\n  box-sizing: border-box;\n  font-weight: 700;\n  color: var(--tab-color);\n  outline: 0;\n  transition: background 0.15s ease-in-out;\n}\n\n/**\n * Active state\n */\n\n:host(.tab-secondary) {\n  --tab-underline-selected: var(--road-secondary-600);\n}\n\n:host(.tab-selected) {\n  color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) ::slotted(road-icon) {\n  color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) .button-native::after {\n  background: var(--tab-underline-selected);\n  opacity: 1;\n  transform: none;\n}\n\n/**\n * Hover state\n */\n\n:host(:hover) {\n  background: var(--tab-background-hover);\n}\n\n/**\n * Focus state\n */\n\n:host(.focus-visible) {\n  background: var(--tab-background-focused);\n}\n\n\n/* NATIVE\n -------------------- */\n\n.button-native {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n  min-height: 3.5rem;\n  padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n  margin: 0;\n  overflow: hidden;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  cursor: pointer;\n  background: transparent;\n  -webkit-user-drag: none;\n  border-color: initial;\n  border-style: initial;\n  border-width: 0;\n  border-radius: inherit;\n  border-image: initial;\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* UNDERLINE\n -------------------- */\n\n.button-native::after {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  display: block;\n  width: 100%;\n  height: 2px;\n  content: \"\";\n  opacity: 0;\n  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  transform: scaleX(0);\n  transform-origin: center;\n}\n\n/* INNER\n -------------------- */\n\n.button-inner {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-flow: inherit;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n/* ICON\n -------------------- */\n\n:host ::slotted(road-icon) {\n  color: var(--tab-color);\n}\n\n:host(.tab-layout-icon-start) ::slotted(road-icon) {\n  margin-right: 0.5rem;\n}\n\n:host(.tab-layout-icon-top) .button-inner {\n  flex-direction: column;\n}\n\n/* LABEL\n -------------------- */\n\n:host ::slotted(road-label) {\n  display: -webkit-box;\n  font-size: 1rem;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  white-space: inherit;\n}\n\n:host(.tab-layout-icon-top) ::slotted(road-label) {\n  margin-top: 0.25rem;\n  font-size: 1rem;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/**\n * @slot  - Content of the tab-button, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-tab-button',\n  styleUrl: 'tab-button.css',\n  shadow: true,\n})\nexport class TabButton {\n\n  @Element() el!: HTMLRoadTabButtonElement;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * Set the layout of the text and icon in the tab bar.\n   * It defaults to `'icon-top'`.\n   */\n  @Prop() layout?: 'icon-start' | 'icon-top' = 'icon-start';\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadtabbuttonclick!: EventEmitter;\n  /** @internal */\n  @Event() roadTabButtonClick!: EventEmitter;\n\n  @Listen('roadTabBarChanged', { target: 'window' })\n  @Listen('roadTabbarchanged', { target: 'window' })\n  onTabBarChanged(ev: CustomEvent) {\n    const dispatchedFrom = ev.target as HTMLElement;\n    const parent = this.el.parentElement as EventTarget;\n\n    if ((ev.composedPath && ev.composedPath().includes(parent)) || (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n      this.selected = this.tab === ev.detail.tab;\n    }\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      this.roadtabbuttonclick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n      this.roadTabButtonClick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n\n      ev.preventDefault();\n    }\n  }\n\n  private get hasLabel() {\n    return !!this.el.querySelector('road-label');\n  }\n\n  private get hasIcon() {\n    return !!this.el.querySelector('road-icon');\n  }\n\n  private get tabIndex() {\n    const hasTabIndex = this.el.hasAttribute('tabindex');\n\n    if (hasTabIndex) {\n      return this.el.getAttribute('tabindex');\n    }\n\n    return 0;\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab } = this;\n    const attrs = {\n      download: this.download,\n      href,\n      rel,\n      target,\n    };\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"tab\"\n        tabindex={tabIndex}\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `tab-button-${tab}` : null}\n        class={{\n          'tab-selected': selected,\n          'tab-has-label': hasLabel,\n          'tab-has-icon': hasIcon,\n          'tab-has-label-only': hasLabel && !hasIcon,\n          'tab-has-icon-only': hasIcon && !hasLabel,\n          [`tab-layout-${layout}`]: true,\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/cjs/road-tab.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e4bd5b5f.js');
+const index = require('./index-4fdb2a28.js');
 
 const tabCss = ":host{display:block}:host(.tab-hidden){display:none}";
 

package/dist/cjs/road-tab.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-tab.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,MAAM,GAAG,sDAAsD;;MCWxD,GAAG;;;kBAKoB,KAAK;;;EASvC,MAAM,iBAAiB;IACrB,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;KACxB;GACF;;EAID,MAAM,SAAS;IACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;GACpB;EAED,MAAM;IACJ,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAC7B,QACEA,QAACC,UAAI,IACH,IAAI,EAAC,UAAU,iBACF,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,qBACnB,cAAc,GAAG,EAAE,EACpC,KAAK,EAAE;QACL,YAAY,EAAE,CAAC,MAAM;OACtB,IAEDD,qBAAO,CACF,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/tab/tab.css?tag=road-tab&encapsulation=shadow","./src/components/tab/tab.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host(.tab-hidden) {\n  display: none;\n}\n","import { Component, Element, Host, Method, Prop, h } from '@stencil/core';\n\n/**\n * @slot  - content of the tab sync with selected tab.\n */\n\n@Component({\n  tag: 'road-tab',\n  styleUrl: 'tab.css',\n  shadow: true,\n})\nexport class Tab {\n\n  @Element() el!: HTMLRoadTabElement;\n\n  /** @internal */\n  @Prop({ mutable: true }) active = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   * the selected tab or by the router to switch between them.\n   */\n  @Prop() tab!: string;\n\n\n  async componentWillLoad() {\n    if (this.active) {\n      await this.setActive();\n    }\n  }\n\n  /** Set the active component for the tab */\n  @Method()\n  async setActive() {\n    this.active = true;\n  }\n\n  render() {\n    const { tab, active } = this;\n    return (\n      <Host\n        role=\"tabpanel\"\n        aria-hidden={!active ? 'true' : null}\n        aria-labelledby={`tab-button-${tab}`}\n        class={{\n          'tab-hidden': !active,\n        }}\n      >\n        <slot/>\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"road-tab.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,MAAM,GAAG,sDAAsD;;MCWxD,GAAG;;;kBAKoB,KAAK;;;EASvC,MAAM,iBAAiB;IACrB,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;KACxB;GACF;;EAID,MAAM,SAAS;IACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;GACpB;EAED,MAAM;IACJ,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAC7B,QACEA,QAACC,UAAI,IACH,IAAI,EAAC,UAAU,iBACF,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,qBACnB,cAAc,GAAG,EAAE,EACpC,KAAK,EAAE;QACL,YAAY,EAAE,CAAC,MAAM;OACtB,IAEDD,qBAAO,CACF,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/tab/tab.css?tag=road-tab&encapsulation=shadow","src/components/tab/tab.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host(.tab-hidden) {\n  display: none;\n}\n","import { Component, Element, Host, Method, Prop, h } from '@stencil/core';\n\n/**\n * @slot  - content of the tab sync with selected tab.\n */\n\n@Component({\n  tag: 'road-tab',\n  styleUrl: 'tab.css',\n  shadow: true,\n})\nexport class Tab {\n\n  @Element() el!: HTMLRoadTabElement;\n\n  /** @internal */\n  @Prop({ mutable: true }) active = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   * the selected tab or by the router to switch between them.\n   */\n  @Prop() tab!: string;\n\n\n  async componentWillLoad() {\n    if (this.active) {\n      await this.setActive();\n    }\n  }\n\n  /** Set the active component for the tab */\n  @Method()\n  async setActive() {\n    this.active = true;\n  }\n\n  render() {\n    const { tab, active } = this;\n    return (\n      <Host\n        role=\"tabpanel\"\n        aria-hidden={!active ? 'true' : null}\n        aria-labelledby={`tab-button-${tab}`}\n        class={{\n          'tab-hidden': !active,\n        }}\n      >\n        <slot/>\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/cjs/road-table.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e4bd5b5f.js');
+const index = require('./index-4fdb2a28.js');
 
 const tableCss = ".sc-road-table-h{box-sizing:border-box;display:block}.sc-road-table-s>table{width:100%;font-family:var(--road-font, sans-serif);font-size:var(--road-body-small);line-height:1.5;color:var(--road-on-surface);border-collapse:collapse;border-top:1px solid var(--road-outline);border-bottom:1px solid var(--road-outline)}.sc-road-table-s>table th,.sc-road-table-s>table td{padding:1.5rem 1.25rem;text-align:left}.sc-road-table-s>table thead tr,.sc-road-table-s>table tbody tr:nth-child(2n){background:var(--road-surface-inverse)}";
 

package/dist/cjs/road-table.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-table.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,8gBAA8gB;;MCUlhB,KAAK;;;;EAEhB,MAAM;IACJ,QACEA,qBAAO,EACP;GACH;;;;;;","names":["h"],"sources":["./src/components/table/table.css?tag=road-table&encapsulation=scoped","./src/components/table/table.tsx"],"sourcesContent":["/*\n * Table\n *\n */\n\n:host {\n  box-sizing: border-box;\n  display: block;\n}\n\n::slotted(table) {\n  width: 100%;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-body-small);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  border-collapse: collapse;\n  border-top: 1px solid var(--road-outline);\n  border-bottom: 1px solid var(--road-outline);\n}\n\n::slotted(table th),\n::slotted(table td) {\n  padding: 1.5rem 1.25rem;\n  text-align: left;\n}\n\n::slotted(table thead tr),\n::slotted(table tbody tr:nth-child(2n)) {\n  background: var(--road-surface-inverse);\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * @slot  - Content of table, it should be an html table (https://developer.mozilla.org/fr/docs/Web/HTML/Element/table).\n */\n@Component({\n  tag: 'road-table',\n  styleUrl: 'table.css',\n  scoped: true,\n})\nexport class Table {\n\n  render() {\n    return (\n      <slot/>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"road-table.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,8gBAA8gB;;MCUlhB,KAAK;;;;EAEhB,MAAM;IACJ,QACEA,qBAAO,EACP;GACH;;;;;;","names":["h"],"sources":["src/components/table/table.css?tag=road-table&encapsulation=scoped","src/components/table/table.tsx"],"sourcesContent":["/*\n * Table\n *\n */\n\n:host {\n  box-sizing: border-box;\n  display: block;\n}\n\n::slotted(table) {\n  width: 100%;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-body-small);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  border-collapse: collapse;\n  border-top: 1px solid var(--road-outline);\n  border-bottom: 1px solid var(--road-outline);\n}\n\n::slotted(table th),\n::slotted(table td) {\n  padding: 1.5rem 1.25rem;\n  text-align: left;\n}\n\n::slotted(table thead tr),\n::slotted(table tbody tr:nth-child(2n)) {\n  background: var(--road-surface-inverse);\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * @slot  - Content of table, it should be an html table (https://developer.mozilla.org/fr/docs/Web/HTML/Element/table).\n */\n@Component({\n  tag: 'road-table',\n  styleUrl: 'table.css',\n  scoped: true,\n})\nexport class Table {\n\n  render() {\n    return (\n      <slot/>\n    );\n  }\n\n}\n"],"version":3}

package/dist/cjs/road-tabs.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e4bd5b5f.js');
+const index = require('./index-4fdb2a28.js');
 
 const tabsCss = ":host{position:relative;display:block}";
 

package/dist/cjs/road-tabs.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-tabs.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/tabs/tabs.css?tag=road-tabs&encapsulation=shadow","./src/components/tabs/tabs.tsx"],"sourcesContent":["/*\n * Tabs\n *\n */\n\n:host {\n  position: relative;\n  display: block;\n}\n","import { Component, Element, Event, EventEmitter, Host, Method, State, h } from '@stencil/core';\n\n/**\n * @slot - Content is placed between the named slots if provided without a slot.\n * @slot top - Content is placed at the top of the screen.\n */\n@Component({\n  tag: 'road-tabs',\n  styleUrl: 'tabs.css',\n  shadow: true,\n})\nexport class Tabs {\n\n  private transitioning = false;\n  private leavingTab?: HTMLRoadTabElement;\n\n  @Element() el!: HTMLRoadTabsElement;\n\n  @State() selectedTab?: HTMLRoadTabElement;\n\n  /**\n   * Emitted when the navigation is about to transition to a new component.\n   */\n  @Event({ bubbles: false }) roadtabswillchange!: EventEmitter<{tab: string}>;\n  /** @internal */\n  @Event({ bubbles: false }) roadTabsWillChange!: EventEmitter<{tab: string}>;\n\n  /**\n   * Emitted when the navigation has finished transitioning to a new component.\n   */\n  @Event({ bubbles: false }) roadtabsdidchange!: EventEmitter<{tab: string}>;\n  /** @internal */\n  @Event({ bubbles: false }) roadTabsDidChange!: EventEmitter<{tab: string}>;\n\n  async componentWillLoad() {\n    const tabs = this.tabs;\n    if (tabs.length > 0) {\n      this.select(tabs[0]);\n    }\n  }\n\n  componentWillRender() {\n    const tabBar = this.el.querySelector('road-tab-bar');\n    if (tabBar) {\n      const tab = this.selectedTab ? this.selectedTab.tab : undefined;\n      tabBar.selectedTab = tab;\n    }\n  }\n\n  /**\n   * Select a tab by the value of its `tab` property or an element reference.\n   *\n   * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.\n   */\n  @Method()\n  async select(tab: string | HTMLRoadTabElement): Promise<boolean> {\n    const selectedTab = getTab(this.tabs, tab);\n    if (!this.shouldSwitch(selectedTab)) {\n      return false;\n    }\n    await this.setActive(selectedTab);\n    this.tabSwitch();\n\n    return true;\n  }\n\n  /**\n   * Get a specific tab by the value of its `tab` property or an element reference.\n   *\n   * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.\n   */\n  @Method()\n  async getTab(tab: string | HTMLRoadTabElement): Promise<HTMLRoadTabElement | undefined> {\n    return getTab(this.tabs, tab);\n  }\n\n  /**\n   * Get the currently selected tab.\n   */\n  @Method()\n  getSelected(): Promise<string | undefined> {\n    return Promise.resolve(this.selectedTab ? this.selectedTab.tab : undefined);\n  }\n\n  private setActive(selectedTab: HTMLRoadTabElement): Promise<void> {\n    if (this.transitioning) {\n      return Promise.reject('transitioning already happening');\n    }\n\n    this.transitioning = true;\n    this.leavingTab = this.selectedTab;\n    this.selectedTab = selectedTab;\n    this.roadTabsWillChange.emit({ tab: selectedTab.tab });\n    selectedTab.active = true;\n    return Promise.resolve();\n  }\n\n  private tabSwitch() {\n    const selectedTab = this.selectedTab;\n    const leavingTab = this.leavingTab;\n\n    this.leavingTab = undefined;\n    this.transitioning = false;\n    if (!selectedTab) {\n      return;\n    }\n\n    if (leavingTab !== selectedTab) {\n      if (leavingTab) {\n        leavingTab.active = false;\n      }\n      this.roadTabsDidChange.emit({ tab: selectedTab.tab });\n    }\n  }\n\n  private shouldSwitch(selectedTab: HTMLRoadTabElement | undefined): selectedTab is HTMLRoadTabElement {\n    const leavingTab = this.selectedTab;\n    return selectedTab !== undefined && selectedTab !== leavingTab && !this.transitioning;\n  }\n\n  private get tabs() {\n    return Array.from(this.el.querySelectorAll('road-tab'));\n  }\n\n  private onTabClicked = (ev: CustomEvent) => {\n    const { tab } = ev.detail;\n    this.select(tab);\n  };\n\n  render() {\n    return (\n      <Host\n        onRoadTabButtonClick={this.onTabClicked}\n      >\n        <slot name=\"top\"/>\n        <div class=\"tabs-inner\">\n          <slot/>\n        </div>\n      </Host>\n    );\n  }\n}\n\nconst getTab = (tabs: HTMLRoadTabElement[], tab: string | HTMLRoadTabElement): HTMLRoadTabElement | undefined => {\n  const tabEl = (typeof tab === 'string')\n    ? tabs.find(t => t.tab === tab)\n    : tab;\n\n  if (!tabEl) {\n    console.error(`tab with id: \"${tabEl}\" does not exist`);\n  }\n  return tabEl;\n};"],"version":3}
+{"file":"road-tabs.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,wCAAwC;;MCW3C,IAAI;;;;;;;IAEP,kBAAa,GAAG,KAAK,CAAC;IA+GtB,iBAAY,GAAG,CAAC,EAAe;MACrC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC;MAC1B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;KAClB,CAAC;;;EA7FF,MAAM,iBAAiB;IACrB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;IACvB,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;MACnB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;KACtB;GACF;EAED,mBAAmB;IACjB,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACrD,IAAI,MAAM,EAAE;MACV,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,GAAG,SAAS,CAAC;MAChE,MAAM,CAAC,WAAW,GAAG,GAAG,CAAC;KAC1B;GACF;;;;;;EAQD,MAAM,MAAM,CAAC,GAAgC;IAC3C,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAC3C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE;MACnC,OAAO,KAAK,CAAC;KACd;IACD,MAAM,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAClC,IAAI,CAAC,SAAS,EAAE,CAAC;IAEjB,OAAO,IAAI,CAAC;GACb;;;;;;EAQD,MAAM,MAAM,CAAC,GAAgC;IAC3C,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;GAC/B;;;;EAMD,WAAW;IACT,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC;GAC7E;EAEO,SAAS,CAAC,WAA+B;IAC/C,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,OAAO,OAAO,CAAC,MAAM,CAAC,iCAAiC,CAAC,CAAC;KAC1D;IAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;IAC1B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;IACnC,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IAC/B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC;IACvD,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC;IAC1B,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;GAC1B;EAEO,SAAS;IACf,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;IAEnC,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;IAC5B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC3B,IAAI,CAAC,WAAW,EAAE;MAChB,OAAO;KACR;IAED,IAAI,UAAU,KAAK,WAAW,EAAE;MAC9B,IAAI,UAAU,EAAE;QACd,UAAU,CAAC,MAAM,GAAG,KAAK,CAAC;OAC3B;MACD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC;KACvD;GACF;EAEO,YAAY,CAAC,WAA2C;IAC9D,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;IACpC,OAAO,WAAW,KAAK,SAAS,IAAI,WAAW,KAAK,UAAU,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;GACvF;EAED,IAAY,IAAI;IACd,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC;GACzD;EAOD,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,oBAAoB,EAAE,IAAI,CAAC,YAAY,IAEvCD,kBAAM,IAAI,EAAC,KAAK,GAAE,EAClBA,iBAAK,KAAK,EAAC,YAAY,IACrBA,qBAAO,CACH,CACD,EACP;GACH;;;AAGH,MAAM,MAAM,GAAG,CAAC,IAA0B,EAAE,GAAgC;EAC1E,MAAM,KAAK,GAAG,CAAC,OAAO,GAAG,KAAK,QAAQ;MAClC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC;MAC7B,GAAG,CAAC;EAER,IAAI,CAAC,KAAK,EAAE;IACV,OAAO,CAAC,KAAK,CAAC,iBAAiB,KAAK,kBAAkB,CAAC,CAAC;GACzD;EACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["src/components/tabs/tabs.css?tag=road-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["/*\n * Tabs\n *\n */\n\n:host {\n  position: relative;\n  display: block;\n}\n","import { Component, Element, Event, EventEmitter, Host, Method, State, h } from '@stencil/core';\n\n/**\n * @slot - Content is placed between the named slots if provided without a slot.\n * @slot top - Content is placed at the top of the screen.\n */\n@Component({\n  tag: 'road-tabs',\n  styleUrl: 'tabs.css',\n  shadow: true,\n})\nexport class Tabs {\n\n  private transitioning = false;\n  private leavingTab?: HTMLRoadTabElement;\n\n  @Element() el!: HTMLRoadTabsElement;\n\n  @State() selectedTab?: HTMLRoadTabElement;\n\n  /**\n   * Emitted when the navigation is about to transition to a new component.\n   */\n  @Event({ bubbles: false }) roadtabswillchange!: EventEmitter<{tab: string}>;\n  /** @internal */\n  @Event({ bubbles: false }) roadTabsWillChange!: EventEmitter<{tab: string}>;\n\n  /**\n   * Emitted when the navigation has finished transitioning to a new component.\n   */\n  @Event({ bubbles: false }) roadtabsdidchange!: EventEmitter<{tab: string}>;\n  /** @internal */\n  @Event({ bubbles: false }) roadTabsDidChange!: EventEmitter<{tab: string}>;\n\n  async componentWillLoad() {\n    const tabs = this.tabs;\n    if (tabs.length > 0) {\n      this.select(tabs[0]);\n    }\n  }\n\n  componentWillRender() {\n    const tabBar = this.el.querySelector('road-tab-bar');\n    if (tabBar) {\n      const tab = this.selectedTab ? this.selectedTab.tab : undefined;\n      tabBar.selectedTab = tab;\n    }\n  }\n\n  /**\n   * Select a tab by the value of its `tab` property or an element reference.\n   *\n   * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.\n   */\n  @Method()\n  async select(tab: string | HTMLRoadTabElement): Promise<boolean> {\n    const selectedTab = getTab(this.tabs, tab);\n    if (!this.shouldSwitch(selectedTab)) {\n      return false;\n    }\n    await this.setActive(selectedTab);\n    this.tabSwitch();\n\n    return true;\n  }\n\n  /**\n   * Get a specific tab by the value of its `tab` property or an element reference.\n   *\n   * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.\n   */\n  @Method()\n  async getTab(tab: string | HTMLRoadTabElement): Promise<HTMLRoadTabElement | undefined> {\n    return getTab(this.tabs, tab);\n  }\n\n  /**\n   * Get the currently selected tab.\n   */\n  @Method()\n  getSelected(): Promise<string | undefined> {\n    return Promise.resolve(this.selectedTab ? this.selectedTab.tab : undefined);\n  }\n\n  private setActive(selectedTab: HTMLRoadTabElement): Promise<void> {\n    if (this.transitioning) {\n      return Promise.reject('transitioning already happening');\n    }\n\n    this.transitioning = true;\n    this.leavingTab = this.selectedTab;\n    this.selectedTab = selectedTab;\n    this.roadTabsWillChange.emit({ tab: selectedTab.tab });\n    selectedTab.active = true;\n    return Promise.resolve();\n  }\n\n  private tabSwitch() {\n    const selectedTab = this.selectedTab;\n    const leavingTab = this.leavingTab;\n\n    this.leavingTab = undefined;\n    this.transitioning = false;\n    if (!selectedTab) {\n      return;\n    }\n\n    if (leavingTab !== selectedTab) {\n      if (leavingTab) {\n        leavingTab.active = false;\n      }\n      this.roadTabsDidChange.emit({ tab: selectedTab.tab });\n    }\n  }\n\n  private shouldSwitch(selectedTab: HTMLRoadTabElement | undefined): selectedTab is HTMLRoadTabElement {\n    const leavingTab = this.selectedTab;\n    return selectedTab !== undefined && selectedTab !== leavingTab && !this.transitioning;\n  }\n\n  private get tabs() {\n    return Array.from(this.el.querySelectorAll('road-tab'));\n  }\n\n  private onTabClicked = (ev: CustomEvent) => {\n    const { tab } = ev.detail;\n    this.select(tab);\n  };\n\n  render() {\n    return (\n      <Host\n        onRoadTabButtonClick={this.onTabClicked}\n      >\n        <slot name=\"top\"/>\n        <div class=\"tabs-inner\">\n          <slot/>\n        </div>\n      </Host>\n    );\n  }\n}\n\nconst getTab = (tabs: HTMLRoadTabElement[], tab: string | HTMLRoadTabElement): HTMLRoadTabElement | undefined => {\n  const tabEl = (typeof tab === 'string')\n    ? tabs.find(t => t.tab === tab)\n    : tab;\n\n  if (!tabEl) {\n    console.error(`tab with id: \"${tabEl}\" does not exist`);\n  }\n  return tabEl;\n};"],"version":3}

package/dist/cjs/road-tag.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e4bd5b5f.js');
-require('./polyfill-9453e116.js');
+const index = require('./index-4fdb2a28.js');
+require('./polyfill-b1fff766.js');
 
 const tagCss = ":host{box-sizing:border-box;display:inline-flex;align-items:center;padding:0.125rem 0.5rem;font-size:var(--road-body-small);border-radius:0.25rem}:host(.tag-grey){color:var(--road-grey-30);background-color:var(--road-grey-85)}:host(.tag-grey.tag-grey-contrast){color:var(--road-on-primary);background-color:var(--road-grey-40)}:host(.tag-yellow){color:var(--road-yellow-mikado-20);background-color:var(--road-yellow-mikado-90)}:host(.tag-yellow.tag-yellow-contrast){color:var(--road-yellow-mikado-20);background-color:var(--road-yellow-mikado-60)}:host(.tag-red){color:var(--road-red-pepper-30);background-color:var(--road-red-pepper-95)}:host(.tag-red.tag-red-contrast){color:var(--road-on-primary);background-color:var(--road-red-pepper-60)}:host(.tag-violet){color:var(--road-violet-electric-30);background-color:var(--road-violet-electric-95)}:host(.tag-violet.tag-violet-contrast){color:var(--road-on-primary);background-color:var(--road-violet-electric-60)}:host(.tag-blue){color:var(--road-blue-klein-40);background-color:var(--road-blue-klein-95)}:host(.tag-blue.tag-blue-contrast){color:var(--road-on-primary);background-color:var(--road-blue-klein-60)}:host(.tag-green){color:var(--road-green-monstera-30);background-color:var(--road-green-monstera-95)}:host(.tag-green.tag-green-contrast){color:var(--road-on-primary);background-color:var(--road-green-monstera-60)}@media (any-hover: hover){:host(.chip-outline:hover){border-color:var(--road-outline-variant)}:host(.chip-secondary:hover){background:var(--road-button-primary-variant)}:host(.chip-secondary:hover) .chip-close{color:var(--road-primary)}}:host(.chip-outline:hover){border-color:var(--road-outline-variant)}:host(.chip-secondary.focus-visible){background:var(--road-button-primary-variant)}";
 

package/dist/cjs/road-tag.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-tag.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,MAAM,GAAG,suDAAsuD;;MCYxuD,GAAG;;;iBAI2D,MAAM;oBAKjD,KAAK;;EAEnC,MAAM;IAEJ,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,OAAO,IAAI,CAAC,KAAK,QAAQ,IAAI,CAAC,KAAK,WAAW,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;IAE3G,QACEA,QAACC,UAAI,IACH,KAAK,EAAE,GAAG,aAAa,EAAE,IAEzBD,qBAAO,CACF,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/tag/tag.css?tag=road-tag&encapsulation=shadow","./src/components/tag/tag.tsx"],"sourcesContent":["/*\n * Chip\n *\n * Index\n * - Color\n */\n\n:host {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  padding: 0.125rem 0.5rem;\n  font-size: var(--road-body-small);\n  border-radius: 0.25rem;\n}\n\n/* COLOR\n -------------------- */\n\n:host(.tag-grey) {\n  color: var(--road-grey-30);\n  background-color: var(--road-grey-85);\n}\n\n:host(.tag-grey.tag-grey-contrast) {\n  color: var(--road-on-primary);\n  background-color: var(--road-grey-40);\n}\n\n:host(.tag-yellow) {\n  color: var(--road-yellow-mikado-20);\n  background-color: var(--road-yellow-mikado-90);\n}\n\n:host(.tag-yellow.tag-yellow-contrast) {\n  color: var(--road-yellow-mikado-20);\n  background-color: var(--road-yellow-mikado-60);\n}\n\n:host(.tag-red) {\n  color: var(--road-red-pepper-30);\n  background-color: var(--road-red-pepper-95);\n}\n\n:host(.tag-red.tag-red-contrast) {\n  color: var(--road-on-primary);\n  background-color: var(--road-red-pepper-60);\n}\n\n:host(.tag-violet) {\n  color: var(--road-violet-electric-30);\n  background-color: var(--road-violet-electric-95);\n}\n\n:host(.tag-violet.tag-violet-contrast) {\n  color: var(--road-on-primary);\n  background-color: var(--road-violet-electric-60);\n}\n\n:host(.tag-blue) {\n  color: var(--road-blue-klein-40);\n  background-color: var(--road-blue-klein-95);\n}\n\n:host(.tag-blue.tag-blue-contrast) {\n  color: var(--road-on-primary);\n  background-color: var(--road-blue-klein-60);\n}\n\n:host(.tag-green) {\n  color: var(--road-green-monstera-30);\n  background-color: var(--road-green-monstera-95);\n}\n\n:host(.tag-green.tag-green-contrast) {\n  color: var(--road-on-primary);\n  background-color: var(--road-green-monstera-60);\n}\n\n/**\n * Hover state\n */\n\n@media (any-hover: hover) {\n\n  :host(.chip-outline:hover) {\n    border-color: var(--road-outline-variant);\n  }\n\n  :host(.chip-secondary:hover) {\n    background: var(--road-button-primary-variant);\n  }\n\n  :host(.chip-secondary:hover) .chip-close {\n    color: var(--road-primary);\n  }\n}\n\n/**\n * Focus state\n */\n\n:host(.chip-outline:hover) {\n  border-color: var(--road-outline-variant);\n}\n\n:host(.chip-secondary.focus-visible) {\n  background: var(--road-button-primary-variant);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the tag.\n */\n\n@Component({\n  tag: 'road-tag',\n  styleUrl: 'tag.css',\n  shadow: true,\n})\nexport class Tag {\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color?: 'grey' | 'yellow' | 'red' | 'violet' | 'blue' | 'green'= 'grey';\n\n    /**\n   * Set to `true` for a contrast tag, for example on a gryy surface\n   */\n    @Prop() contrast: boolean = false;\n\n  render() {\n\n    const contrastClass = this.contrast ? `tag-${this.color} tag-${this.color}-contrast` : `tag-${this.color}`;\n\n    return (\n      <Host\n        class={`${contrastClass}`}\n      >\n        <slot/>\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"road-tag.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,MAAM,GAAG,suDAAsuD;;MCYxuD,GAAG;;;iBAI2D,MAAM;oBAKjD,KAAK;;EAEnC,MAAM;IAEJ,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,OAAO,IAAI,CAAC,KAAK,QAAQ,IAAI,CAAC,KAAK,WAAW,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;IAE3G,QACEA,QAACC,UAAI,IACH,KAAK,EAAE,GAAG,aAAa,EAAE,IAEzBD,qBAAO,CACF,EACP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/tag/tag.css?tag=road-tag&encapsulation=shadow","src/components/tag/tag.tsx"],"sourcesContent":["/*\n * Chip\n *\n * Index\n * - Color\n */\n\n:host {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  padding: 0.125rem 0.5rem;\n  font-size: var(--road-body-small);\n  border-radius: 0.25rem;\n}\n\n/* COLOR\n -------------------- */\n\n:host(.tag-grey) {\n  color: var(--road-grey-30);\n  background-color: var(--road-grey-85);\n}\n\n:host(.tag-grey.tag-grey-contrast) {\n  color: var(--road-on-primary);\n  background-color: var(--road-grey-40);\n}\n\n:host(.tag-yellow) {\n  color: var(--road-yellow-mikado-20);\n  background-color: var(--road-yellow-mikado-90);\n}\n\n:host(.tag-yellow.tag-yellow-contrast) {\n  color: var(--road-yellow-mikado-20);\n  background-color: var(--road-yellow-mikado-60);\n}\n\n:host(.tag-red) {\n  color: var(--road-red-pepper-30);\n  background-color: var(--road-red-pepper-95);\n}\n\n:host(.tag-red.tag-red-contrast) {\n  color: var(--road-on-primary);\n  background-color: var(--road-red-pepper-60);\n}\n\n:host(.tag-violet) {\n  color: var(--road-violet-electric-30);\n  background-color: var(--road-violet-electric-95);\n}\n\n:host(.tag-violet.tag-violet-contrast) {\n  color: var(--road-on-primary);\n  background-color: var(--road-violet-electric-60);\n}\n\n:host(.tag-blue) {\n  color: var(--road-blue-klein-40);\n  background-color: var(--road-blue-klein-95);\n}\n\n:host(.tag-blue.tag-blue-contrast) {\n  color: var(--road-on-primary);\n  background-color: var(--road-blue-klein-60);\n}\n\n:host(.tag-green) {\n  color: var(--road-green-monstera-30);\n  background-color: var(--road-green-monstera-95);\n}\n\n:host(.tag-green.tag-green-contrast) {\n  color: var(--road-on-primary);\n  background-color: var(--road-green-monstera-60);\n}\n\n/**\n * Hover state\n */\n\n@media (any-hover: hover) {\n\n  :host(.chip-outline:hover) {\n    border-color: var(--road-outline-variant);\n  }\n\n  :host(.chip-secondary:hover) {\n    background: var(--road-button-primary-variant);\n  }\n\n  :host(.chip-secondary:hover) .chip-close {\n    color: var(--road-primary);\n  }\n}\n\n/**\n * Focus state\n */\n\n:host(.chip-outline:hover) {\n  border-color: var(--road-outline-variant);\n}\n\n:host(.chip-secondary.focus-visible) {\n  background: var(--road-button-primary-variant);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the tag.\n */\n\n@Component({\n  tag: 'road-tag',\n  styleUrl: 'tag.css',\n  shadow: true,\n})\nexport class Tag {\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color?: 'grey' | 'yellow' | 'red' | 'violet' | 'blue' | 'green'= 'grey';\n\n    /**\n   * Set to `true` for a contrast tag, for example on a gryy surface\n   */\n    @Prop() contrast: boolean = false;\n\n  render() {\n\n    const contrastClass = this.contrast ? `tag-${this.color} tag-${this.color}-contrast` : `tag-${this.color}`;\n\n    return (\n      <Host\n        class={`${contrastClass}`}\n      >\n        <slot/>\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/cjs/road-text.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e4bd5b5f.js');
+const index = require('./index-4fdb2a28.js');
 
 const textCss = ":host(.text-primary){color:var(--road-primary-10)}:host(.text-secondary){color:var(--road-secondary)}:host(.text-accent){color:var(--road-secondary-50)}:host(.text-info){color:var(--road-on-info-surface)}:host(.text-success){color:var(--road-on-success-surface)}:host(.text-warning){color:var(--road-on-warning-surface)}:host(.text-danger){color:var(--road-on-danger-surface)}:host(.text-default){color:var(--road-on-surface)}:host(.text-default-second){color:var(--road-grey-40)}:host(.text-disabled){color:var(--road-grey-60)}:host(.text-white){color:var(--road-grey-100-new)}";
 

package/dist/cjs/road-text.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-text.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,okBAAokB;;MCWvkB,IAAI;;;iBAKwI,SAAS;;EAEhK,MAAM;IACJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,QAAQ,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;IAExE,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,GAAG,UAAU,EAAE,IAC1BD,qBAAO,CACF,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/text/text.css?tag=road-text&encapsulation=shadow","./src/components/text/text.tsx"],"sourcesContent":["/*\n * Text\n *\n * Index\n * - Colors\n */\n\n/* COLORS\n -------------------- */\n\n/**\n * Primary\n */\n\n:host(.text-primary) {\n  color: var(--road-primary-10);\n}\n\n/**\n * Secondary\n */\n\n:host(.text-secondary) {\n  color: var(--road-secondary);\n}\n\n/**\n * Accent\n */\n\n:host(.text-accent) {\n  color: var(--road-secondary-50);\n}\n\n/**\n * Info\n */\n\n:host(.text-info) {\n  color: var(--road-on-info-surface);\n}\n\n/**\n * Success\n */\n\n:host(.text-success) {\n  color: var(--road-on-success-surface);\n}\n\n/**\n * Warning\n */\n\n:host(.text-warning) {\n  color: var(--road-on-warning-surface);\n}\n\n/**\n * Danger\n */\n\n:host(.text-danger) {\n  color: var(--road-on-danger-surface);\n}\n\n/**\n * Default\n */\n\n:host(.text-default) {\n  color: var(--road-on-surface);\n}\n\n/**\n * Default second\n */\n\n:host(.text-default-second) {\n  color: var(--road-grey-40);\n}\n\n/**\n * Disabled\n */\n\n:host(.text-disabled) {\n  color: var(--road-grey-60);\n}\n\n/**\n * White\n */\n\n:host(.text-white) {\n  color: var(--road-grey-100-new);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot  - Content of the text.\n */\n\n@Component({\n  tag: 'road-text',\n  styleUrl: 'text.css',\n  shadow: true,\n})\nexport class Text {\n\n  /**\n   * Color of the text.\n   */\n  @Prop() color?: 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | 'default' | 'default-second' | 'disabled' | 'white' = 'default';\n\n  render() {\n    const colorClass = this.color !== undefined ? `text-${this.color}` : '';\n\n    return (\n      <Host class={`${colorClass}`}>\n        <slot/>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"road-text.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,okBAAokB;;MCWvkB,IAAI;;;iBAKwI,SAAS;;EAEhK,MAAM;IACJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,QAAQ,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;IAExE,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,GAAG,UAAU,EAAE,IAC1BD,qBAAO,CACF,EACP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/text/text.css?tag=road-text&encapsulation=shadow","src/components/text/text.tsx"],"sourcesContent":["/*\n * Text\n *\n * Index\n * - Colors\n */\n\n/* COLORS\n -------------------- */\n\n/**\n * Primary\n */\n\n:host(.text-primary) {\n  color: var(--road-primary-10);\n}\n\n/**\n * Secondary\n */\n\n:host(.text-secondary) {\n  color: var(--road-secondary);\n}\n\n/**\n * Accent\n */\n\n:host(.text-accent) {\n  color: var(--road-secondary-50);\n}\n\n/**\n * Info\n */\n\n:host(.text-info) {\n  color: var(--road-on-info-surface);\n}\n\n/**\n * Success\n */\n\n:host(.text-success) {\n  color: var(--road-on-success-surface);\n}\n\n/**\n * Warning\n */\n\n:host(.text-warning) {\n  color: var(--road-on-warning-surface);\n}\n\n/**\n * Danger\n */\n\n:host(.text-danger) {\n  color: var(--road-on-danger-surface);\n}\n\n/**\n * Default\n */\n\n:host(.text-default) {\n  color: var(--road-on-surface);\n}\n\n/**\n * Default second\n */\n\n:host(.text-default-second) {\n  color: var(--road-grey-40);\n}\n\n/**\n * Disabled\n */\n\n:host(.text-disabled) {\n  color: var(--road-grey-60);\n}\n\n/**\n * White\n */\n\n:host(.text-white) {\n  color: var(--road-grey-100-new);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot  - Content of the text.\n */\n\n@Component({\n  tag: 'road-text',\n  styleUrl: 'text.css',\n  shadow: true,\n})\nexport class Text {\n\n  /**\n   * Color of the text.\n   */\n  @Prop() color?: 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | 'default' | 'default-second' | 'disabled' | 'white' = 'default';\n\n  render() {\n    const colorClass = this.color !== undefined ? `text-${this.color}` : '';\n\n    return (\n      <Host class={`${colorClass}`}>\n        <slot/>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/cjs/road-textarea.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e4bd5b5f.js');
+const index = require('./index-4fdb2a28.js');
 
 const textareaCss = ".sc-road-textarea-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-control.sc-road-textarea{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control.sc-road-textarea::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-textarea:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:-ms-input-placeholder~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:not(:disabled):focus{border-color:var(--road-input-outline-variant);outline:0}.form-control.sc-road-textarea:disabled,.form-control[readonly].sc-road-textarea{color:var(--road-on-surface-weak);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.textarea-control.sc-road-textarea{height:auto;padding-top:1rem;padding-bottom:0.5rem;line-height:1.5}.textarea-control.no-resize.sc-road-textarea{resize:none}.form-label.sc-road-textarea{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-extra-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.input-xl.sc-road-textarea-h{--height:3.5rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea{padding:1.5rem 1rem 0.5rem}.input-xl.sc-road-textarea-h .form-label.sc-road-textarea{top:1rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type=\"date\"].sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type=\"time\"].sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-textarea{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.form-control.is-invalid.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-textarea~.invalid-feedback.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid~.invalid-feedback.sc-road-textarea{display:block}.helper.sc-road-textarea{margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-grey-500)}";
 

package/dist/cjs/road-textarea.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-textarea.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/textarea/textarea.css?tag=road-textarea&encapsulation=scoped","./src/components/textarea/textarea.tsx"],"sourcesContent":["/*\n * Textarea\n *\n * Index\n * - Input\n * - Textarea\n * - Label\n * - Sizes\n * - Error\n * - Helper\n */\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n  font-family: var(--road-font, sans-serif);\n  color: var(--road-on-surface);\n}\n\n/* INPUT\n -------------------- */\n\n.form-control {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 3rem;\n  padding: 0.75rem 1rem 0;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  color: var(--road-on-surface);\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  box-shadow: none;\n  appearance: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-control::placeholder {\n  color: var(--road-on-surface-extra-weak);\n  opacity: 1;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-control:not(:disabled):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.form-control:focus ~ .form-label,\n.form-control[required]:valid ~ .form-label,\n.form-control.has-value ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-control:placeholder-shown ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n/* stylelint-disable */\n\n/* IE FIX */\n\n.form-control:-ms-input-placeholder ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n/* stylelint-enable */\n\n.form-control:not(:disabled):focus {\n  border-color: var(--road-input-outline-variant);\n  outline: 0;\n}\n\n/**\n * Disabled state\n */\n\n.form-control:disabled,\n.form-control[readonly] {\n  color: var(--road-on-surface-weak);\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n/* TEXTAREA\n -------------------- */\n\n.textarea-control {\n  height: auto;\n  padding-top: 1rem;\n  padding-bottom: 0.5rem;\n  line-height: 1.5;\n}\n\n.textarea-control.no-resize {\n  resize: none;\n}\n\n/* LABEL\n -------------------- */\n\n.form-label {\n  position: absolute;\n  top: 0.75rem;\n  left: 1rem;\n  display: block;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface-extra-weak);\n  pointer-events: none;\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  transform-origin: 0 0;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.input-xl) {\n  --height: 3.5rem;\n}\n\n:host(.input-xl) .form-control {\n  padding: 1.5rem 1rem 0.5rem;\n}\n\n:host(.input-xl) .form-label {\n  top: 1rem;\n}\n\n:host(.input-xl) .form-control:focus ~ .form-label,\n:host(.input-xl) .form-control[required]:valid ~ .form-label,\n:host(.input-xl) .form-control.has-value ~ .form-label,\n:host(.input-xl) .form-control[type=\"date\"] ~ .form-label,\n:host(.input-xl) .form-control[type=\"time\"] ~ .form-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.input-xl) .form-control:placeholder-shown ~ .form-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n  display: none;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-helper-medium);\n  color: var(--road-on-danger-surface);\n}\n\n.form-control.is-invalid,\n.was-validated .form-control:invalid {\n  border-color: var(--road-danger-outline);\n}\n\n.form-control.is-invalid ~ .invalid-feedback,\n.was-validated .form-control:invalid ~ .invalid-feedback {\n  display: block;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n  margin-top: 0.5rem;\n  font-size: var(--road-helper-medium);\n  color: var(--road-grey-500);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'road-textarea',\n  styleUrl: 'textarea.css',\n  scoped: true,\n})\nexport class Textarea {\n\n  /**\n   * The id of textarea\n   */\n  @Prop() textareaId: string = `road-textarea-${textareaIds++}`;\n\n  /**\n   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n   */\n  @Prop() autocapitalize: string = 'none';\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have focus when the page loads.\n   */\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the textarea.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * A hint to the browser for which keyboard to display.\n   * This attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.\n   */\n  @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n  /**\n   * A hint to the browser for which enter key to display.\n   * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n   * `\"previous\"`, `\"search\"`, and `\"send\"`.\n   */\n  @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.textareaId;\n\n  /**\n   * Instructional text that shows before the textarea has a value.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The sizes of the input.\n   */\n   @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the element will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck: boolean = false;\n\n    /**\n   * If `false`, to disabled resize.\n   */\n    @Prop() resize: boolean = true;\n\n  /**\n   * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n   */\n  @Prop() cols?: number;\n\n  /**\n   * The number of rows of the control.\n   */\n  @Prop() rows?: number;\n\n  /**\n   * Indicates how the control wraps text.\n   */\n  @Prop() wrap?: 'hard' | 'soft' | 'off';\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({ mutable: true }) value?: string | null = '';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.textareaId}-label`;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * Helper message for the field\n   */\n  @Prop() helper?: string;\n\n  /**\n   * Update the native textarea element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.roadchange.emit({ value: this.value });\n    this.roadChange.emit({ value: this.value });\n  }\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() roadinput!: EventEmitter<KeyboardEvent>;\n  /** @internal */\n  @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n\n  /**\n   * Emitted when the textarea loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the textarea has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  private getValue(): string {\n    return this.value || '';\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.roadinput.emit(ev as KeyboardEvent);\n    this.roadInput.emit(ev as KeyboardEvent);\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  render() {\n    const value = this.getValue();\n    const labelId = this.textareaId + '-label';\n    const hasValueClass = this.value !== '' ? 'has-value' : '';\n    const noResizeClass = this.resize == false ? 'no-resize' : '';\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`}>\n        <textarea\n          class={`form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`}\n          id={this.textareaId}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          disabled={this.disabled}\n          autoCapitalize={this.autocapitalize}\n          autoFocus={this.autofocus}\n          enterKeyHint={this.enterkeyhint}\n          inputMode={this.inputmode}\n          maxLength={this.maxlength}\n          minLength={this.minlength}\n          name={this.name}\n          placeholder={this.placeholder}\n          readOnly={this.readonly}\n          required={this.required}\n          value={value}\n          spellcheck={this.spellcheck}\n          cols={this.cols}\n          rows={this.rows}\n          wrap={this.wrap}\n          onInput={this.onInput}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n        >\n        </textarea>\n        <label class=\"form-label\" id={labelId} htmlFor={this.textareaId}>{this.label}</label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n        {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n      </Host>\n    );\n  }\n\n}\n\nlet textareaIds = 0;\n"],"version":3}
+{"file":"road-textarea.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/textarea/textarea.css?tag=road-textarea&encapsulation=scoped","src/components/textarea/textarea.tsx"],"sourcesContent":["/*\n * Textarea\n *\n * Index\n * - Input\n * - Textarea\n * - Label\n * - Sizes\n * - Error\n * - Helper\n */\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n  font-family: var(--road-font, sans-serif);\n  color: var(--road-on-surface);\n}\n\n/* INPUT\n -------------------- */\n\n.form-control {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 3rem;\n  padding: 0.75rem 1rem 0;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  color: var(--road-on-surface);\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  box-shadow: none;\n  appearance: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-control::placeholder {\n  color: var(--road-on-surface-extra-weak);\n  opacity: 1;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-control:not(:disabled):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.form-control:focus ~ .form-label,\n.form-control[required]:valid ~ .form-label,\n.form-control.has-value ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-control:placeholder-shown ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n/* stylelint-disable */\n\n/* IE FIX */\n\n.form-control:-ms-input-placeholder ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n/* stylelint-enable */\n\n.form-control:not(:disabled):focus {\n  border-color: var(--road-input-outline-variant);\n  outline: 0;\n}\n\n/**\n * Disabled state\n */\n\n.form-control:disabled,\n.form-control[readonly] {\n  color: var(--road-on-surface-weak);\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n/* TEXTAREA\n -------------------- */\n\n.textarea-control {\n  height: auto;\n  padding-top: 1rem;\n  padding-bottom: 0.5rem;\n  line-height: 1.5;\n}\n\n.textarea-control.no-resize {\n  resize: none;\n}\n\n/* LABEL\n -------------------- */\n\n.form-label {\n  position: absolute;\n  top: 0.75rem;\n  left: 1rem;\n  display: block;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface-extra-weak);\n  pointer-events: none;\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  transform-origin: 0 0;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.input-xl) {\n  --height: 3.5rem;\n}\n\n:host(.input-xl) .form-control {\n  padding: 1.5rem 1rem 0.5rem;\n}\n\n:host(.input-xl) .form-label {\n  top: 1rem;\n}\n\n:host(.input-xl) .form-control:focus ~ .form-label,\n:host(.input-xl) .form-control[required]:valid ~ .form-label,\n:host(.input-xl) .form-control.has-value ~ .form-label,\n:host(.input-xl) .form-control[type=\"date\"] ~ .form-label,\n:host(.input-xl) .form-control[type=\"time\"] ~ .form-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.input-xl) .form-control:placeholder-shown ~ .form-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n  display: none;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-helper-medium);\n  color: var(--road-on-danger-surface);\n}\n\n.form-control.is-invalid,\n.was-validated .form-control:invalid {\n  border-color: var(--road-danger-outline);\n}\n\n.form-control.is-invalid ~ .invalid-feedback,\n.was-validated .form-control:invalid ~ .invalid-feedback {\n  display: block;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n  margin-top: 0.5rem;\n  font-size: var(--road-helper-medium);\n  color: var(--road-grey-500);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'road-textarea',\n  styleUrl: 'textarea.css',\n  scoped: true,\n})\nexport class Textarea {\n\n  /**\n   * The id of textarea\n   */\n  @Prop() textareaId: string = `road-textarea-${textareaIds++}`;\n\n  /**\n   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n   */\n  @Prop() autocapitalize: string = 'none';\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have focus when the page loads.\n   */\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the textarea.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * A hint to the browser for which keyboard to display.\n   * This attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.\n   */\n  @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n  /**\n   * A hint to the browser for which enter key to display.\n   * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n   * `\"previous\"`, `\"search\"`, and `\"send\"`.\n   */\n  @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.textareaId;\n\n  /**\n   * Instructional text that shows before the textarea has a value.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The sizes of the input.\n   */\n   @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the element will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck: boolean = false;\n\n    /**\n   * If `false`, to disabled resize.\n   */\n    @Prop() resize: boolean = true;\n\n  /**\n   * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n   */\n  @Prop() cols?: number;\n\n  /**\n   * The number of rows of the control.\n   */\n  @Prop() rows?: number;\n\n  /**\n   * Indicates how the control wraps text.\n   */\n  @Prop() wrap?: 'hard' | 'soft' | 'off';\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({ mutable: true }) value?: string | null = '';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.textareaId}-label`;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * Helper message for the field\n   */\n  @Prop() helper?: string;\n\n  /**\n   * Update the native textarea element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.roadchange.emit({ value: this.value });\n    this.roadChange.emit({ value: this.value });\n  }\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() roadinput!: EventEmitter<KeyboardEvent>;\n  /** @internal */\n  @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n\n  /**\n   * Emitted when the textarea loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the textarea has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  private getValue(): string {\n    return this.value || '';\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.roadinput.emit(ev as KeyboardEvent);\n    this.roadInput.emit(ev as KeyboardEvent);\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  render() {\n    const value = this.getValue();\n    const labelId = this.textareaId + '-label';\n    const hasValueClass = this.value !== '' ? 'has-value' : '';\n    const noResizeClass = this.resize == false ? 'no-resize' : '';\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`}>\n        <textarea\n          class={`form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`}\n          id={this.textareaId}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          disabled={this.disabled}\n          autoCapitalize={this.autocapitalize}\n          autoFocus={this.autofocus}\n          enterKeyHint={this.enterkeyhint}\n          inputMode={this.inputmode}\n          maxLength={this.maxlength}\n          minLength={this.minlength}\n          name={this.name}\n          placeholder={this.placeholder}\n          readOnly={this.readonly}\n          required={this.required}\n          value={value}\n          spellcheck={this.spellcheck}\n          cols={this.cols}\n          rows={this.rows}\n          wrap={this.wrap}\n          onInput={this.onInput}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n        >\n        </textarea>\n        <label class=\"form-label\" id={labelId} htmlFor={this.textareaId}>{this.label}</label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n        {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n      </Host>\n    );\n  }\n\n}\n\nlet textareaIds = 0;\n"],"version":3}

package/dist/cjs/road-toast.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e4bd5b5f.js');
-const index$1 = require('./index-fd07207a.js');
+const index = require('./index-4fdb2a28.js');
+const index$1 = require('./index-fb57f684.js');
 
 const toastCss = ":host{position:fixed;right:0;bottom:1rem;left:0;z-index:1;display:flex;justify-content:center;width:328px;margin:0 auto;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .3s ease-in-out,visibility .15s,transform .3s ease-in-out;transform:translateY(-100%)}@media (min-width: 1200px){:host{right:1.5rem;bottom:3rem;left:auto;width:auto;transform:translateX(100%)}}:host(.toast-open){visibility:visible;opacity:1;transform:none}.toast{position:relative;box-sizing:border-box;display:flex;flex:0 0 100%;flex-flow:wrap;align-items:flex-start;width:328px;padding:0.75rem 2rem 0.6rem 1rem;font-family:var(--road-font);font-size:var(--road-body-medium);line-height:1.4;color:var(--road-on-info-surface-inverse);text-align:left;background:var(--road-info-surface-inverse);border-radius:0.25rem}@media (min-width: 575px){.toast{padding:1rem;margin-right:auto;margin-left:auto}}.toast-danger{color:var(--road-on-danger-surface-inverse);pointer-events:all;background:var(--road-danger-surface-inverse)}.toast-danger road-icon{color:var(--road-danger-icon-inverse)}.toast-warning{color:var(--road-on-warning-surface-inverse);background:var(--road-warning-surface-inverse)}.toast-warning road-icon{color:var(--road-warning-icon-inverse)}.toast-success{color:var(--road-on-success-surface-inverse);background:var(--road-success-surface-inverse)}.toast-success road-icon{color:var(--road-success-icon-inverse)}.toast-info{color:var(--road-on-info-surface-inverse);background:var(--road-info-surface-inverse)}.toast-info road-icon{color:var(--road-info-icon-inverse)}.toast-icon{top:auto;left:0.5rem;margin-top:-5px;margin-right:0.5rem}@media (min-width: 575px){.toast-icon{position:relative;top:auto;left:auto;margin-right:0.5rem}}.toast-close{position:absolute;right:0.5rem;padding:0;color:inherit;cursor:pointer;background:none;border:0;border-radius:4px;fill:var(--road-info-icon-inverse)}.toast-warning .toast-close{fill:var(--road-warning-icon-inverse)}.toast-close:focus{border-color:var(--road-info-surface-inverse);outline:none}.toast-label{width:240px;margin:0}:host ::slotted(road-progress){position:absolute;bottom:-8px;left:0;flex-basis:100%;width:100%;margin-top:0.5rem}@keyframes load{0%{width:0}100%{width:100%}}";
 

package/dist/cjs/road-toast.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-toast.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,urEAAurE;;MCmB3rE,KAAK;;;;;;;IA+DR,YAAO,GAAG,CAAC,EAAW;MAC5B,EAAE,CAAC,eAAe,EAAE,CAAC;MACrB,EAAE,CAAC,cAAc,EAAE,CAAC;MAEpB,IAAI,CAAC,KAAK,EAAE,CAAC;KACd,CAAC;kBA/DyC,KAAK;iBAKhB,MAAM;;mBAWZ,IAAI;;;;;EAW9B,aAAa;IACX,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;MACnC,UAAU,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;KAC9C;GACF;;;;EAMD,MAAM,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACnB,IAAG,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;MACnB,UAAU,CAAC;QACT,IAAI,CAAC,KAAK,EAAE,CAAC;OACd,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;KAClB;GACF;;;;EAMD,MAAM,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;GACrB;EAYD,gBAAgB;IACd,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;MACnC,UAAU,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;KAC9C;GACF;EAED,MAAM;IACJ,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,GAAG,YAAY,GAAG,EAAE,CAAC;IACzD,IAAI,IAAI,CAAC;IACT,QAAO,IAAI,CAAC,KAAK;MACjB,KAAK,MAAM;QACT,IAAI,GAAGA,wBAAgB,CAAC;QACxB,MAAM;MACR,KAAK,SAAS;QACZ,IAAI,GAAGC,2BAAmB,CAAC;QAC3B,MAAM;MACR,KAAK,SAAS;QACZ,IAAI,GAAGC,2BAAmB,CAAC;QAC3B,MAAM;MACR,KAAK,QAAQ;QACX,IAAI,GAAGC,0BAAkB,CAAC;QAC1B,MAAM;MACR;QACE,IAAI,GAAGH,wBAAgB,CAAC;QACxB,MAAM;KACP;IAED,IAAI,IAAI,CAAC,KAAK,IAAG,QAAQ,EAAE;MACzB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAA;KACjB;IAED,QACEI,QAACC,UAAI,IAAC,KAAK,EAAE,GAAG,gBAAgB,EAAE,EAAE,IAAI,EAAC,OAAO,IAC9CD,iBAAK,KAAK,EAAE,eAAe,IAAI,CAAC,KAAK,EAAE,IACrCA,uBAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,IAAI,iBAAc,MAAM,GAAa,EACzEA,eAAG,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAK,EACvCA,oBAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,gBAAY,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IAChFA,uBAAW,IAAI,EAAEE,uBAAe,EAAE,IAAI,EAAC,IAAI,GAAa,CACjD,EACTF,kBAAM,IAAI,EAAC,UAAU,GAAE,CACnB,CACD,EACP;GACH;;;;;;;;;","names":["alertInfoOutline","alertSuccessOutline","alertWarningOutline","alertDangerOutline","h","Host","navigationClose"],"sources":["./src/components/toast/toast.css?tag=road-toast&encapsulation=shadow","./src/components/toast/toast.tsx"],"sourcesContent":["/*\n * Toast\n *\n *\n * Index\n * - Container\n * - Toast\n * - Feedback color\n * - Feedback icon\n * - Close button\n */\n\n\n/* CONTAINER\n -------------------- */\n\n:host {\n  position: fixed;\n  right: 0;\n  bottom: 1rem;\n  left: 0;\n  z-index: 1;\n  display: flex;\n  justify-content: center;\n  width: 328px;\n  margin: 0 auto;\n  pointer-events: none;\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity .3s ease-in-out,visibility .15s,transform .3s ease-in-out;\n  transform: translateY(-100%);\n}\n\n@media (min-width: 1200px) {\n\n  :host {\n    right: 1.5rem;\n    bottom: 3rem;\n    left: auto;\n    width: auto;\n    transform: translateX(100%);\n  }\n}\n\n/**\n * Open state\n */\n\n:host(.toast-open) {\n  visibility: visible;\n  opacity: 1;\n  transform: none;\n}\n\n/* TOAST\n -------------------- */\n\n.toast {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 0 100%;\n  flex-flow: wrap;\n  align-items: flex-start;\n  width: 328px;\n  padding: 0.75rem 2rem 0.6rem 1rem;\n  font-family: var(--road-font);\n  font-size: var(--road-body-medium);\n  line-height: 1.4;\n  color: var(--road-on-info-surface-inverse);\n  text-align: left;\n  background: var(--road-info-surface-inverse);\n  border-radius: 0.25rem;\n}\n\n@media (min-width: 575px) {\n\n  .toast {\n    padding: 1rem;\n    margin-right: auto;\n    margin-left: auto;\n  }\n}\n\n/* FEEDBACK COLOR\n -------------------- */\n\n/**\n * Danger\n */\n\n.toast-danger {\n  color: var(--road-on-danger-surface-inverse);\n  pointer-events: all;\n  background: var(--road-danger-surface-inverse);\n}\n\n.toast-danger road-icon {\n  color: var(--road-danger-icon-inverse);\n}\n\n/**\n * Warning\n */\n\n.toast-warning {\n  color: var(--road-on-warning-surface-inverse);\n  background: var(--road-warning-surface-inverse);\n}\n\n.toast-warning road-icon {\n  color: var(--road-warning-icon-inverse);\n}\n\n/**\n * Success\n */\n\n.toast-success {\n  color: var(--road-on-success-surface-inverse);\n  background: var(--road-success-surface-inverse);\n}\n\n.toast-success road-icon {\n  color: var(--road-success-icon-inverse);\n}\n\n/**\n * Info\n */\n\n.toast-info {\n  color: var(--road-on-info-surface-inverse);\n  background: var(--road-info-surface-inverse);\n}\n\n.toast-info road-icon {\n  color: var(--road-info-icon-inverse);\n}\n\n/* FEEDBACK ICON\n -------------------- */\n\n.toast-icon {\n  top: auto;\n  left: 0.5rem;\n  margin-top: -5px;\n  margin-right: 0.5rem;\n}\n\n@media (min-width: 575px) {\n\n  .toast-icon {\n    position: relative;\n    top: auto;\n    left: auto;\n    margin-right: 0.5rem;\n  }\n}\n\n/* CLOSE BUTTON\n -------------------- */\n\n.toast-close {\n  position: absolute;\n  right: 0.5rem;\n  padding: 0;\n  color: inherit;\n  cursor: pointer;\n  background: none;\n  border: 0;\n  border-radius: 4px;\n  fill: var(--road-info-icon-inverse);\n}\n\n.toast-warning .toast-close {\n  fill: var(--road-warning-icon-inverse);\n}\n\n\n/**\n * Focus state\n */\n\n.toast-close:focus {\n  border-color: var(--road-info-surface-inverse);\n  outline: none;\n}\n\n/* TOAST LABEL\n -------------------- */\n\n.toast-label{\n  width: 240px;\n  margin: 0;\n}\n\n/* TOAST PORGRESS BAR\n -------------------- */\n\n:host ::slotted(road-progress) {\n  position: absolute;\n  bottom: -8px;\n  left: 0;\n  flex-basis: 100%;\n  width: 100%;\n  margin-top: 0.5rem;\n}\n\n/* ANIMATION\n -------------------- */\n\n\n@keyframes load {\n\n  0% {\n    width: 0;\n  }\n\n  100% {\n    width: 100%;\n  }\n}\n","import { Component, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n\n/**\n *\n * @slot progress - the progress bar in the toast.\n * color=\"info\" for Info\n * color=\"success\" for success\n * color=\"warning\" for warning\n * color=\"danger\" for danger\n */\n\n@Component({\n  tag: 'road-toast',\n  styleUrl: 'toast.css',\n  shadow: true,\n})\nexport class Toast {\n\n  /**\n   * Set `open` propertie to `true` to open the toast\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * Set the color of the toast. e.g. info, success, warning, danger\n   */\n  @Prop() color: FeedbackColors = 'info';\n\n  /**\n   * Text display in the toast\n   */\n  @Prop() label?: string;\n\n  /**\n   * How many milliseconds to wait before hiding the toast. if `\"0\"`, it will show\n   * until `close()` is called.\n   */\n  @Prop() timeout: number = 5000;\n\n  /**\n    * Indicate when closing the toast\n    */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Watch the isOpen property to start the timeout before closing\n   */\n  @Watch('isOpen')\n  isOpenChanged() {\n    if (this.isOpen && this.timeout > 0) {\n      setTimeout(() => this.close(), this.timeout);\n    }\n  }\n\n  /**\n   * Open the toast\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n    if(this.timeout > 0) {\n      setTimeout(() => {\n        this.close();\n      }, this.timeout);\n    }\n  }\n\n  /**\n   * Close the toast\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n    this.onClose.emit();\n  }\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  componentDidLoad() {\n    if (this.isOpen && this.timeout > 0) {\n      setTimeout(() => this.close(), this.timeout);\n    }\n  }\n\n  render() {\n    const toastIsOpenClass = this.isOpen ? 'toast-open' : '';\n    let icon;\n    switch(this.color) {\n    case 'info':\n      icon = alertInfoOutline;\n      break;\n    case 'success':\n      icon = alertSuccessOutline;\n      break;\n    case 'warning':\n      icon = alertWarningOutline;\n      break;\n    case 'danger':\n      icon = alertDangerOutline;\n      break;\n    default:\n      icon = alertInfoOutline;\n      break;\n    }\n\n    if (this.color =='danger') {\n      this.timeout = 0\n    }\n\n    return (\n      <Host class={`${toastIsOpenClass}`} role=\"alert\">\n        <div class={`toast toast-${this.color}`}>\n          <road-icon class=\"toast-icon\" icon={icon} aria-hidden=\"true\"></road-icon>\n          <p class=\"toast-label\">{this.label}</p>\n          <button type=\"button\" class=\"toast-close\" aria-label=\"Close\" onClick={this.onClick}>\n            <road-icon icon={navigationClose} size=\"md\"></road-icon>\n          </button>\n          <slot name=\"progress\"/>\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"road-toast.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,urEAAurE;;MCmB3rE,KAAK;;;;;;;IA+DR,YAAO,GAAG,CAAC,EAAW;MAC5B,EAAE,CAAC,eAAe,EAAE,CAAC;MACrB,EAAE,CAAC,cAAc,EAAE,CAAC;MAEpB,IAAI,CAAC,KAAK,EAAE,CAAC;KACd,CAAC;kBA/DyC,KAAK;iBAKhB,MAAM;;mBAWZ,IAAI;;;;;EAW9B,aAAa;IACX,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;MACnC,UAAU,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;KAC9C;GACF;;;;EAMD,MAAM,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACnB,IAAG,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;MACnB,UAAU,CAAC;QACT,IAAI,CAAC,KAAK,EAAE,CAAC;OACd,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;KAClB;GACF;;;;EAMD,MAAM,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;GACrB;EAYD,gBAAgB;IACd,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;MACnC,UAAU,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;KAC9C;GACF;EAED,MAAM;IACJ,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,GAAG,YAAY,GAAG,EAAE,CAAC;IACzD,IAAI,IAAI,CAAC;IACT,QAAO,IAAI,CAAC,KAAK;MACjB,KAAK,MAAM;QACT,IAAI,GAAGA,wBAAgB,CAAC;QACxB,MAAM;MACR,KAAK,SAAS;QACZ,IAAI,GAAGC,2BAAmB,CAAC;QAC3B,MAAM;MACR,KAAK,SAAS;QACZ,IAAI,GAAGC,2BAAmB,CAAC;QAC3B,MAAM;MACR,KAAK,QAAQ;QACX,IAAI,GAAGC,0BAAkB,CAAC;QAC1B,MAAM;MACR;QACE,IAAI,GAAGH,wBAAgB,CAAC;QACxB,MAAM;KACP;IAED,IAAI,IAAI,CAAC,KAAK,IAAG,QAAQ,EAAE;MACzB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAA;KACjB;IAED,QACEI,QAACC,UAAI,IAAC,KAAK,EAAE,GAAG,gBAAgB,EAAE,EAAE,IAAI,EAAC,OAAO,IAC9CD,iBAAK,KAAK,EAAE,eAAe,IAAI,CAAC,KAAK,EAAE,IACrCA,uBAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,IAAI,iBAAc,MAAM,GAAa,EACzEA,eAAG,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAK,EACvCA,oBAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,gBAAY,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IAChFA,uBAAW,IAAI,EAAEE,uBAAe,EAAE,IAAI,EAAC,IAAI,GAAa,CACjD,EACTF,kBAAM,IAAI,EAAC,UAAU,GAAE,CACnB,CACD,EACP;GACH;;;;;;;;;","names":["alertInfoOutline","alertSuccessOutline","alertWarningOutline","alertDangerOutline","h","Host","navigationClose"],"sources":["src/components/toast/toast.css?tag=road-toast&encapsulation=shadow","src/components/toast/toast.tsx"],"sourcesContent":["/*\n * Toast\n *\n *\n * Index\n * - Container\n * - Toast\n * - Feedback color\n * - Feedback icon\n * - Close button\n */\n\n\n/* CONTAINER\n -------------------- */\n\n:host {\n  position: fixed;\n  right: 0;\n  bottom: 1rem;\n  left: 0;\n  z-index: 1;\n  display: flex;\n  justify-content: center;\n  width: 328px;\n  margin: 0 auto;\n  pointer-events: none;\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity .3s ease-in-out,visibility .15s,transform .3s ease-in-out;\n  transform: translateY(-100%);\n}\n\n@media (min-width: 1200px) {\n\n  :host {\n    right: 1.5rem;\n    bottom: 3rem;\n    left: auto;\n    width: auto;\n    transform: translateX(100%);\n  }\n}\n\n/**\n * Open state\n */\n\n:host(.toast-open) {\n  visibility: visible;\n  opacity: 1;\n  transform: none;\n}\n\n/* TOAST\n -------------------- */\n\n.toast {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 0 100%;\n  flex-flow: wrap;\n  align-items: flex-start;\n  width: 328px;\n  padding: 0.75rem 2rem 0.6rem 1rem;\n  font-family: var(--road-font);\n  font-size: var(--road-body-medium);\n  line-height: 1.4;\n  color: var(--road-on-info-surface-inverse);\n  text-align: left;\n  background: var(--road-info-surface-inverse);\n  border-radius: 0.25rem;\n}\n\n@media (min-width: 575px) {\n\n  .toast {\n    padding: 1rem;\n    margin-right: auto;\n    margin-left: auto;\n  }\n}\n\n/* FEEDBACK COLOR\n -------------------- */\n\n/**\n * Danger\n */\n\n.toast-danger {\n  color: var(--road-on-danger-surface-inverse);\n  pointer-events: all;\n  background: var(--road-danger-surface-inverse);\n}\n\n.toast-danger road-icon {\n  color: var(--road-danger-icon-inverse);\n}\n\n/**\n * Warning\n */\n\n.toast-warning {\n  color: var(--road-on-warning-surface-inverse);\n  background: var(--road-warning-surface-inverse);\n}\n\n.toast-warning road-icon {\n  color: var(--road-warning-icon-inverse);\n}\n\n/**\n * Success\n */\n\n.toast-success {\n  color: var(--road-on-success-surface-inverse);\n  background: var(--road-success-surface-inverse);\n}\n\n.toast-success road-icon {\n  color: var(--road-success-icon-inverse);\n}\n\n/**\n * Info\n */\n\n.toast-info {\n  color: var(--road-on-info-surface-inverse);\n  background: var(--road-info-surface-inverse);\n}\n\n.toast-info road-icon {\n  color: var(--road-info-icon-inverse);\n}\n\n/* FEEDBACK ICON\n -------------------- */\n\n.toast-icon {\n  top: auto;\n  left: 0.5rem;\n  margin-top: -5px;\n  margin-right: 0.5rem;\n}\n\n@media (min-width: 575px) {\n\n  .toast-icon {\n    position: relative;\n    top: auto;\n    left: auto;\n    margin-right: 0.5rem;\n  }\n}\n\n/* CLOSE BUTTON\n -------------------- */\n\n.toast-close {\n  position: absolute;\n  right: 0.5rem;\n  padding: 0;\n  color: inherit;\n  cursor: pointer;\n  background: none;\n  border: 0;\n  border-radius: 4px;\n  fill: var(--road-info-icon-inverse);\n}\n\n.toast-warning .toast-close {\n  fill: var(--road-warning-icon-inverse);\n}\n\n\n/**\n * Focus state\n */\n\n.toast-close:focus {\n  border-color: var(--road-info-surface-inverse);\n  outline: none;\n}\n\n/* TOAST LABEL\n -------------------- */\n\n.toast-label{\n  width: 240px;\n  margin: 0;\n}\n\n/* TOAST PORGRESS BAR\n -------------------- */\n\n:host ::slotted(road-progress) {\n  position: absolute;\n  bottom: -8px;\n  left: 0;\n  flex-basis: 100%;\n  width: 100%;\n  margin-top: 0.5rem;\n}\n\n/* ANIMATION\n -------------------- */\n\n\n@keyframes load {\n\n  0% {\n    width: 0;\n  }\n\n  100% {\n    width: 100%;\n  }\n}\n","import { Component, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n\n/**\n *\n * @slot progress - the progress bar in the toast.\n * color=\"info\" for Info\n * color=\"success\" for success\n * color=\"warning\" for warning\n * color=\"danger\" for danger\n */\n\n@Component({\n  tag: 'road-toast',\n  styleUrl: 'toast.css',\n  shadow: true,\n})\nexport class Toast {\n\n  /**\n   * Set `open` propertie to `true` to open the toast\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * Set the color of the toast. e.g. info, success, warning, danger\n   */\n  @Prop() color: FeedbackColors = 'info';\n\n  /**\n   * Text display in the toast\n   */\n  @Prop() label?: string;\n\n  /**\n   * How many milliseconds to wait before hiding the toast. if `\"0\"`, it will show\n   * until `close()` is called.\n   */\n  @Prop() timeout: number = 5000;\n\n  /**\n    * Indicate when closing the toast\n    */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Watch the isOpen property to start the timeout before closing\n   */\n  @Watch('isOpen')\n  isOpenChanged() {\n    if (this.isOpen && this.timeout > 0) {\n      setTimeout(() => this.close(), this.timeout);\n    }\n  }\n\n  /**\n   * Open the toast\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n    if(this.timeout > 0) {\n      setTimeout(() => {\n        this.close();\n      }, this.timeout);\n    }\n  }\n\n  /**\n   * Close the toast\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n    this.onClose.emit();\n  }\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  componentDidLoad() {\n    if (this.isOpen && this.timeout > 0) {\n      setTimeout(() => this.close(), this.timeout);\n    }\n  }\n\n  render() {\n    const toastIsOpenClass = this.isOpen ? 'toast-open' : '';\n    let icon;\n    switch(this.color) {\n    case 'info':\n      icon = alertInfoOutline;\n      break;\n    case 'success':\n      icon = alertSuccessOutline;\n      break;\n    case 'warning':\n      icon = alertWarningOutline;\n      break;\n    case 'danger':\n      icon = alertDangerOutline;\n      break;\n    default:\n      icon = alertInfoOutline;\n      break;\n    }\n\n    if (this.color =='danger') {\n      this.timeout = 0\n    }\n\n    return (\n      <Host class={`${toastIsOpenClass}`} role=\"alert\">\n        <div class={`toast toast-${this.color}`}>\n          <road-icon class=\"toast-icon\" icon={icon} aria-hidden=\"true\"></road-icon>\n          <p class=\"toast-label\">{this.label}</p>\n          <button type=\"button\" class=\"toast-close\" aria-label=\"Close\" onClick={this.onClick}>\n            <road-icon icon={navigationClose} size=\"md\"></road-icon>\n          </button>\n          <slot name=\"progress\"/>\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/cjs/road-toggle.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e4bd5b5f.js');
-require('./polyfill-9453e116.js');
+const index = require('./index-4fdb2a28.js');
+require('./polyfill-b1fff766.js');
 
 const toggleCss = ".sc-road-toggle-h{--toggle-lever-width:4.5rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);font-size:var(--road-label-medium);color:var(--road-on-surface)}.form-toggle-input.sc-road-toggle{position:absolute;z-index:-1;opacity:0}.form-toggle-label.sc-road-toggle{display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-toggle-lever.sc-road-toggle{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;width:var(--toggle-lever-width);height:2rem;padding:0.5rem 0.625rem;margin-right:0.75rem;font-size:0.625rem;font-weight:700;line-height:1.6;content:\"\";background:var(--road-on-surface-extra-weak);border:0.125rem solid transparent;border-radius:1.125rem;transition:background 0.2s ease-in-out}.form-toggle-lever.sc-road-toggle::before{font-size:0.625rem;font-weight:700;color:var(--road-surface);text-transform:uppercase;content:attr(data-off)}.form-toggle-lever.sc-road-toggle::after{position:absolute;top:0.0625rem;left:0.0625rem;display:block;width:1.625rem;height:1.625rem;content:\"\";background:var(--road-on-success-surface-inverse);border-radius:50%;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{justify-content:flex-start;background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface);content:attr(data-on)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::after{transform:translateX(calc(var(--toggle-lever-width) - 2rem))}.form-toggle-input.focus-visible.sc-road-toggle~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-secondary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-info.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-info-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-info.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-warning.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-warning-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-warning.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-on-warning-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-danger.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-danger-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-danger.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-right.sc-road-toggle{margin-right:0;margin-left:0.75rem}.form-toggle-spaced.sc-road-toggle{display:flex;justify-content:space-between}";
 

package/dist/cjs/road-toggle.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-toggle.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,0mHAA0mH;;MCU/mH,MAAM;;;;;;;;;IAgGT,YAAO,GAAG;MAChB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;KAC9B,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;oBAvGyB,eAAe,SAAS,EAAE,EAAE;gBAKhC,IAAI,CAAC,QAAQ;mBAKD,KAAK;oBAKrB,KAAK;iBAKA,GAAG,IAAI,CAAC,QAAQ,QAAQ;iBAKH,SAAS;wBAKtB,KAAK;oBAKT,KAAK;iBAKT,IAAI;cAKP,KAAK;eAKJ,IAAI;;EA8B1B,cAAc,CAAC,SAAkB;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;IACH,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;GACJ;EAgBD,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IACzC,MAAM,SAAS,GAAGA,mBAAO,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAS,CAAC;IAC7G,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,cAAc,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAC/E,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,IAAI,oBAAoB,CAAC;IAC5D,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,GAAG,mBAAmB,GAAG,EAAE,CAAC;IAEtE,QACEA,QAACC,UAAI,QACHD,mBACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,kBACH,GAAG,IAAI,CAAC,OAAO,EAAE,mBAChB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,qBAC3B,OAAO,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB,EACFA,mBAAO,KAAK,EAAE,qBAAqB,aAAa,IAAI,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACrF,IAAI,CAAC,YAAY,IAAI,SAAS,EAC/BA,iBAAK,KAAK,EAAE,qBAAqB,gBAAgB,EAAE,cAAY,IAAI,CAAC,GAAG,aAAW,IAAI,CAAC,EAAE,GAAQ,EAChG,IAAI,CAAC,YAAY,GAAG,EAAE,GAAG,SAAS,CAC7B,CACH,EACP;GACH;;;;;AAGH,IAAI,SAAS,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["./src/components/toggle/toggle.css?tag=road-toggle&encapsulation=scoped","./src/components/toggle/toggle.tsx"],"sourcesContent":["/*\n * Toggle\n *\n * For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Toggle\n * - Label\n * - Lever\n * - Feedback\n * - Position\n */\n\n/**\n * @prop --toggle-lever-width: width of the lever\n */\n\n/* toggle\n -------------------- */\n\n:host {\n  --toggle-lever-width: 4.5rem;\n\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-label-medium);\n  color: var(--road-on-surface);\n}\n\n/**\n * Hide input\n */\n\n.form-toggle-input {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n}\n\n/* LABEL\n -------------------- */\n\n.form-toggle-label {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* LEVER\n -------------------- */\n\n.form-toggle-lever {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: flex-end;\n  width: var(--toggle-lever-width);\n  height: 2rem;\n  padding: 0.5rem 0.625rem;\n  margin-right: 0.75rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  line-height: 1.6;\n  content: \"\";\n  background: var(--road-on-surface-extra-weak);\n  border: 0.125rem solid transparent;\n  border-radius: 1.125rem;\n  transition: background 0.2s ease-in-out;\n}\n\n/**\n * Text in the toggle widget\n */\n\n.form-toggle-lever::before {\n  font-size: 0.625rem;\n  font-weight: 700;\n  color: var(--road-surface);\n  text-transform: uppercase;\n  content: attr(data-off);\n}\n\n/**\n * Round lever in the widget\n */\n\n.form-toggle-lever::after {\n  position: absolute;\n  top: 0.0625rem;\n  left: 0.0625rem;\n  display: block;\n  width: 1.625rem;\n  height: 1.625rem;\n  content: \"\";\n  background: var(--road-on-success-surface-inverse);\n  border-radius: 50%;\n  box-shadow: var(--road-elevation-low);\n  transition: transform 0.2s ease-in-out;\n}\n\n/**\n * Checked state\n */\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {\n  justify-content: flex-start;\n  background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {\n  color: var(--road-surface);\n  content: attr(data-on);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::after {\n  transform: translateX(calc(var(--toggle-lever-width) - 2rem));\n}\n\n/**\n * Focus on Tab\n */\n\n.form-toggle-input.focus-visible ~ .form-toggle-label .form-toggle-lever {\n  box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary);\n}\n\n/* FEEDBACK\n -------------------- */\n\n/**\n * Secondary\n */\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever {\n  background: var(--road-secondary);\n}\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever::before {\n  color: var(--road-surface);\n}\n\n/**\n * Info\n */\n\n.form-toggle-input:checked ~ .form-toggle-info .form-toggle-lever {\n  background: var(--road-info-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-info .form-toggle-lever::before {\n  color: var(--road-surface);\n}\n\n/**\n * Success\n */\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever {\n  background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever::before {\n  color: var(--road-surface);\n}\n\n/**\n * Warning\n */\n\n.form-toggle-input:checked ~ .form-toggle-warning .form-toggle-lever {\n  background: var(--road-warning-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-warning .form-toggle-lever::before {\n  color: var(--road-on-warning-surface-inverse);\n}\n\n/**\n * Danger\n */\n\n.form-toggle-input:checked ~ .form-toggle-danger .form-toggle-lever {\n  background: var(--road-danger-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-danger .form-toggle-lever::before {\n  color: var(--road-surface);\n}\n\n/* POSITION\n -------------------- */\n\n.form-toggle-right {\n  margin-right: 0;\n  margin-left: 0.75rem;\n}\n\n.form-toggle-spaced {\n  display: flex;\n  justify-content: space-between;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\nimport { FeedbackColors } from '../../interface';\n\n@Component({\n  tag: 'road-toggle',\n  styleUrl: 'toggle.css',\n  scoped: true,\n})\nexport class toggle {\n\n  /**\n   * The id of toggle\n   */\n  @Prop() toggleId: string = `road-toggle-${toggleIds++}`;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.toggleId;\n\n  /**\n   * If `true`, the toggle is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * If `true`, the user cannot interact with the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.toggleId}-label`;\n\n  /**\n   * Set the color of alert. e.g. info, success, warning, danger\n   */\n  @Prop() color?: 'success' | FeedbackColors = 'success';\n\n  /**\n   * If `true`, the label is at left of the toggle\n   */\n  @Prop() hasLeftLabel: boolean = false;\n\n  /**\n   * Add space between label and toggle element\n   */\n  @Prop() isSpaced: boolean = false;\n\n  /**\n   * Value the form will get\n   */\n  @Prop() value: string = 'on';\n\n  /**\n   * Text display for \"`on`\" state in the toggle lever\n   */\n  @Prop() on: string = \"yes\";\n\n  /**\n   * Text display for \"`off`\" state in the toggle lever\n   */\n  @Prop() off: string = \"no\";\n\n  /**\n   * Emitted when the checked property has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    checked: boolean;\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    checked: boolean;\n    value: string | undefined | null\n  }>;\n\n  /**\n   * Emitted when the toggle has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  @Watch('checked')\n  checkedChanged(isChecked: boolean) {\n    this.roadchange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n    this.roadChange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n  }\n\n  private onClick = () => {\n    this.checked = !this.checked;\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadBlur.emit();\n    this.roadblur.emit();\n  };\n\n  render() {\n    const labelId = this.toggleId + '-label';\n    const textLabel = <label class=\"form-toggle-label\" id={labelId} htmlFor={this.toggleId}>{this.label}</label>;\n    const colorClass = this.color !== undefined ? 'form-toggle-' + this.color : '';\n    const isSpacedClass = this.isSpaced && 'form-toggle-spaced';\n    const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';\n\n    return (\n      <Host>\n        <input\n          class=\"form-toggle-input\"\n          type=\"checkbox\"\n          id={this.toggleId}\n          name={this.name}\n          checked={this.checked}\n          disabled={this.disabled}\n          value={this.value}\n          aria-checked={`${this.checked}`}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          onClick={this.onClick}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        />\n        <label class={`form-toggle-label ${isSpacedClass} ${colorClass}`} htmlFor={this.toggleId}>\n          {this.hasLeftLabel && textLabel}\n          <div class={`form-toggle-lever ${righttoggleClass}`} data-off={this.off} data-on={this.on}></div>\n          {this.hasLeftLabel ? '' : textLabel}\n        </label>\n      </Host>\n    );\n  }\n}\n\nlet toggleIds = 0;\n"],"version":3}
+{"file":"road-toggle.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,0mHAA0mH;;MCU/mH,MAAM;;;;;;;;;IAgGT,YAAO,GAAG;MAChB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;KAC9B,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;oBAvGyB,eAAe,SAAS,EAAE,EAAE;gBAKhC,IAAI,CAAC,QAAQ;mBAKD,KAAK;oBAKrB,KAAK;iBAKA,GAAG,IAAI,CAAC,QAAQ,QAAQ;iBAKH,SAAS;wBAKtB,KAAK;oBAKT,KAAK;iBAKT,IAAI;cAKP,KAAK;eAKJ,IAAI;;EA8B1B,cAAc,CAAC,SAAkB;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;IACH,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;GACJ;EAgBD,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IACzC,MAAM,SAAS,GAAGA,mBAAO,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAS,CAAC;IAC7G,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,cAAc,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAC/E,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,IAAI,oBAAoB,CAAC;IAC5D,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,GAAG,mBAAmB,GAAG,EAAE,CAAC;IAEtE,QACEA,QAACC,UAAI,QACHD,mBACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,kBACH,GAAG,IAAI,CAAC,OAAO,EAAE,mBAChB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,qBAC3B,OAAO,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB,EACFA,mBAAO,KAAK,EAAE,qBAAqB,aAAa,IAAI,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACrF,IAAI,CAAC,YAAY,IAAI,SAAS,EAC/BA,iBAAK,KAAK,EAAE,qBAAqB,gBAAgB,EAAE,cAAY,IAAI,CAAC,GAAG,aAAW,IAAI,CAAC,EAAE,GAAQ,EAChG,IAAI,CAAC,YAAY,GAAG,EAAE,GAAG,SAAS,CAC7B,CACH,EACP;GACH;;;;;AAGH,IAAI,SAAS,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["src/components/toggle/toggle.css?tag=road-toggle&encapsulation=scoped","src/components/toggle/toggle.tsx"],"sourcesContent":["/*\n * Toggle\n *\n * For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Toggle\n * - Label\n * - Lever\n * - Feedback\n * - Position\n */\n\n/**\n * @prop --toggle-lever-width: width of the lever\n */\n\n/* toggle\n -------------------- */\n\n:host {\n  --toggle-lever-width: 4.5rem;\n\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-label-medium);\n  color: var(--road-on-surface);\n}\n\n/**\n * Hide input\n */\n\n.form-toggle-input {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n}\n\n/* LABEL\n -------------------- */\n\n.form-toggle-label {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* LEVER\n -------------------- */\n\n.form-toggle-lever {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: flex-end;\n  width: var(--toggle-lever-width);\n  height: 2rem;\n  padding: 0.5rem 0.625rem;\n  margin-right: 0.75rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  line-height: 1.6;\n  content: \"\";\n  background: var(--road-on-surface-extra-weak);\n  border: 0.125rem solid transparent;\n  border-radius: 1.125rem;\n  transition: background 0.2s ease-in-out;\n}\n\n/**\n * Text in the toggle widget\n */\n\n.form-toggle-lever::before {\n  font-size: 0.625rem;\n  font-weight: 700;\n  color: var(--road-surface);\n  text-transform: uppercase;\n  content: attr(data-off);\n}\n\n/**\n * Round lever in the widget\n */\n\n.form-toggle-lever::after {\n  position: absolute;\n  top: 0.0625rem;\n  left: 0.0625rem;\n  display: block;\n  width: 1.625rem;\n  height: 1.625rem;\n  content: \"\";\n  background: var(--road-on-success-surface-inverse);\n  border-radius: 50%;\n  box-shadow: var(--road-elevation-low);\n  transition: transform 0.2s ease-in-out;\n}\n\n/**\n * Checked state\n */\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {\n  justify-content: flex-start;\n  background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {\n  color: var(--road-surface);\n  content: attr(data-on);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::after {\n  transform: translateX(calc(var(--toggle-lever-width) - 2rem));\n}\n\n/**\n * Focus on Tab\n */\n\n.form-toggle-input.focus-visible ~ .form-toggle-label .form-toggle-lever {\n  box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary);\n}\n\n/* FEEDBACK\n -------------------- */\n\n/**\n * Secondary\n */\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever {\n  background: var(--road-secondary);\n}\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever::before {\n  color: var(--road-surface);\n}\n\n/**\n * Info\n */\n\n.form-toggle-input:checked ~ .form-toggle-info .form-toggle-lever {\n  background: var(--road-info-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-info .form-toggle-lever::before {\n  color: var(--road-surface);\n}\n\n/**\n * Success\n */\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever {\n  background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever::before {\n  color: var(--road-surface);\n}\n\n/**\n * Warning\n */\n\n.form-toggle-input:checked ~ .form-toggle-warning .form-toggle-lever {\n  background: var(--road-warning-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-warning .form-toggle-lever::before {\n  color: var(--road-on-warning-surface-inverse);\n}\n\n/**\n * Danger\n */\n\n.form-toggle-input:checked ~ .form-toggle-danger .form-toggle-lever {\n  background: var(--road-danger-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-danger .form-toggle-lever::before {\n  color: var(--road-surface);\n}\n\n/* POSITION\n -------------------- */\n\n.form-toggle-right {\n  margin-right: 0;\n  margin-left: 0.75rem;\n}\n\n.form-toggle-spaced {\n  display: flex;\n  justify-content: space-between;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\nimport { FeedbackColors } from '../../interface';\n\n@Component({\n  tag: 'road-toggle',\n  styleUrl: 'toggle.css',\n  scoped: true,\n})\nexport class toggle {\n\n  /**\n   * The id of toggle\n   */\n  @Prop() toggleId: string = `road-toggle-${toggleIds++}`;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.toggleId;\n\n  /**\n   * If `true`, the toggle is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * If `true`, the user cannot interact with the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.toggleId}-label`;\n\n  /**\n   * Set the color of alert. e.g. info, success, warning, danger\n   */\n  @Prop() color?: 'success' | FeedbackColors = 'success';\n\n  /**\n   * If `true`, the label is at left of the toggle\n   */\n  @Prop() hasLeftLabel: boolean = false;\n\n  /**\n   * Add space between label and toggle element\n   */\n  @Prop() isSpaced: boolean = false;\n\n  /**\n   * Value the form will get\n   */\n  @Prop() value: string = 'on';\n\n  /**\n   * Text display for \"`on`\" state in the toggle lever\n   */\n  @Prop() on: string = \"yes\";\n\n  /**\n   * Text display for \"`off`\" state in the toggle lever\n   */\n  @Prop() off: string = \"no\";\n\n  /**\n   * Emitted when the checked property has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    checked: boolean;\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    checked: boolean;\n    value: string | undefined | null\n  }>;\n\n  /**\n   * Emitted when the toggle has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  @Watch('checked')\n  checkedChanged(isChecked: boolean) {\n    this.roadchange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n    this.roadChange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n  }\n\n  private onClick = () => {\n    this.checked = !this.checked;\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadBlur.emit();\n    this.roadblur.emit();\n  };\n\n  render() {\n    const labelId = this.toggleId + '-label';\n    const textLabel = <label class=\"form-toggle-label\" id={labelId} htmlFor={this.toggleId}>{this.label}</label>;\n    const colorClass = this.color !== undefined ? 'form-toggle-' + this.color : '';\n    const isSpacedClass = this.isSpaced && 'form-toggle-spaced';\n    const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';\n\n    return (\n      <Host>\n        <input\n          class=\"form-toggle-input\"\n          type=\"checkbox\"\n          id={this.toggleId}\n          name={this.name}\n          checked={this.checked}\n          disabled={this.disabled}\n          value={this.value}\n          aria-checked={`${this.checked}`}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          onClick={this.onClick}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        />\n        <label class={`form-toggle-label ${isSpacedClass} ${colorClass}`} htmlFor={this.toggleId}>\n          {this.hasLeftLabel && textLabel}\n          <div class={`form-toggle-lever ${righttoggleClass}`} data-off={this.off} data-on={this.on}></div>\n          {this.hasLeftLabel ? '' : textLabel}\n        </label>\n      </Host>\n    );\n  }\n}\n\nlet toggleIds = 0;\n"],"version":3}

package/dist/cjs/road-toolbar-title-page.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e4bd5b5f.js');
+const index = require('./index-4fdb2a28.js');
 
 const toolbarTitlePageCss = ":host{position:absolute;top:30px;left:0.8rem}@media (min-width: 1200px){:host{position:fixed;top:0;left:0;display:flex;flex:1;align-items:center;width:100%;height:100%;padding:0 3.5rem;text-align:center}}.toolbar-title-page{display:block;width:100%;font-size:var(--road-font-size-18);font-weight:700;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto}@media (min-width: 1200px){.toolbar-title-page{font-size:var(--road-font-size-20);text-align:center}}";