@six-group/ui-library 0.0.0-insider.98c4058 → 0.0.0-insider.99e1a07

package/dist/collection/components/six-button/six-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-button.js","sourceRoot":"","sources":["../../../src/components/six-button/six-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { submitForm } from '../../utils/form';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The button's label.\n * @slot prefix - Used to prepend an icon or similar element to the button.\n * @slot suffix - Used to append an icon or similar element to the button.\n *\n * @part base - The component's base wrapper.\n * @part prefix - The prefix container.\n * @part label - The button's label.\n * @part suffix - The suffix container.\n * @part caret - The button's caret.\n */\n\n@Component({\n  tag: 'six-button',\n  styleUrl: 'six-button.scss',\n  shadow: true,\n})\nexport class SixButton {\n  private nativeButton?: HTMLButtonElement | HTMLAnchorElement;\n\n  @Element() host!: HTMLSixButtonElement;\n\n  @State() hasFocus = false;\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasSuffix = false;\n\n  /** The button's type. */\n  @Prop({ reflect: true }) type:\n    | 'secondary'\n    | 'primary'\n    | 'link'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'action'\n    | 'action-outline' = 'primary';\n\n  /** The button's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */\n  @Prop() caret = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to draw the button in a loading state. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Set to true to draw a pill-style button with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Set to true to draw a circle button. */\n  @Prop({ reflect: true }) circle = false;\n\n  /** Indicates if activating the button should submit the form. Ignored when `href` is set. */\n  @Prop({ reflect: true }) submit = false;\n\n  /** Indicates if activating the button should reset the form. */\n  @Prop({ reflect: true }) reset = false;\n\n  /** An optional name for the button. Ignored when `href` is set. */\n  @Prop() name = '';\n\n  /** An optional value for the button. Ignored when `href` is set. */\n  @Prop() value = '';\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @Prop() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @Prop() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @Prop() download?: string;\n\n  /** Emitted when the button loses focus. */\n  @Event({ eventName: 'six-button-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the button gains focus. */\n  @Event({ eventName: 'six-button-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  /** Sets focus on the button. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeButton?.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @Method()\n  async removeFocus() {\n    this.nativeButton?.blur();\n  }\n\n  private handleSlotChange = () => {\n    this.hasLabel = hasSlot(this.host);\n    this.hasPrefix = hasSlot(this.host, 'prefix');\n    this.hasSuffix = hasSlot(this.host, 'suffix');\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    if (this.submit) {\n      event.preventDefault();\n      submitForm(this.host);\n    }\n  };\n\n  render() {\n    const isLink = this.href != null;\n    const isButton = !isLink;\n    const Button = isLink ? 'a' : 'button';\n\n    return (\n      <div onClick={this.handleClick} class={{ 'button-wrapper--disabled': this.disabled }}>\n        <Button\n          ref={(el) => (this.nativeButton = el)}\n          part=\"base\"\n          class={{\n            button: true,\n\n            // Types\n            'button--secondary': this.type === 'secondary',\n            'button--primary': this.type === 'primary',\n            'button--link': this.type === 'link',\n            'button--success': this.type === 'success',\n            'button--warning': this.type === 'warning',\n            'button--danger': this.type === 'danger',\n            'button--action': this.type === 'action',\n            'button--action-outline': this.type === 'action-outline',\n\n            // Sizes\n            'button--small': this.size === 'small',\n            'button--medium': this.size === 'medium',\n            'button--large': this.size === 'large',\n\n            // Modifiers\n            'button--caret': this.caret,\n            'button--circle': this.circle,\n            'button--disabled': this.disabled,\n            'button--focused': this.hasFocus,\n            'button--loading': this.loading,\n            'button--pill': this.pill,\n            'button--has-label': this.hasLabel,\n            'button--has-prefix': this.hasPrefix,\n            'button--has-suffix': this.hasSuffix,\n          }}\n          disabled={isButton ? this.disabled : undefined}\n          tabindex={this.disabled ? '-1' : undefined}\n          type={isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined}\n          name={isButton ? this.name : undefined}\n          value={isButton ? this.value : undefined}\n          href={isLink ? this.href : undefined}\n          target={isLink && this.target != null ? this.target : undefined}\n          download={isLink && this.download != null ? this.download : undefined}\n          rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          data-testid=\"button\"\n        >\n          <span part=\"prefix\" class=\"button__prefix\">\n            <slot onSlotchange={this.handleSlotChange} name=\"prefix\" />\n          </span>\n          <span part=\"label\" class=\"button__label\">\n            <slot onSlotchange={this.handleSlotChange} />\n          </span>\n          <span part=\"suffix\" class=\"button__suffix\">\n            <slot onSlotchange={this.handleSlotChange} name=\"suffix\" />\n          </span>\n          {this.caret && (\n            <span part=\"caret\" class=\"button__caret\">\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <polyline points=\"6 9 12 15 18 9\" />\n              </svg>\n            </span>\n          )}\n\n          {this.loading && <six-spinner />}\n        </Button>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-button.js","sourceRoot":"","sources":["../../../src/components/six-button/six-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChG,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C;;;;;;;;;;;;;;;GAeG;AAOH,MAAM,OAAO,SAAS;IALtB;QAUW,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QACjB,cAAS,GAAG,KAAK,CAAC;QAClB,cAAS,GAAG,KAAK,CAAC;QAE3B,yBAAyB;QACA,SAAI,GAQN,SAAS,CAAC;QAEjC,yBAAyB;QACA,SAAI,GAAiC,QAAQ,CAAC;QAEvE,yFAAyF;QACjF,UAAK,GAAG,KAAK,CAAC;QAEtB,yCAAyC;QAChB,aAAQ,GAAG,KAAK,CAAC;QAE1C,yDAAyD;QAChC,YAAO,GAAG,KAAK,CAAC;QAEzC,kEAAkE;QACzC,SAAI,GAAG,KAAK,CAAC;QAEtC,2CAA2C;QAClB,WAAM,GAAG,KAAK,CAAC;QAExC,6FAA6F;QACpE,WAAM,GAAG,KAAK,CAAC;QAExC,gEAAgE;QACvC,UAAK,GAAG,KAAK,CAAC;QAEvC,mEAAmE;QAC3D,SAAI,GAAG,EAAE,CAAC;QAElB,oEAAoE;QAC5D,UAAK,GAAG,EAAE,CAAC;QAiCX,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACnC,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;YAC9C,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;YAE9C,wDAAwD;YACxD,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;YAC9D,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;YAE9D,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,CAAC,WAAW,EAAE,MAAK,UAAU,EAAE,CAAC;gBACrD,UAAU,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YACrE,CAAC;YAED,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,CAAC,WAAW,EAAE,MAAK,UAAU,EAAE,CAAC;gBACrD,UAAU,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YACrE,CAAC;QACH,CAAC,CAAC;QAWM,eAAU,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACtB,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACvB,CAAC,CAAC;QAEM,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC1C,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBAClC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,OAAO;YACT,CAAC;YAED,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC;QACH,CAAC,CAAC;KAmFH;IAnJC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,gCAAgC;IAEhC,KAAK,CAAC,QAAQ,CAAC,OAAsB;;QACnC,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC;IAED,qCAAqC;IAErC,KAAK,CAAC,WAAW;;QACf,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,EAAE,CAAC;IAC5B,CAAC;IAoBO,iBAAiB,CAAC,UAAwC;QAChE,MAAM,OAAO,GAAG;YACd,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,OAAO;YACf,KAAK,EAAE,QAAQ;SAChB,CAAC;QACF,OAAO,OAAO,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,CAAC,mBAAmB;IAC5D,CAAC;IAyBD,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC;QACjC,MAAM,QAAQ,GAAG,CAAC,MAAM,CAAC;QACzB,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QAEvC,OAAO,CACL,4DAAK,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,EAAE;YAClF,EAAC,MAAM,qDACL,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;oBACL,MAAM,EAAE,IAAI;oBAEZ,QAAQ;oBACR,mBAAmB,EAAE,IAAI,CAAC,IAAI,KAAK,WAAW;oBAC9C,iBAAiB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;oBAC1C,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;oBACpC,iBAAiB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;oBAC1C,iBAAiB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;oBAC1C,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;oBACxC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;oBACxC,wBAAwB,EAAE,IAAI,CAAC,IAAI,KAAK,gBAAgB;oBAExD,QAAQ;oBACR,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;oBACtC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;oBACxC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;oBAEtC,YAAY;oBACZ,eAAe,EAAE,IAAI,CAAC,KAAK;oBAC3B,gBAAgB,EAAE,IAAI,CAAC,MAAM;oBAC7B,kBAAkB,EAAE,IAAI,CAAC,QAAQ;oBACjC,iBAAiB,EAAE,IAAI,CAAC,QAAQ;oBAChC,iBAAiB,EAAE,IAAI,CAAC,OAAO;oBAC/B,cAAc,EAAE,IAAI,CAAC,IAAI;oBACzB,mBAAmB,EAAE,IAAI,CAAC,QAAQ;oBAClC,oBAAoB,EAAE,IAAI,CAAC,SAAS;oBACpC,oBAAoB,EAAE,IAAI,CAAC,SAAS;iBACrC,EACD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC9C,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC1C,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,EACvF,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACtC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EACxC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACpC,MAAM,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/D,QAAQ,EAAE,MAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACrE,GAAG,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,EACtE,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,iBACb,QAAQ;gBAEpB,6DAAM,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,gBAAgB;oBACxC,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAC,QAAQ,GAAG,CACtD;gBACP,6DAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe;oBACtC,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACxC;gBACP,6DAAM,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,gBAAgB;oBACxC,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAC,QAAQ,GAAG,CACtD;gBACN,IAAI,CAAC,KAAK,IAAI,CACb,6DAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe;oBACtC,4DACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,kBACR,GAAG,oBACD,OAAO,qBACN,OAAO;wBAEvB,iEAAU,MAAM,EAAC,gBAAgB,GAAG,CAChC,CACD,CACR;gBAEA,IAAI,CAAC,OAAO,IAAI,qEAAe,CACzB,CACL,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { submitForm } from '../../utils/form';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The button's label.\n * @slot prefix - Used to prepend an icon or similar element to the button.\n * @slot suffix - Used to append an icon or similar element to the button.\n *\n * @part base - The component's base wrapper.\n * @part prefix - The prefix container.\n * @part label - The button's label.\n * @part suffix - The suffix container.\n * @part caret - The button's caret.\n */\n\n@Component({\n  tag: 'six-button',\n  styleUrl: 'six-button.scss',\n  shadow: true,\n})\nexport class SixButton {\n  private nativeButton?: HTMLButtonElement | HTMLAnchorElement;\n\n  @Element() host!: HTMLSixButtonElement;\n\n  @State() hasFocus = false;\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasSuffix = false;\n\n  /** The button's type. */\n  @Prop({ reflect: true }) type:\n    | 'secondary'\n    | 'primary'\n    | 'link'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'action'\n    | 'action-outline' = 'primary';\n\n  /** The button's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */\n  @Prop() caret = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to draw the button in a loading state. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Set to true to draw a pill-style button with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Set to true to draw a circle button. */\n  @Prop({ reflect: true }) circle = false;\n\n  /** Indicates if activating the button should submit the form. Ignored when `href` is set. */\n  @Prop({ reflect: true }) submit = false;\n\n  /** Indicates if activating the button should reset the form. */\n  @Prop({ reflect: true }) reset = false;\n\n  /** An optional name for the button. Ignored when `href` is set. */\n  @Prop() name = '';\n\n  /** An optional value for the button. Ignored when `href` is set. */\n  @Prop() value = '';\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @Prop() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @Prop() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @Prop() download?: string;\n\n  /** Emitted when the button loses focus. */\n  @Event({ eventName: 'six-button-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the button gains focus. */\n  @Event({ eventName: 'six-button-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  /** Sets focus on the button. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeButton?.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @Method()\n  async removeFocus() {\n    this.nativeButton?.blur();\n  }\n\n  private handleSlotChange = () => {\n    this.hasLabel = hasSlot(this.host);\n    this.hasPrefix = hasSlot(this.host, 'prefix');\n    this.hasSuffix = hasSlot(this.host, 'suffix');\n\n    // set the correct icon size for suffix and prefix icons\n    const prefixIcon = this.host.querySelector('[slot=\"prefix\"]');\n    const suffixIcon = this.host.querySelector('[slot=\"suffix\"]');\n\n    if (prefixIcon?.tagName.toLowerCase() === 'six-icon') {\n      prefixIcon.setAttribute('size', this.mapSizeToIconSize(this.size));\n    }\n\n    if (suffixIcon?.tagName.toLowerCase() === 'six-icon') {\n      suffixIcon.setAttribute('size', this.mapSizeToIconSize(this.size));\n    }\n  };\n\n  private mapSizeToIconSize(buttonSize: 'small' | 'medium' | 'large'): string {\n    const sizeMap = {\n      small: 'xSmall',\n      medium: 'small',\n      large: 'medium',\n    };\n    return sizeMap[buttonSize] || 'small'; // Default to small\n  }\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    if (this.submit) {\n      event.preventDefault();\n      submitForm(this.host);\n    }\n  };\n\n  render() {\n    const isLink = this.href != null;\n    const isButton = !isLink;\n    const Button = isLink ? 'a' : 'button';\n\n    return (\n      <div onClick={this.handleClick} class={{ 'button-wrapper--disabled': this.disabled }}>\n        <Button\n          ref={(el) => (this.nativeButton = el)}\n          part=\"base\"\n          class={{\n            button: true,\n\n            // Types\n            'button--secondary': this.type === 'secondary',\n            'button--primary': this.type === 'primary',\n            'button--link': this.type === 'link',\n            'button--success': this.type === 'success',\n            'button--warning': this.type === 'warning',\n            'button--danger': this.type === 'danger',\n            'button--action': this.type === 'action',\n            'button--action-outline': this.type === 'action-outline',\n\n            // Sizes\n            'button--small': this.size === 'small',\n            'button--medium': this.size === 'medium',\n            'button--large': this.size === 'large',\n\n            // Modifiers\n            'button--caret': this.caret,\n            'button--circle': this.circle,\n            'button--disabled': this.disabled,\n            'button--focused': this.hasFocus,\n            'button--loading': this.loading,\n            'button--pill': this.pill,\n            'button--has-label': this.hasLabel,\n            'button--has-prefix': this.hasPrefix,\n            'button--has-suffix': this.hasSuffix,\n          }}\n          disabled={isButton ? this.disabled : undefined}\n          tabindex={this.disabled ? '-1' : undefined}\n          type={isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined}\n          name={isButton ? this.name : undefined}\n          value={isButton ? this.value : undefined}\n          href={isLink ? this.href : undefined}\n          target={isLink && this.target != null ? this.target : undefined}\n          download={isLink && this.download != null ? this.download : undefined}\n          rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          data-testid=\"button\"\n        >\n          <span part=\"prefix\" class=\"button__prefix\">\n            <slot onSlotchange={this.handleSlotChange} name=\"prefix\" />\n          </span>\n          <span part=\"label\" class=\"button__label\">\n            <slot onSlotchange={this.handleSlotChange} />\n          </span>\n          <span part=\"suffix\" class=\"button__suffix\">\n            <slot onSlotchange={this.handleSlotChange} name=\"suffix\" />\n          </span>\n          {this.caret && (\n            <span part=\"caret\" class=\"button__caret\">\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <polyline points=\"6 9 12 15 18 9\" />\n              </svg>\n            </span>\n          )}\n\n          {this.loading && <six-spinner />}\n        </Button>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-card/six-card.css

@@ -6,6 +6,17 @@
   box-sizing: border-box;
 }
 
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 :host {
   display: inline-block;
   box-shadow: var(--six-shadow-medium);

package/dist/collection/components/six-card/six-card.js

@@ -7,7 +7,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SixCard {
     render() {
-        return (h(Host, { key: 'c2bee3f44ff66341c55c3361de75aba4f8fefd38' }, h("slot", { key: 'fff6c572610f8ecae7793dde177fd6e32f07a28b' })));
+        return (h(Host, { key: '9a56f190ccdf8545c4503284ae32a23220e1af37' }, h("slot", { key: 'db6e7fe7d83c4e41747ad39a85bf108ce581ae87' })));
     }
     static get is() { return "six-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-checkbox/six-checkbox.css

@@ -6,6 +6,17 @@
   box-sizing: border-box;
 }
 
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 .form-control .form-control__label {
   display: none;
 }

package/dist/collection/components/six-checkbox/six-checkbox.js

@@ -121,14 +121,14 @@ export class SixCheckbox {
         this.hasErrorSlot = hasSlot(this.host, 'error-text');
     }
     render() {
-        return (h(FormControl, { key: '13d7d3b8bfabde5d1edda90227fd18d6adf9e9af', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, hasErrorTextSlot: this.hasErrorSlot, errorText: this.errorText, errorTextCount: this.errorTextCount, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("label", { key: '35bcfe787ad46a15548a17eb4f04573ff45e6fe6', part: "base", class: {
+        return (h(FormControl, { key: '1ed8885c3a37d420684480a982a38944ca869a1a', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, hasErrorTextSlot: this.hasErrorSlot, errorText: this.errorText, errorTextCount: this.errorTextCount, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("label", { key: '36a5a7bcfdd28499e70fcd432a38fc89cb48ce64', part: "base", class: {
                 checkbox: true,
                 'checkbox--checked': this.checked,
                 'checkbox--disabled': this.disabled,
                 'checkbox--focused': this.hasFocus,
                 'checkbox--invalid': this.invalid,
                 'checkbox--indeterminate': this.indeterminate,
-            }, htmlFor: this.inputId, onMouseDown: this.handleMouseDown }, h("span", { key: '3b1b498990230af36325505f7ca0c4a6b8920f3c', part: "control", class: "checkbox__control" }, this.checked && (h("span", { key: '3860a3eb88f6f83d483ec7285c409660758a7987', part: "checked-icon", class: "checkbox__icon" }, h("svg", { key: '1d8597170e10f7233865e98c440db3854e173a90', viewBox: "0 0 16 16" }, h("g", { key: '3c214889063cae7872ecf38c139851df47b5cb7a', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { key: '1593cb9509ac041f11f12a3a992d9adff8808d6f', stroke: "currentColor", "stroke-width": "2" }, h("g", { key: '9cc6010c84cdc82ecc2f2e83983cb8d1862a10d6', transform: "translate(3.428571, 3.428571)" }, h("path", { key: '5727cd4b7250f3d3e28d573e658f2d61dd80835c', d: "M0,5.71428571 L3.42857143,9.14285714" }), h("path", { key: '7cd48917d5c5479b303a5d16bb0711ea373222f0', d: "M9.14285714,0 L3.42857143,9.14285714" }))))))), !this.checked && this.indeterminate && (h("span", { key: '921925edba191dc728f6c080b253d55ff158ca1f', part: "indeterminate-icon", class: "checkbox__icon" }, h("svg", { key: 'e6ed138e7ea3d6917897522bbebc5604adc3372e', viewBox: "0 0 16 16" }, h("g", { key: 'af26d95b77942c7280230269681f15a940d3cb8a', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { key: 'f9594ba554f21fd63106ebe12810081c3c083d84', stroke: "currentColor", "stroke-width": "2" }, h("g", { key: '18f0e331348b0b0e8bdd266e3f56280a79c25d08', transform: "translate(2.285714, 6.857143)" }, h("path", { key: 'd26bd08e158169090186394370d894d1fc0f1a4e', d: "M10.2857143,1.14285714 L1.14285714,1.14285714" }))))))), h("input", { key: '0c71ecd68bc1ee72f760bd3d498f2521ff503cdb', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "checkbox", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: 'e26fa50555696c966b42f6546edcbd8b38dca448', part: "text", id: this.textId, class: "checkbox__text" }, h("slot", { key: '46556b4f621e998936118329572fea064b3fbe64' })))));
+            }, htmlFor: this.inputId, onMouseDown: this.handleMouseDown }, h("span", { key: '837373ab4ae9a6f90852f4d9176ac6e844d31579', part: "control", class: "checkbox__control" }, this.checked && (h("span", { key: 'f7d9c7ba567ee2d28913714cfb8fdb972e0b9f25', part: "checked-icon", class: "checkbox__icon" }, h("svg", { key: '2193316f61d53f3302e14a43b587b07778ae590e', viewBox: "0 0 16 16" }, h("g", { key: '36990bcb579ade7b26a26d6b93a8dd4f8226781e', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { key: '712be85f8623db8f143ef64f9c44b6433a530eab', stroke: "currentColor", "stroke-width": "2" }, h("g", { key: 'e716ffab7308468ccc86b294d0052428a2ca0602', transform: "translate(3.428571, 3.428571)" }, h("path", { key: 'a2ca8e37d8ff88bf94adfc7af850c447b9a4e9b4', d: "M0,5.71428571 L3.42857143,9.14285714" }), h("path", { key: '82f92da775cb1e49281eaee37792e326c5b41a60', d: "M9.14285714,0 L3.42857143,9.14285714" }))))))), !this.checked && this.indeterminate && (h("span", { key: 'b852b9c3dc0d083d9ba3b9f24c2f8f93f42bfe9b', part: "indeterminate-icon", class: "checkbox__icon" }, h("svg", { key: '2f888c93c3a69846ef8d96858f9064c7da02f37d', viewBox: "0 0 16 16" }, h("g", { key: '33828186ba162b59f88d3528453e497c59ea5211', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { key: 'a71f0a3498aa7cab1e9be14f07558813b8f4b287', stroke: "currentColor", "stroke-width": "2" }, h("g", { key: '2ff1a113d888f14358845323cccae4b9d8bbd1e0', transform: "translate(2.285714, 6.857143)" }, h("path", { key: '737d8c10e532a2037e20997d5f41cc99fa84dc03', d: "M10.2857143,1.14285714 L1.14285714,1.14285714" }))))))), h("input", { key: '0fef28fe71ba5263a33eadda6a63329b3d2bec1f', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "checkbox", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: 'db92ca95a892368e88b2aecfeff53a54eb5cc683', part: "text", id: this.textId, class: "checkbox__text" }, h("slot", { key: 'c2f6c9778b16dc344ad342254ef9ff2b624334f1' })))));
     }
     static get is() { return "six-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -146,6 +146,7 @@ export class SixCheckbox {
         return {
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -160,12 +161,12 @@ export class SixCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -180,12 +181,12 @@ export class SixCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "'on'"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -200,12 +201,12 @@ export class SixCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -220,12 +221,12 @@ export class SixCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -240,12 +241,12 @@ export class SixCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "errorText": {
                 "type": "string",
+                "attribute": "error-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string | string[]",
@@ -260,12 +261,12 @@ export class SixCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error-text",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "errorTextCount": {
                 "type": "number",
+                "attribute": "error-text-count",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -280,11 +281,11 @@ export class SixCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error-text-count",
                 "reflect": false
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -299,12 +300,12 @@ export class SixCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -319,12 +320,12 @@ export class SixCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "indeterminate": {
                 "type": "boolean",
+                "attribute": "indeterminate",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -339,7 +340,6 @@ export class SixCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "indeterminate",
                 "reflect": true,
                 "defaultValue": "false"
             }

package/dist/collection/components/six-date/calendar-grid.js

@@ -0,0 +1,30 @@
+import { fromDate, today } from "./iso-date";
+import { eachDayOfInterval, endOfMonth, endOfWeek, formatDate, startOfWeek } from "date-fns";
+export function createCalendarGrid(options) {
+    const firstDayOfMonth = new Date(options.year, options.month - 1, 1);
+    const daysInCalendarMonth = eachDayOfInterval({
+        start: startOfWeek(firstDayOfMonth, { weekStartsOn: 1 }),
+        end: endOfWeek(endOfMonth(firstDayOfMonth), { weekStartsOn: 1 }),
+    });
+    const calendarGrid = [];
+    for (const day of daysInCalendarMonth) {
+        const isoDate = fromDate(day);
+        const isInMonth = day.getMonth() === options.month - 1;
+        const isBeforeMinDate = options.minDate == null ? false : isoDate < options.minDate;
+        const isAfterMaxDate = options.maxDate == null ? false : isoDate > options.maxDate;
+        const isDateAllowed = options.allowedDates === undefined ? true : options.allowedDates(isoDate);
+        const isDisabled = !isDateAllowed || isBeforeMinDate || isAfterMaxDate;
+        const isToday = isoDate === today();
+        calendarGrid.push({
+            date: fromDate(day),
+            label: day.getDate().toString(),
+            display: formatDate(day, options.dateFormat),
+            disabled: isDisabled,
+            outdated: !isInMonth,
+            selected: options.selected === isoDate,
+            today: isToday,
+        });
+    }
+    return calendarGrid;
+}
+//# sourceMappingURL=calendar-grid.js.map

package/dist/collection/components/six-date/calendar-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-grid.js","sourceRoot":"","sources":["../../../src/components/six-date/calendar-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAW,KAAK,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAsB7F,MAAM,UAAU,kBAAkB,CAAC,OAA4B;IAC7D,MAAM,eAAe,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IACrE,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;QAC5C,KAAK,EAAE,WAAW,CAAC,eAAe,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC;QACxD,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC;KACjE,CAAC,CAAC;IACH,MAAM,YAAY,GAAmB,EAAE,CAAC;IAExC,KAAK,MAAM,GAAG,IAAI,mBAAmB,EAAE,CAAC;QACtC,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC9B,MAAM,SAAS,GAAG,GAAG,CAAC,QAAQ,EAAE,KAAK,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC;QACvD,MAAM,eAAe,GAAG,OAAO,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;QACpF,MAAM,cAAc,GAAG,OAAO,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;QACnF,MAAM,aAAa,GAAG,OAAO,CAAC,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAChG,MAAM,UAAU,GAAG,CAAC,aAAa,IAAI,eAAe,IAAI,cAAc,CAAC;QACvE,MAAM,OAAO,GAAG,OAAO,KAAK,KAAK,EAAE,CAAC;QACpC,YAAY,CAAC,IAAI,CAAC;YAChB,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC;YACnB,KAAK,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE;YAC/B,OAAO,EAAE,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,UAAU,CAAC;YAC5C,QAAQ,EAAE,UAAU;YACpB,QAAQ,EAAE,CAAC,SAAS;YACpB,QAAQ,EAAE,OAAO,CAAC,QAAQ,KAAK,OAAO;YACtC,KAAK,EAAE,OAAO;SACf,CAAC,CAAC;IACL,CAAC;IAED,OAAO,YAAY,CAAC;AACtB,CAAC","sourcesContent":["import { fromDate, IsoDate, today } from './iso-date';\nimport { eachDayOfInterval, endOfMonth, endOfWeek, formatDate, startOfWeek } from 'date-fns';\n\nexport interface CalendarCell {\n  date: IsoDate;\n  label: string;\n  display: string;\n  disabled: boolean;\n  outdated: boolean;\n  selected: boolean;\n  today: boolean;\n}\n\nexport interface CalendarGridOptions {\n  year: number;\n  month: number;\n  selected?: IsoDate;\n  minDate?: IsoDate;\n  maxDate?: IsoDate;\n  dateFormat: string;\n  allowedDates?: (date: IsoDate) => boolean;\n}\n\nexport function createCalendarGrid(options: CalendarGridOptions): CalendarCell[] {\n  const firstDayOfMonth = new Date(options.year, options.month - 1, 1);\n  const daysInCalendarMonth = eachDayOfInterval({\n    start: startOfWeek(firstDayOfMonth, { weekStartsOn: 1 }),\n    end: endOfWeek(endOfMonth(firstDayOfMonth), { weekStartsOn: 1 }),\n  });\n  const calendarGrid: CalendarCell[] = [];\n\n  for (const day of daysInCalendarMonth) {\n    const isoDate = fromDate(day);\n    const isInMonth = day.getMonth() === options.month - 1;\n    const isBeforeMinDate = options.minDate == null ? false : isoDate < options.minDate;\n    const isAfterMaxDate = options.maxDate == null ? false : isoDate > options.maxDate;\n    const isDateAllowed = options.allowedDates === undefined ? true : options.allowedDates(isoDate);\n    const isDisabled = !isDateAllowed || isBeforeMinDate || isAfterMaxDate;\n    const isToday = isoDate === today();\n    calendarGrid.push({\n      date: fromDate(day),\n      label: day.getDate().toString(),\n      display: formatDate(day, options.dateFormat),\n      disabled: isDisabled,\n      outdated: !isInMonth,\n      selected: options.selected === isoDate,\n      today: isToday,\n    });\n  }\n\n  return calendarGrid;\n}\n"]}

package/dist/collection/components/six-date/components/day-selection.js

@@ -0,0 +1,16 @@
+import { h } from "@stencil/core";
+import { translateWeekday } from "../translations";
+export const DaySelection = (props) => {
+    return (h("div", { class: "day-selection" }, [1, 2, 3, 4, 5, 6, 7].map((day) => (h("div", { class: "cell--header" }, translateWeekday(day, props.language)))), props.calendarGrid.map((day) => (h("div", { "data-date": day.date, onClick: () => {
+            if (!day.disabled || day.outdated) {
+                props.dayClicked(day.date);
+            }
+        }, class: {
+            cell: true,
+            'cell--today': day.today,
+            'cell--selected': day.selected,
+            'cell--outdated': day.outdated,
+            'cell--disabled': day.disabled,
+        } }, h("span", { class: "label" }, day.label))))));
+};
+//# sourceMappingURL=day-selection.js.map

package/dist/collection/components/six-date/components/day-selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"day-selection.js","sourceRoot":"","sources":["../../../../src/components/six-date/components/day-selection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAInD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAI5B,EAAE,EAAE;IACH,OAAO,CACL,WAAK,KAAK,EAAC,eAAe;QACvB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAClC,WAAK,KAAK,EAAC,cAAc,IAAE,gBAAgB,CAAC,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAO,CACxE,CAAC;QACD,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAC/B,wBACa,GAAG,CAAC,IAAI,EACnB,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,CAAC,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,QAAQ,EAAE,CAAC;oBAClC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAC7B,CAAC;YACH,CAAC,EACD,KAAK,EAAE;gBACL,IAAI,EAAE,IAAI;gBACV,aAAa,EAAE,GAAG,CAAC,KAAK;gBACxB,gBAAgB,EAAE,GAAG,CAAC,QAAQ;gBAC9B,gBAAgB,EAAE,GAAG,CAAC,QAAQ;gBAC9B,gBAAgB,EAAE,GAAG,CAAC,QAAQ;aAC/B;YAED,YAAM,KAAK,EAAC,OAAO,IAAE,GAAG,CAAC,KAAK,CAAQ,CAClC,CACP,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { Language } from '../../../utils/error-messages';\nimport { translateWeekday } from '../translations';\nimport { CalendarCell } from '../calendar-grid';\nimport { IsoDate } from '../iso-date';\n\nexport const DaySelection = (props: {\n  language: Language;\n  calendarGrid: CalendarCell[];\n  dayClicked: (cell: IsoDate) => void;\n}) => {\n  return (\n    <div class=\"day-selection\">\n      {[1, 2, 3, 4, 5, 6, 7].map((day) => (\n        <div class=\"cell--header\">{translateWeekday(day, props.language)}</div>\n      ))}\n      {props.calendarGrid.map((day) => (\n        <div\n          data-date={day.date}\n          onClick={() => {\n            if (!day.disabled || day.outdated) {\n              props.dayClicked(day.date);\n            }\n          }}\n          class={{\n            cell: true,\n            'cell--today': day.today,\n            'cell--selected': day.selected,\n            'cell--outdated': day.outdated,\n            'cell--disabled': day.disabled,\n          }}\n        >\n          <span class=\"label\">{day.label}</span>\n        </div>\n      ))}\n    </div>\n  );\n};\n"]}

package/dist/collection/components/six-date/components/month-selection.js

@@ -0,0 +1,17 @@
+import { h } from "@stencil/core";
+import { getMonth, today } from "../iso-date";
+import { translateMonthShort } from "../translations";
+export const MonthSelection = (props) => {
+    const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((month) => ({
+        month,
+        label: translateMonthShort(month, props.language),
+        today: getMonth(today()) === month,
+        selected: props.selected === '' ? false : getMonth(props.selected) === month,
+    }));
+    return (h("div", { class: "month-selection" }, months.map((month) => (h("div", { class: {
+            cell: true,
+            'cell--today': month.today,
+            'cell--selected': month.selected,
+        }, onClick: () => props.monthClicked(month.month) }, h("span", { class: "label" }, month.label))))));
+};
+//# sourceMappingURL=month-selection.js.map

package/dist/collection/components/six-date/components/month-selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"month-selection.js","sourceRoot":"","sources":["../../../../src/components/six-date/components/month-selection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAW,KAAK,EAAE,MAAM,aAAa,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAI9B,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACrE,KAAK;QACL,KAAK,EAAE,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC;QACjD,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAE,CAAC,KAAK,KAAK;QAClC,QAAQ,EAAE,KAAK,CAAC,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,KAAK;KAC7E,CAAC,CAAC,CAAC;IAEJ,OAAO,CACL,WAAK,KAAK,EAAC,iBAAiB,IACzB,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,WACE,KAAK,EAAE;YACL,IAAI,EAAE,IAAI;YACV,aAAa,EAAE,KAAK,CAAC,KAAK;YAC1B,gBAAgB,EAAE,KAAK,CAAC,QAAQ;SACjC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC;QAE9C,YAAM,KAAK,EAAC,OAAO,IAAE,KAAK,CAAC,KAAK,CAAQ,CACpC,CACP,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { getMonth, IsoDate, today } from '../iso-date';\nimport { Language } from '../../../utils/error-messages';\nimport { translateMonthShort } from '../translations';\n\nexport const MonthSelection = (props: {\n  language: Language;\n  selected: IsoDate | '';\n  monthClicked: (month: number) => void;\n}) => {\n  const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((month) => ({\n    month,\n    label: translateMonthShort(month, props.language),\n    today: getMonth(today()) === month,\n    selected: props.selected === '' ? false : getMonth(props.selected) === month,\n  }));\n\n  return (\n    <div class=\"month-selection\">\n      {months.map((month) => (\n        <div\n          class={{\n            cell: true,\n            'cell--today': month.today,\n            'cell--selected': month.selected,\n          }}\n          onClick={() => props.monthClicked(month.month)}\n        >\n          <span class=\"label\">{month.label}</span>\n        </div>\n      ))}\n    </div>\n  );\n};\n"]}

package/dist/collection/components/six-date/components/year-selection.js

@@ -0,0 +1,16 @@
+import { h } from "@stencil/core";
+import { getYear, today } from "../iso-date";
+export const YearSelection = (props) => {
+    const years = Array.from({ length: props.yearCount }, (_, i) => props.pointerYear - 12 + i);
+    const yearsToDisplay = years.map((year) => ({
+        year: year,
+        today: getYear(today()) === year,
+        selected: props.selected === '' ? false : getYear(props.selected) === year,
+    }));
+    return (h("div", { class: "year-selection" }, yearsToDisplay.map((year) => (h("div", { class: {
+            cell: true,
+            'cell--today': year.today,
+            'cell--selected': year.selected,
+        }, onClick: () => props.yearClicked(year.year) }, h("span", { class: "label" }, year.year))))));
+};
+//# sourceMappingURL=year-selection.js.map

package/dist/collection/components/six-date/components/year-selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"year-selection.js","sourceRoot":"","sources":["../../../../src/components/six-date/components/year-selection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,OAAO,EAAW,KAAK,EAAE,MAAM,aAAa,CAAC;AAEtD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAK7B,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;IAC5F,MAAM,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAC1C,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI;QAChC,QAAQ,EAAE,KAAK,CAAC,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,IAAI;KAC3E,CAAC,CAAC,CAAC;IAEJ,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB,IACxB,cAAc,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC5B,WACE,KAAK,EAAE;YACL,IAAI,EAAE,IAAI;YACV,aAAa,EAAE,IAAI,CAAC,KAAK;YACzB,gBAAgB,EAAE,IAAI,CAAC,QAAQ;SAChC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;QAE3C,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,IAAI,CAAQ,CAClC,CACP,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { getYear, IsoDate, today } from '../iso-date';\n\nexport const YearSelection = (props: {\n  selected: IsoDate | '';\n  pointerYear: number;\n  yearCount: number;\n  yearClicked: (year: number) => void;\n}) => {\n  const years = Array.from({ length: props.yearCount }, (_, i) => props.pointerYear - 12 + i);\n  const yearsToDisplay = years.map((year) => ({\n    year: year,\n    today: getYear(today()) === year,\n    selected: props.selected === '' ? false : getYear(props.selected) === year,\n  }));\n\n  return (\n    <div class=\"year-selection\">\n      {yearsToDisplay.map((year) => (\n        <div\n          class={{\n            cell: true,\n            'cell--today': year.today,\n            'cell--selected': year.selected,\n          }}\n          onClick={() => props.yearClicked(year.year)}\n        >\n          <span class=\"label\">{year.year}</span>\n        </div>\n      ))}\n    </div>\n  );\n};\n"]}

package/dist/collection/components/six-date/iso-date.js

@@ -0,0 +1,124 @@
+import { format, formatISO, isValid, parse, parseISO } from "date-fns";
+/**
+ * Validates a date string against a given format and returns an IsoDate if valid.
+ *
+ * Example format patterns for year, month, and day:
+ * - Year: "yyyy" (e.g., "2021")
+ * - Month: "MM" (e.g., "01" for January, "12" for December)
+ * - Day: "dd" (e.g., "08" for the 8th day of the month)
+ *
+ * Common format examples:
+ * - "yyyy-MM-dd" (e.g., "2021-01-08")
+ * - "dd.MM.yyyy" (e.g., "08.01.2021")
+ * - "MM/dd/yyyy" (e.g., "01/08/2021")
+ *
+ * @param dateString - The date string to validate.
+ * @param dateFormat - The expected format of the date string (e.g., "yyyy-MM-dd").
+ * @returns An IsoDate if the date string is valid, otherwise undefined.
+ */
+export function fromFormattedString(dateString, dateFormat) {
+    const date = parse(dateString, dateFormat, new Date());
+    if (isValid(date)) {
+        return fromDate(date);
+    }
+    return undefined;
+}
+/**
+ * Formats a given ISO date string into a specified format.
+ *
+ * Example format patterns for year, month, and day:
+ * - Year: "yyyy" (e.g., "2021")
+ * - Month: "MM" (e.g., "01" for January, "12" for December)
+ * - Day: "dd" (e.g., "08" for the 8th day of the month)
+ *
+ * Common format examples:
+ * - "yyyy-MM-dd" (e.g., "2021-01-08")
+ * - "dd.MM.yyyy" (e.g., "08.01.2021")
+ * - "MM/dd/yyyy" (e.g., "01/08/2021")
+ *
+ * @param {IsoDate} isoDate - The ISO date string to be formatted.
+ * @param {string} dateFormat - The desired date format string.
+ * @return {string} A string representing the formatted date.
+ */
+export function formatDate(isoDate, dateFormat) {
+    return format(parseISO(isoDate), dateFormat);
+}
+export function fromDate(date) {
+    return formatISO(date, { representation: 'date' });
+}
+export function today() {
+    return fromDate(new Date());
+}
+export function isValidIsoDate(isoDate) {
+    return isValid(parseISO(isoDate));
+}
+export function getMonth(isoDate) {
+    return toPointerDate(isoDate).month;
+}
+export function getYear(isoDate) {
+    return toPointerDate(isoDate).year;
+}
+export function toPointerDate(isoDate) {
+    if (!isValidIsoDate(isoDate)) {
+        throw new Error(`Invalid ISO date: ${isoDate}`);
+    }
+    return {
+        year: parseInt(isoDate.slice(0, 4), 10),
+        month: parseInt(isoDate.slice(5, 7), 10),
+        day: parseInt(isoDate.slice(8), 10),
+    };
+}
+export function nextPointerDate(selectionMode, pointerDate) {
+    if (selectionMode === 'day') {
+        if (pointerDate.month === 12) {
+            return { year: pointerDate.year + 1, month: 1, day: 1 };
+        }
+        else {
+            return { year: pointerDate.year, month: pointerDate.month + 1, day: 1 };
+        }
+    }
+    else if (selectionMode === 'month') {
+        return Object.assign(Object.assign({}, pointerDate), { year: pointerDate.year + 1 });
+    }
+    else if (selectionMode === 'year') {
+        return Object.assign(Object.assign({}, pointerDate), { year: pointerDate.year + 25 });
+    }
+    return pointerDate;
+}
+export function previousPointerDate(selectionMode, pointerDate) {
+    switch (selectionMode) {
+        case 'day':
+            if (pointerDate.month === 1) {
+                return { year: pointerDate.year - 1, month: 12, day: 1 };
+            }
+            else {
+                return { year: pointerDate.year, month: pointerDate.month - 1, day: 1 };
+            }
+        case 'month':
+            return Object.assign(Object.assign({}, pointerDate), { year: pointerDate.year - 1 });
+        case 'year':
+            return Object.assign(Object.assign({}, pointerDate), { year: pointerDate.year - 25 });
+    }
+}
+export function todayAsPointerDate() {
+    const today = new Date();
+    return {
+        year: today.getFullYear(),
+        month: today.getMonth() + 1,
+        day: today.getDate(),
+    };
+}
+export function cleanupValue(value) {
+    if (value === '') {
+        return { value, pointerDate: todayAsPointerDate() };
+    }
+    if (typeof value !== 'string' || !isValidIsoDate(value)) {
+        return {
+            value: '',
+            pointerDate: todayAsPointerDate(),
+            warning: `The specified value '${value}' does not conform to the required format, "yyyy-MM-dd".`,
+        };
+    }
+    return { value, pointerDate: toPointerDate(value) };
+}
+//# sourceMappingURL=iso-date.js.map

package/dist/collection/components/six-date/iso-date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iso-date.js","sourceRoot":"","sources":["../../../src/components/six-date/iso-date.ts"],"names":[],"mappings":"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","sourcesContent":["import { format, formatISO, isValid, parse, parseISO } from 'date-fns';\n\n/**\n * Represent an iso date string like `2021-01-08`.\n */\nexport type IsoDate = string;\n\nexport interface PointerDate {\n  year: number;\n  month: number;\n  day: number;\n}\n\n/**\n * Validates a date string against a given format and returns an IsoDate if valid.\n *\n * Example format patterns for year, month, and day:\n * - Year: \"yyyy\" (e.g., \"2021\")\n * - Month: \"MM\" (e.g., \"01\" for January, \"12\" for December)\n * - Day: \"dd\" (e.g., \"08\" for the 8th day of the month)\n *\n * Common format examples:\n * - \"yyyy-MM-dd\" (e.g., \"2021-01-08\")\n * - \"dd.MM.yyyy\" (e.g., \"08.01.2021\")\n * - \"MM/dd/yyyy\" (e.g., \"01/08/2021\")\n *\n * @param dateString - The date string to validate.\n * @param dateFormat - The expected format of the date string (e.g., \"yyyy-MM-dd\").\n * @returns An IsoDate if the date string is valid, otherwise undefined.\n */\nexport function fromFormattedString(dateString: string, dateFormat: string): IsoDate | undefined {\n  const date = parse(dateString, dateFormat, new Date());\n  if (isValid(date)) {\n    return fromDate(date);\n  }\n  return undefined;\n}\n\n/**\n * Formats a given ISO date string into a specified format.\n *\n * Example format patterns for year, month, and day:\n * - Year: \"yyyy\" (e.g., \"2021\")\n * - Month: \"MM\" (e.g., \"01\" for January, \"12\" for December)\n * - Day: \"dd\" (e.g., \"08\" for the 8th day of the month)\n *\n * Common format examples:\n * - \"yyyy-MM-dd\" (e.g., \"2021-01-08\")\n * - \"dd.MM.yyyy\" (e.g., \"08.01.2021\")\n * - \"MM/dd/yyyy\" (e.g., \"01/08/2021\")\n *\n * @param {IsoDate} isoDate - The ISO date string to be formatted.\n * @param {string} dateFormat - The desired date format string.\n * @return {string} A string representing the formatted date.\n */\nexport function formatDate(isoDate: IsoDate, dateFormat: string): string {\n  return format(parseISO(isoDate), dateFormat);\n}\n\nexport function fromDate(date: Date): IsoDate {\n  return formatISO(date, { representation: 'date' }) as IsoDate;\n}\n\nexport function today(): IsoDate {\n  return fromDate(new Date());\n}\n\nexport function isValidIsoDate(isoDate: string): isoDate is IsoDate {\n  return isValid(parseISO(isoDate));\n}\n\nexport function getMonth(isoDate: IsoDate): number {\n  return toPointerDate(isoDate).month;\n}\n\nexport function getYear(isoDate: IsoDate): number {\n  return toPointerDate(isoDate).year;\n}\n\nexport function toPointerDate(isoDate: IsoDate): PointerDate {\n  if (!isValidIsoDate(isoDate)) {\n    throw new Error(`Invalid ISO date: ${isoDate}`);\n  }\n  return {\n    year: parseInt(isoDate.slice(0, 4), 10),\n    month: parseInt(isoDate.slice(5, 7), 10),\n    day: parseInt(isoDate.slice(8), 10),\n  };\n}\n\nexport function nextPointerDate(selectionMode: 'day' | 'month' | 'year', pointerDate: PointerDate): PointerDate {\n  if (selectionMode === 'day') {\n    if (pointerDate.month === 12) {\n      return { year: pointerDate.year + 1, month: 1, day: 1 };\n    } else {\n      return { year: pointerDate.year, month: pointerDate.month + 1, day: 1 };\n    }\n  } else if (selectionMode === 'month') {\n    return { ...pointerDate, year: pointerDate.year + 1 };\n  } else if (selectionMode === 'year') {\n    return { ...pointerDate, year: pointerDate.year + 25 };\n  }\n  return pointerDate;\n}\n\nexport function previousPointerDate(selectionMode: 'day' | 'month' | 'year', pointerDate: PointerDate): PointerDate {\n  switch (selectionMode) {\n    case 'day':\n      if (pointerDate.month === 1) {\n        return { year: pointerDate.year - 1, month: 12, day: 1 };\n      } else {\n        return { year: pointerDate.year, month: pointerDate.month - 1, day: 1 };\n      }\n    case 'month':\n      return { ...pointerDate, year: pointerDate.year - 1 };\n    case 'year':\n      return { ...pointerDate, year: pointerDate.year - 25 };\n  }\n}\n\nexport function todayAsPointerDate(): PointerDate {\n  const today = new Date();\n  return {\n    year: today.getFullYear(),\n    month: today.getMonth() + 1,\n    day: today.getDate(),\n  };\n}\n\nexport function cleanupValue(value: unknown): { value: IsoDate | ''; pointerDate: PointerDate; warning?: string } {\n  if (value === '') {\n    return { value, pointerDate: todayAsPointerDate() };\n  }\n\n  if (typeof value !== 'string' || !isValidIsoDate(value)) {\n    return {\n      value: '',\n      pointerDate: todayAsPointerDate(),\n      warning: `The specified value '${value}' does not conform to the required format, \"yyyy-MM-dd\".`,\n    };\n  }\n\n  return { value, pointerDate: toPointerDate(value) };\n}\n"]}