@six-group/ui-library 3.0.0-beta.1.8 → 4.0.0-beta.1

package/dist/esm/six-badge.entry.js.map

@@ -0,0 +1 @@
+{"file":"six-badge.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,mqDAAmqD;;MCkB1qD,QAAQ;;;gBAI4E,SAAS;gBAGzF,KAAK;iBAGJ,KAAK;;EAErB,MAAM;IACJ,QACE,YACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;;QAGX,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACzC,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,WAAW;QAC7C,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACzC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACzC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACvC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACvC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;QACnC,aAAa,EAAE,IAAI,CAAC,IAAI;QACxB,cAAc,EAAE,IAAI,CAAC,KAAK;OAC3B,EACD,IAAI,EAAC,QAAQ,IAEb,eAAQ,CACH,EACP;GACH;;;;;;","names":[],"sources":["./src/components/six-badge/six-badge.scss?tag=six-badge&encapsulation=shadow","./src/components/six-badge/six-badge.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-flex;\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-font-size-x-small);\n  font-weight: var(--six-font-weight-semibold);\n  letter-spacing: var(--six-letter-spacing-normal);\n  line-height: 1;\n  border-radius: var(--six-border-radius-small);\n  white-space: nowrap;\n  padding: 3px 6px;\n  user-select: none;\n  cursor: inherit;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--info {\n  background-color: var(--six-color-web-rock-900);\n  color: var(--six-color-white);\n}\n\n.badge--success {\n  background-color: var(--six-color-success-500);\n  color: var(--six-color-web-rock-900);\n}\n\n.badge--warning {\n  background-color: var(--six-color-warning-700);\n  color: var(--six-color-web-rock-900);\n}\n\n.badge--danger {\n  background-color: var(--six-color-danger-800);\n  color: var(--six-color-white);\n}\n\n.badge--action {\n  background-color: var(--six-color-action-500);\n  color: var(--six-color-white);\n}\n\n.badge--primary {\n  background-color: var(--six-color-clay-50);\n  color: var(--six-color-black);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--pill {\n  border-radius: var(--six-border-radius-pill);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pulse modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--pulse {\n  animation: pulse 1.5s infinite;\n}\n\n.badge--pulse.badge--info {\n  --pulse-color: var(--six-color-web-rock-900);\n}\n\n.badge--pulse.badge--success {\n  --pulse-color: var(--six-color-success-500);\n}\n\n.badge--pulse.badge--warning {\n  --pulse-color: var(--six-color-warning-700);\n}\n\n.badge--pulse.badge--danger {\n  --pulse-color: var(--six-color-danger-800);\n}\n\n.badge--pulse.badge--action {\n  --pulse-color: var(--six-color-action-500);\n}\n\n.badge--pulse.badge--primary {\n  --pulse-color: var(--six-color-clay-50);\n}\n\n@keyframes pulse {\n  0% {\n    box-shadow: 0 0 0 0 var(--pulse-color);\n  }\n  70% {\n    box-shadow: 0 0 0 0.5rem transparent;\n  }\n  100% {\n    box-shadow: 0 0 0 0 transparent;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\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 badge's content.\n *\n * @part base - The base wrapper\n */\n\n@Component({\n  tag: 'six-badge',\n  styleUrl: 'six-badge.scss',\n  shadow: true,\n})\nexport class SixBadge {\n  badge: HTMLElement;\n\n  /** The badge's type. */\n  @Prop() type: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action' = 'primary';\n\n  /** Set to true to draw a pill-style badge with rounded edges. */\n  @Prop() pill = false;\n\n  /** Set to true to make the badge pulsate to draw attention. */\n  @Prop() pulse = false;\n\n  render() {\n    return (\n      <span\n        ref={(el) => (this.badge = el)}\n        part=\"base\"\n        class={{\n          badge: true,\n\n          // Types\n          'badge--primary': this.type === 'primary',\n          'badge--secondary': this.type === 'secondary',\n          'badge--success': this.type === 'success',\n          'badge--warning': this.type === 'warning',\n          'badge--danger': this.type === 'danger',\n          'badge--action': this.type === 'action',\n          'badge--info': this.type === 'info',\n          'badge--pill': this.pill,\n          'badge--pulse': this.pulse,\n        }}\n        role=\"status\"\n      >\n        <slot />\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/six-button.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2605a62.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5c0f6628.js';
 import { h as hasSlot } from './slot-6f3984c7.js';
 
 const sixButtonCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block;width:auto;cursor:pointer}.button{display:inline-flex;align-items:stretch;justify-content:center;width:100%;border-style:solid;border-width:var(--six-border-width);border-radius:0;font-family:var(--six-font-family);font-weight:var(--six-font-weight-semibold);text-decoration:none;user-select:none;white-space:nowrap;vertical-align:middle;padding:0;transition:var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:inherit}.button::-moz-focus-inner{border:0}.button:focus{outline:none}.button.button--disabled{pointer-events:none}.button ::slotted(six-icon){pointer-events:none}.button-wrapper--disabled{cursor:not-allowed}.button__prefix,.button__suffix{flex:0 0 auto;display:flex;align-items:center}.button.button--secondary{background-color:var(--six-color-white);border-color:var(--six-color-web-rock-900);color:var(--six-color-web-rock-900)}.button.button--secondary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--secondary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-100)}.button.button--secondary:focus:not(.button--disabled){background-color:var(--six-color-web-rock-100);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--secondary:active:not(.button--disabled){background-color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-900);border-width:var(--six-focus-ring-width)}.button.button--primary{background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.button.button--primary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--primary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-800);border-color:var(--six-color-web-rock-800)}.button.button--primary:focus:not(.button--disabled){background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--primary:active:not(.button--disabled){background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);opacity:70%}.button.button--link{background-color:transparent;border-color:transparent;color:var(--six-color-action-500)}.button.button--link.button--disabled{color:var(--six-color-web-rock-400)}.button.button--link:hover:not(.button--disabled){color:var(--six-color-action-600)}.button.button--link:focus:not(.button--disabled){border-color:var(--six-color-web-rock-400)}.button.button--link:active:not(.button--disabled){color:var(--six-color-action-light-to-be-defined)}.button.button--danger{background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);color:var(--six-color-white)}.button.button--danger.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--danger:hover:not(.button--disabled){background-color:var(--six-color-danger-900);border-color:var(--six-color-danger-900)}.button.button--danger:focus:not(.button--disabled){background-color:var(--six-color-danger-800);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--danger:active:not(.button--disabled){background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);opacity:70%}.button.button--warning{background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);color:var(--six-color-web-rock-900)}.button.button--warning.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--warning:hover:not(.button--disabled){background-color:var(--six-color-warning-800);border-color:var(--six-color-warning-800)}.button.button--warning:focus:not(.button--disabled){background-color:var(--six-color-warning-700);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--warning:active:not(.button--disabled){background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);opacity:70%}.button.button--success{background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);color:var(--six-color-web-rock-900)}.button.button--success.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--success:hover:not(.button--disabled){background-color:var(--six-color-success-600);border-color:var(--six-color-success-600)}.button.button--success:focus:not(.button--disabled){background-color:var(--six-color-success-500);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--success:active:not(.button--disabled){background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);opacity:70%}.button.button--action{background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);color:var(--six-color-white)}.button.button--action.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--action:hover:not(.button--disabled){background-color:var(--six-color-action-600);border-color:var(--six-color-action-600)}.button.button--action:focus:not(.button--disabled){background-color:var(--six-color-action-500);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--action:active:not(.button--disabled){background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);opacity:70%}.button--small{font-size:var(--six-button-font-size-small);height:var(--six-height-small);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2)}.button--medium{font-size:var(--six-button-font-size-medium);height:var(--six-height-medium);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2)}.button--large{font-size:var(--six-button-font-size-large);height:var(--six-height-large);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2)}.button--pill.button--small{border-radius:var(--six-height-small)}.button--pill.button--medium{border-radius:var(--six-height-medium)}.button--pill.button--large{border-radius:var(--six-height-large)}.button--circle{padding-left:0;padding-right:0;font-size:revert}.button--circle.button--small{width:var(--six-height-small);border-radius:50%}.button--circle.button--medium{width:var(--six-height-medium);border-radius:50%}.button--circle.button--large{width:var(--six-height-large);border-radius:50%}.button--circle .button__prefix,.button--circle .button__suffix,.button--circle .button__caret{display:none}.button--circle .button__prefix svg,.button--circle .button__suffix svg,.button--circle .button__caret svg{color:var(--six-color-web-rock-900)}.button--caret .button__suffix{display:none}.button--caret .button__caret{display:flex;align-items:center}.button--caret .button__caret svg{color:var(--six-color-web-rock-900);width:1em;height:1em}.button--primary .button__caret svg,.button--action .button__caret svg,.button--danger .button__caret svg{color:var(--six-color-white)}.button--loading{position:relative;cursor:wait}.button--loading .button__prefix,.button--loading .button__label,.button--loading .button__suffix,.button--loading .button__caret{visibility:hidden}.button--loading six-spinner{--indicator-color:currentColor;position:absolute;height:1em;width:1em;top:calc(50% - 0.5em);left:calc(50% - 0.5em)}.button ::slotted(six-badge){position:absolute;top:0;right:0;transform:translateY(-50%) translateX(50%);pointer-events:none}.button--has-label.button--small .button__label{padding:0 var(--six-spacing-small)}.button--has-label.button--medium .button__label{padding:0 var(--six-spacing-medium)}.button--has-label.button--large .button__label{padding:0 var(--six-spacing-large)}.button--has-prefix.button--small{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--small .button__label{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--medium{padding-left:var(--six-spacing-small)}.button--has-prefix.button--medium .button__label{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large .button__label{padding-left:var(--six-spacing-small)}.button--has-suffix.button--small,.button--caret.button--small{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--small .button__label,.button--caret.button--small .button__label{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--medium,.button--caret.button--medium{padding-right:var(--six-spacing-small)}.button--has-suffix.button--medium .button__label,.button--caret.button--medium .button__label{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large,.button--caret.button--large{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large .button__label,.button--caret.button--large .button__label{padding-right:var(--six-spacing-small)}";
 
-let SixButton = class {
+const SixButton = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.sixBlur = createEvent(this, "six-button-blur", 7);
@@ -12,24 +12,20 @@ let SixButton = class {
     this.hasLabel = false;
     this.hasPrefix = false;
     this.hasSuffix = false;
-    /** The button's type. */
     this.type = 'primary';
-    /** The button's size. */
     this.size = 'medium';
-    /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */
     this.caret = false;
-    /** Set to true to disable the button. */
     this.disabled = false;
-    /** Set to true to draw the button in a loading state. */
     this.loading = false;
-    /** Set to true to draw a pill-style button with rounded edges. */
     this.pill = false;
-    /** Set to true to draw a circle button. */
     this.circle = false;
-    /** Indicates if activating the button should submit the form. Ignored when `href` is set. */
     this.submit = false;
-    /** Indicates if activating the button should reset the form. */
     this.reset = false;
+    this.name = undefined;
+    this.value = undefined;
+    this.href = undefined;
+    this.target = undefined;
+    this.download = undefined;
   }
   connectedCallback() {
     this.handleBlur = this.handleBlur.bind(this);
@@ -102,3 +98,5 @@ let SixButton = class {
 SixButton.style = sixButtonCss;
 
 export { SixButton as six_button };
+
+//# sourceMappingURL=six-button.entry.js.map

package/dist/esm/six-button.entry.js.map

@@ -0,0 +1 @@
+{"file":"six-button.entry.js","mappings":"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","names":[],"sources":["./src/components/six-button/six-button.scss?tag=six-button&encapsulation=shadow","./src/components/six-button/six-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n  width: auto;\n  cursor: pointer;\n}\n\n.button {\n  display: inline-flex;\n  align-items: stretch;\n  justify-content: center;\n  width: 100%;\n  border-style: solid;\n  border-width: var(--six-border-width);\n  border-radius: 0;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-font-weight-semibold);\n  text-decoration: none;\n  user-select: none;\n  white-space: nowrap;\n  vertical-align: middle;\n  padding: 0;\n  transition: var(--six-transition-fast) background-color, var(--six-transition-fast) color,\n    var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n  cursor: inherit;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &.button--disabled {\n    pointer-events: none;\n  }\n\n  // Clicks on icons shouldn't prevent the button from gaining focus\n  ::slotted(six-icon) {\n    pointer-events: none;\n  }\n}\n\n.button-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.button__prefix,\n.button__suffix {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Standard buttons\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button {\n  &.button--secondary {\n    background-color: var(--six-color-white);\n    border-color: var(--six-color-web-rock-900);\n    color: var(--six-color-web-rock-900);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-100);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-100);\n      border-color: var(--six-color-web-rock-400);\n      box-shadow: var(--six-button-focus-shadow);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-300);\n      border-color: var(--six-color-web-rock-900);\n      border-width: var(--six-focus-ring-width);\n    }\n  }\n\n  &.button--primary {\n    background-color: var(--six-color-web-rock-900);\n    border-color: var(--six-color-web-rock-900);\n    color: var(--six-color-white);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-800);\n      border-color: var(--six-color-web-rock-800);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-900);\n      border-color: var(--six-color-web-rock-400);\n      box-shadow: var(--six-button-focus-shadow);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-900);\n      border-color: var(--six-color-web-rock-900);\n      opacity: 70%;\n    }\n  }\n\n  &.button--link {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--six-color-action-500);\n\n    &.button--disabled {\n      color: var(--six-color-web-rock-400);\n    }\n\n    &:hover:not(.button--disabled) {\n      color: var(--six-color-action-600);\n    }\n\n    &:focus:not(.button--disabled) {\n      border-color: var(--six-color-web-rock-400);\n    }\n\n    &:active:not(.button--disabled) {\n      color: var(--six-color-action-light-to-be-defined);\n    }\n  }\n\n  &.button--danger {\n    background-color: var(--six-color-danger-800);\n    border-color: var(--six-color-danger-800);\n    color: var(--six-color-white);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-danger-900);\n      border-color: var(--six-color-danger-900);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--six-color-danger-800);\n      border-color: var(--six-color-web-rock-400);\n      box-shadow: var(--six-button-focus-shadow);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-danger-800);\n      border-color: var(--six-color-danger-800);\n      opacity: 70%;\n    }\n  }\n\n  &.button--warning {\n    background-color: var(--six-color-warning-700);\n    border-color: var(--six-color-warning-700);\n    color: var(--six-color-web-rock-900);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-warning-800);\n      border-color: var(--six-color-warning-800);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--six-color-warning-700);\n      border-color: var(--six-color-web-rock-400);\n      box-shadow: var(--six-button-focus-shadow);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-warning-700);\n      border-color: var(--six-color-warning-700);\n      opacity: 70%;\n    }\n  }\n\n  &.button--success {\n    background-color: var(--six-color-success-500);\n    border-color: var(--six-color-success-500);\n    color: var(--six-color-web-rock-900);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-success-600);\n      border-color: var(--six-color-success-600);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--six-color-success-500);\n      border-color: var(--six-color-web-rock-400);\n      box-shadow: var(--six-button-focus-shadow);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-success-500);\n      border-color: var(--six-color-success-500);\n      opacity: 70%;\n    }\n  }\n\n  &.button--action {\n    background-color: var(--six-color-action-500);\n    border-color: var(--six-color-action-500);\n    color: var(--six-color-white);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-action-600);\n      border-color: var(--six-color-action-600);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--six-color-action-500);\n      border-color: var(--six-color-web-rock-400);\n      box-shadow: var(--six-button-focus-shadow);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-action-500);\n      border-color: var(--six-color-action-500);\n      opacity: 70%;\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--small {\n  font-size: var(--six-button-font-size-small);\n  height: var(--six-height-small);\n  line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n}\n\n.button--medium {\n  font-size: var(--six-button-font-size-medium);\n  height: var(--six-height-medium);\n  line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n}\n\n.button--large {\n  font-size: var(--six-button-font-size-large);\n  height: var(--six-height-large);\n  line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--pill {\n  &.button--small {\n    border-radius: var(--six-height-small);\n  }\n\n  &.button--medium {\n    border-radius: var(--six-height-medium);\n  }\n\n  &.button--large {\n    border-radius: var(--six-height-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Circle modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--circle {\n  padding-left: 0;\n  padding-right: 0;\n  font-size: revert;\n\n  &.button--small {\n    width: var(--six-height-small);\n    border-radius: 50%;\n  }\n\n  &.button--medium {\n    width: var(--six-height-medium);\n    border-radius: 50%;\n  }\n\n  &.button--large {\n    width: var(--six-height-large);\n    border-radius: 50%;\n  }\n\n  .button__prefix,\n  .button__suffix,\n  .button__caret {\n    display: none;\n\n    svg {\n      color: var(--six-color-web-rock-900);\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Caret modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--caret {\n  .button__suffix {\n    display: none;\n  }\n\n  .button__caret {\n    display: flex;\n    align-items: center;\n\n    svg {\n      color: var(--six-color-web-rock-900);\n      width: 1em;\n      height: 1em;\n    }\n  }\n}\n\n.button--primary,\n.button--action,\n.button--danger {\n  .button__caret {\n    svg {\n      color: var(--six-color-white);\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Loading modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--loading {\n  position: relative;\n  cursor: wait;\n\n  .button__prefix,\n  .button__label,\n  .button__suffix,\n  .button__caret {\n    visibility: hidden;\n  }\n\n  six-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Badges\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button ::slotted(six-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translateY(-50%) translateX(50%);\n  pointer-events: none;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Button spacing\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--has-label {\n  &.button--small .button__label {\n    padding: 0 var(--six-spacing-small);\n  }\n\n  &.button--medium .button__label {\n    padding: 0 var(--six-spacing-medium);\n  }\n\n  &.button--large .button__label {\n    padding: 0 var(--six-spacing-large);\n  }\n}\n\n.button--has-prefix {\n  &.button--small {\n    padding-left: var(--six-spacing-x-small);\n\n    .button__label {\n      padding-left: var(--six-spacing-x-small);\n    }\n  }\n\n  &.button--medium {\n    padding-left: var(--six-spacing-small);\n\n    .button__label {\n      padding-left: var(--six-spacing-small);\n    }\n  }\n\n  &.button--large {\n    padding-left: var(--six-spacing-small);\n\n    .button__label {\n      padding-left: var(--six-spacing-small);\n    }\n  }\n}\n\n.button--has-suffix,\n.button--caret {\n  &.button--small {\n    padding-right: var(--six-spacing-x-small);\n\n    .button__label {\n      padding-right: var(--six-spacing-x-small);\n    }\n  }\n\n  &.button--medium {\n    padding-right: var(--six-spacing-small);\n\n    .button__label {\n      padding-right: var(--six-spacing-small);\n    }\n  }\n\n  &.button--large {\n    padding-right: var(--six-spacing-small);\n\n    .button__label {\n      padding-right: var(--six-spacing-small);\n    }\n  }\n}\n","import { Component, Element, h, Method, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\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  button: HTMLButtonElement;\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: 'secondary' | 'primary' | 'link' | 'success' | 'warning' | 'danger' | 'action' =\n    '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: string;\n\n  /** An optional value for the button. Ignored when `href` is set. */\n  @Prop() value: string;\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  connectedCallback() {\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleClick = this.handleClick.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  /** Sets focus on the button. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @Method()\n  async removeFocus() {\n    this.button.blur();\n  }\n\n  handleSlotChange() {\n    this.hasLabel = hasSlot(this.host);\n    this.hasPrefix = hasSlot(this.host, 'prefix');\n    this.hasSuffix = hasSlot(this.host, 'suffix');\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  }\n\n  handleClick(event: MouseEvent) {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  render() {\n    const isLink = !!this.href;\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.button = 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\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 : null}\n          type={isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : null}\n          name={isButton ? this.name : null}\n          value={isButton ? this.value : null}\n          href={isLink && this.href}\n          target={isLink && this.target ? this.target : null}\n          download={isLink && this.download ? this.download : null}\n          rel={isLink && this.target ? 'noreferrer noopener' : null}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          onClick={this.handleClick}\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}

package/dist/esm/six-card.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, h, H as Host } from './index-a2605a62.js';
+import { r as registerInstance, h, H as Host } from './index-5c0f6628.js';
 
 const sixCardCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block;box-shadow:var(--six-elevation-8dp);border-radius:0;padding:1rem;margin-bottom:0.6rem}";
 
-let SixCard = class {
+const SixCard = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
   }
@@ -13,3 +13,5 @@ let SixCard = class {
 SixCard.style = sixCardCss;
 
 export { SixCard as six_card };
+
+//# sourceMappingURL=six-card.entry.js.map

package/dist/esm/six-card.entry.js.map

@@ -0,0 +1 @@
+{"file":"six-card.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,yNAAyN;;MCc/N,OAAO;;;;EAClB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAQ,CACH,EACP;GACH;;;;;;","names":[],"sources":["./src/components/six-card/six-card.scss?tag=six-card&encapsulation=shadow","./src/components/six-card/six-card.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n  box-shadow: var(--six-elevation-8dp);\n  border-radius: 0;\n  padding: 1rem;\n  margin-bottom: 0.6rem;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the content of the card.\n */\n\n@Component({\n  tag: 'six-card',\n  styleUrl: 'six-card.scss',\n  shadow: true,\n})\nexport class SixCard {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/six-checkbox.entry.js

@@ -1,12 +1,12 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2605a62.js';
-import { F as FormControl } from './form-control-24f446af.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5c0f6628.js';
+import { F as FormControl } from './form-control-3b440ea1.js';
 import { h as hasSlot } from './slot-6f3984c7.js';
 import { E as EventListeners } from './event-listeners-570a24ea.js';
 
 const sixCheckboxCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:inline-block}.checkbox{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.checkbox__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size);border:solid var(--six-border-width) var(--six-input-border-color);border-radius:0;background-color:var(--six-input-background-color);color:var(--six-checkbox-color);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow}.checkbox__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.checkbox__control .checkbox__icon{display:inline-flex;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size)}.checkbox__control .checkbox__icon svg{width:100%;height:100%}.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-hover)}.checkbox--checked .checkbox__control,.checkbox--indeterminate .checkbox__control{border-color:var(--six-selection-control-color);background-color:var(--six-selection-control-color)}.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-focus);background-color:var(--six-input-border-color-focus)}.checkbox--disabled{cursor:not-allowed;color:var(--six-input-color-disabled)}.checkbox--disabled .checkbox__control{border-color:var(--six-input-border-color-disabled)}.checkbox--disabled.checkbox--checked .checkbox__control,.checkbox--disabled.checkbox--indeterminate .checkbox__control{background-color:var(--six-selection-control-color-disabled)}.checkbox--invalid:not(.checkbox--disabled) .checkbox__control{border-color:var(--six-input-border-color-danger)}.checkbox__text{line-height:var(--six-selection-control-toggle-size);margin-left:0.5em;user-select:none}";
 
 let id = 0;
-let SixCheckbox = class {
+const SixCheckbox = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.sixBlur = createEvent(this, "six-checkbox-blur", 7);
@@ -19,27 +19,21 @@ let SixCheckbox = class {
     this.customErrorText = '';
     this.customValidation = false;
     this.eventListeners = new EventListeners();
+    /** default state whether the radio button should be checked or not when resetting */
+    this.defaultState = false;
     this.hasFocus = false;
     this.hasLabelSlot = false;
     this.hasErrorTextSlot = false;
-    /** Set to true to disable the checkbox. */
+    this.name = undefined;
+    this.value = undefined;
     this.disabled = false;
-    /** Set to true to make the checkbox a required field. */
     this.required = false;
-    /** The checkbox label. Alternatively, you can use the label slot. */
     this.label = '';
-    /** The checkbox's error text. Alternatively, you can use the error-text slot. */
     this.errorText = '';
-    /** Set to true to draw the checkbox in a checked state. */
     this.checked = false;
-    /** Set to true to draw the checkbox in an indeterminate state. */
     this.indeterminate = false;
-    /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
     this.invalid = false;
-    /** Set to display the error text on blur and not when typing */
     this.errorOnBlur = false;
-    /** default state whether the radio button should be checked or not when resetting */
-    this.defaultState = false;
   }
   handleCheckedChange() {
     if (!this.input) {
@@ -157,3 +151,5 @@ let SixCheckbox = class {
 SixCheckbox.style = sixCheckboxCss;
 
 export { SixCheckbox as six_checkbox };
+
+//# sourceMappingURL=six-checkbox.entry.js.map

package/dist/esm/six-checkbox.entry.js.map

@@ -0,0 +1 @@
+{"file":"six-checkbox.entry.js","mappings":"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","names":[],"sources":["./src/components/six-checkbox/six-checkbox.scss?tag=six-checkbox&encapsulation=shadow","./src/components/six-checkbox/six-checkbox.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: inline-block;\n}\n\n.checkbox {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-input-font-size-medium);\n  font-weight: var(--six-input-font-weight);\n  color: var(--six-input-color);\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.checkbox__control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--six-selection-control-toggle-size);\n  height: var(--six-selection-control-toggle-size);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  border-radius: 0;\n  background-color: var(--six-input-background-color);\n  color: var(--six-checkbox-color);\n  transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n    var(--six-transition-fast) color, var(--six-transition-fast) box-shadow;\n\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  .checkbox__icon {\n    display: inline-flex;\n    width: var(--six-selection-control-toggle-size);\n    height: var(--six-selection-control-toggle-size);\n\n    svg {\n      width: 100%;\n      height: 100%;\n    }\n  }\n}\n\n// Hover\n.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-hover);\n}\n\n// Checked/indeterminate\n.checkbox--checked .checkbox__control,\n.checkbox--indeterminate .checkbox__control {\n  border-color: var(--six-selection-control-color);\n  background-color: var(--six-selection-control-color);\n}\n\n// Checked/indeterminate + hover\n.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-focus);\n  background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.checkbox--disabled {\n  cursor: not-allowed;\n  color: var(--six-input-color-disabled);\n\n  .checkbox__control {\n    border-color: var(--six-input-border-color-disabled);\n  }\n\n  &.checkbox--checked .checkbox__control,\n  &.checkbox--indeterminate .checkbox__control {\n    background-color: var(--six-selection-control-color-disabled);\n  }\n}\n\n// Invalid\n.checkbox--invalid:not(.checkbox--disabled) {\n  .checkbox__control {\n    border-color: var(--six-input-border-color-danger);\n  }\n}\n\n.checkbox__text {\n  line-height: var(--six-selection-control-toggle-size);\n  margin-left: 0.5em;\n  user-select: none;\n}\n","import { Component, Event, EventEmitter, Method, Prop, State, Watch, h, Element } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\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 label - The checkbox label.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part control - The checkbox control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part indeterminate-icon - The container that wraps the indeterminate icon.\n * @part text - The checkbox text rendered to the right.\n */\n\n@Component({\n  tag: 'six-checkbox',\n  styleUrl: 'six-checkbox.scss',\n  shadow: true,\n})\nexport class SixCheckbox {\n  inputId = `checkbox-${++id}`;\n  labelId = `checkbox-label-${id}`;\n  textId = `checkbox-text-${id}`;\n  errorTextId = `input-error-text-${id}`;\n  input: HTMLInputElement;\n  customErrorText = '';\n  customValidation = false;\n\n  readonly eventListeners = new EventListeners();\n\n  @Element() host: HTMLSixCheckboxElement;\n\n  @State() hasFocus = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorTextSlot = false;\n\n  /** The checkbox's name attribute. */\n  @Prop() name: string;\n\n  /** The checkbox's value attribute. */\n  @Prop() value: string;\n\n  /** Set to true to disable the checkbox. */\n  @Prop() disabled = false;\n\n  /** Set to true to make the checkbox a required field. */\n  @Prop() required = false;\n\n  /** The checkbox label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The checkbox's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\n\n  /** Set to true to draw the checkbox in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** Set to true to draw the checkbox in an indeterminate state. */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = false;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-checkbox-blur' }) sixBlur: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-checkbox-change' }) sixChange: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-checkbox-focus' }) sixFocus: EventEmitter<EmptyPayload>;\n\n  @Watch('checked')\n  @Watch('indeterminate')\n  handleCheckedChange() {\n    if (!this.input) {\n      return;\n    }\n    this.input.checked = this.checked;\n    this.input.indeterminate = this.indeterminate;\n    this.invalid = !this.input.checkValidity();\n    this.sixChange.emit();\n  }\n\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  /** default state whether the radio button should be checked or not when resetting */\n  private defaultState = false;\n\n  connectedCallback() {\n    this.handleChange = this.handleChange.bind(this);\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleMouseDown = this.handleMouseDown.bind(this);\n    this.handleInvalid = this.handleInvalid.bind(this);\n\n    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  componentWillLoad() {\n    this.defaultState = this.checked;\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    this.input.indeterminate = this.indeterminate;\n    this.eventListeners.add(this.input, 'invalid', (event) => {\n      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {\n        this.customErrorText = this.input.validationMessage;\n      }\n      event.preventDefault();\n    });\n  }\n\n  /** Sets focus on the checkbox. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  @Method()\n  async removeFocus() {\n    this.input.blur();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  @Method()\n  async reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    return this.input.validity.valid;\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customErrorText = '';\n    this.customValidation = message !== '';\n    this.input.setCustomValidity(message);\n    this.invalid = !this.input.checkValidity();\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.checked = this.defaultState;\n    this.customErrorText = '';\n    this.customValidation = false;\n    this.input.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  handleChange() {\n    this.checked = this.input.checked;\n    this.indeterminate = false;\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  }\n\n  handleMouseDown(event: MouseEvent) {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.input.focus();\n  }\n\n  handleInvalid() {\n    this.invalid = true;\n  }\n\n  handleSlotChange() {\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n  }\n\n  displayError() {\n    return this.invalid && (!this.errorOnBlur || !this.hasFocus);\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.customErrorText ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size=\"medium\"\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\n      >\n        <label\n          part=\"base\"\n          class={{\n            checkbox: true,\n            'checkbox--checked': this.checked,\n            'checkbox--disabled': this.disabled,\n            'checkbox--focused': this.hasFocus,\n            'checkbox--invalid': this.invalid,\n            'checkbox--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n          onMouseDown={this.handleMouseDown}\n        >\n          <span part=\"control\" class=\"checkbox__control\">\n            {this.checked && (\n              <span part=\"checked-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(3.428571, 3.428571)\">\n                        <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n                        <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            {!this.checked && this.indeterminate && (\n              <span part=\"indeterminate-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(2.285714, 6.857143)\">\n                        <path d=\"M10.2857143,1.14285714 L1.14285714,1.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            <input\n              ref={(el) => (this.input = el)}\n              id={this.inputId}\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              disabled={this.disabled}\n              required={this.required}\n              role=\"checkbox\"\n              aria-checked={this.checked ? 'true' : 'false'}\n              aria-labelledby={this.labelId}\n              onChange={this.handleChange}\n              onBlur={this.handleBlur}\n              onFocus={this.handleFocus}\n              onInvalid={this.handleInvalid}\n            />\n          </span>\n\n          <span part=\"text\" id={this.textId} class=\"checkbox__text\">\n            <slot />\n          </span>\n        </label>\n      </FormControl>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/six-datepicker.entry.js

@@ -1,4 +1,4 @@
-import { h, r as registerInstance, c as createEvent, g as getElement } from './index-a2605a62.js';
+import { h, r as registerInstance, c as createEvent, g as getElement } from './index-5c0f6628.js';
 import { i as isNil, a as isNumber, b as isDate, c as isString, S as SixTimePropertyName } from './six-timepicker.types-e161a447.js';
 import { E as EventListeners } from './event-listeners-570a24ea.js';
 import { D as DEFAULT_DEBOUNCE_FAST, d as debounceEvent, a as debounce } from './execution-control-1a60d709.js';
@@ -561,7 +561,7 @@ const YearSelection = ({ selectedDate, yearSelection, onClickYearCell }) => {
       } }, year)))))))));
 };
 
-const sixDatepickerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;font-family:var(--six-font-family)}.datepicker__container{position:relative}.datepicker__popup{min-width:400px;background-color:white;padding:0.5em 0.5em 1.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.datepicker__popup--is-up{bottom:100%;min-height:382px}.datepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.datepicker-header{display:flex;justify-content:space-between;border-bottom:1px solid var(--six-color-web-rock-400);padding:0.5em;margin-bottom:1em}.datepicker-header svg{fill:var(--six-color-web-rock-900);stroke:none}.datepicker-header__btn{cursor:pointer;width:2.5em;height:2.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center}.datepicker-header__btn:hover{background-color:var(--six-color-web-rock-100);border-radius:100%}.datepicker-header__label{display:flex}.datepicker-header__label>div{cursor:pointer;padding:0.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center}.datepicker-header__label>div:hover{background-color:var(--six-color-web-rock-100)}.datepicker-table{width:100%}.datepicker-table__cell{text-align:center;width:2.5rem;height:2.5rem;cursor:pointer}.datepicker-table__cell:hover{background-color:var(--six-table-row-background-color-hover)}.datepicker-table__cell--is-today{border:1px solid var(--six-color-web-rock-400)}.datepicker-table__cell--is-selected{background-color:var(--six-color-red);color:var(--six-color-white)}.datepicker-table__cell--is-disabled{background-color:var(--six-color-web-rock-200);cursor:initial}.datepicker-table__cell--is-disabled:hover{background-color:var(--six-color-web-rock-200)}.datepicker-table__cell--is-outdated{color:var(--six-color-web-rock-400)}.datepicker-clear{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.datepicker-clear:hover{color:var(--six-input-icon-color-hover)}.datepicker-clear:focus{outline:none}.datepicker-clear--right{right:0;position:absolute}.datepicker-clear--left{right:35px;position:absolute}.input--empty .datepicker-clear{visibility:hidden}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}six-timepicker::part(popup){border:none;padding:0.5em 0.5em 0;min-height:0}";
+const sixDatepickerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;font-family:var(--six-font-family)}.datepicker__container{position:relative}.datepicker__popup{min-width:400px;background-color:white;padding:0.5em 0.5em 1.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.datepicker__popup--is-up{bottom:100%;min-height:382px}.datepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.datepicker-header{display:flex;justify-content:space-between;border-bottom:1px solid var(--six-color-web-rock-400);padding:0.5em;margin-bottom:1em}.datepicker-header svg{fill:var(--six-color-web-rock-900);stroke:none}.datepicker-header__btn{cursor:pointer;width:2.5em;height:2.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center}.datepicker-header__btn:hover{background-color:var(--six-color-web-rock-100);border-radius:100%}.datepicker-header__label{display:flex}.datepicker-header__label>div{cursor:pointer;padding:0.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center}.datepicker-header__label>div:hover{background-color:var(--six-color-web-rock-100)}.datepicker-table{width:100%}.datepicker-table__cell{text-align:center;width:2.5rem;height:2.5rem;cursor:pointer}.datepicker-table__cell:hover{background-color:var(--six-color-web-rock-100)}.datepicker-table__cell--is-today{border:1px solid var(--six-color-web-rock-400)}.datepicker-table__cell--is-selected{background-color:var(--six-color-red);color:var(--six-color-white)}.datepicker-table__cell--is-disabled{background-color:var(--six-color-web-rock-200);cursor:initial}.datepicker-table__cell--is-disabled:hover{background-color:var(--six-color-web-rock-200)}.datepicker-table__cell--is-outdated{color:var(--six-color-web-rock-400)}.datepicker-clear{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.datepicker-clear:hover{color:var(--six-input-icon-color-hover)}.datepicker-clear:focus{outline:none}.datepicker-clear--right{right:0;position:absolute}.datepicker-clear--left{right:35px;position:absolute}.input--empty .datepicker-clear{visibility:hidden}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}six-timepicker::part(popup){border:none;padding:0.5em 0.5em 0;min-height:0}";
 
 const NUMBER_OF_YEARS_SHOWN = 25;
 const MIN_POPUP_HEIGHT = 400;
@@ -583,7 +583,7 @@ const getYearSelectionAroundYear = (year) => {
     return curr;
   }, []);
 };
-let SixDatepicker = class {
+const SixDatepicker = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.sixSelect = createEvent(this, "six-datepicker-select", 7);
@@ -591,90 +591,6 @@ let SixDatepicker = class {
     this.sixBlur = createEvent(this, "six-datepicker-blur", 7);
     this.eventListeners = new EventListeners();
     this.selectedDate = null;
-    this.pointerDate = SixDatepicker.getCurrentDateAsPointer();
-    this.selectionMode = SelectionMode.DAY;
-    this.isDropDownContentUp = false;
-    /**
-     * Set the type.
-     */
-    this.type = 'date';
-    /**
-     * The language used to render the weekdays and months.
-     */
-    this.locale = 'en';
-    /** Indicates whether or not the calendar dropdown is open on startup. You can use this in lieu of the show/hide methods. */
-    this.open = false;
-    /** Indicates whether or not the calendar should be shown as an inline (always open) component */
-    this.inline = false;
-    /**
-     * If `true` the user can only select a date via the component in the popup, but not directly edit the input field.
-     */
-    this.readonly = false;
-    /**
-     * If `true` the component is disabled.
-     */
-    this.disabled = false;
-    /**
-     * Callback to determine which date in the datepicker should be selectable.
-     * the callback function will get a datestring as an argument, e.g. '2021-07-04'
-     *
-     * Usage e.g.:
-     * const datepicker = document.getElementById('allowed-date-picker');
-     * datepicker.allowedDates = datestring => parseInt(datestring.split('-')[2], 10) % 2 === 0;
-     */
-    this.allowedDates = () => true;
-    /**
-     * The minimum datetime allowed. Value must be a date object
-     */
-    this.min = null;
-    /**
-     * The maximum datetime allowed. Value must be a date object
-     */
-    this.max = null;
-    /**
-     * Closes the datepicker dropdown after selection
-     */
-    this.closeOnSelect = this.type === 'date';
-    /** Datepicker size. */
-    this.size = 'medium';
-    /**
-     * The value of the form field, which accepts a date object.
-     */
-    this.value = null;
-    /** Define the dateFormat. Valid formats are:
-     * 'dd.mm.yyyy'
-     * 'yyyy-mm-dd'
-     * 'dd-mm-yyyy'
-     * 'dd/mm/yyyy'
-     * 'yyyy/mm/dd'
-     * 'dd.mm.yy'
-     * 'yy-mm-dd'
-     * 'dd-mm-yy'
-     * 'dd/mm/yy'
-     * 'yy/mm/dd'
-     * */
-    this.dateFormat = SixDateFormats.DDMMYYY_DOT;
-    /**
-     * Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke.
-     */
-    this.debounce = DEFAULT_DEBOUNCE_FAST;
-    /** Set to display the error text on blur and not when typing */
-    this.errorOnBlur = false;
-    /** The input's error text. Alternatively, you can use the error-text slot. */
-    this.errorText = '';
-    /** The input's label. Alternatively, you can use the label slot. */
-    this.label = '';
-    /** The input's name attribute. */
-    this.name = '';
-    /** Set to true to add a clear button when the input is populated. */
-    this.clearable = false;
-    /** Set the position of the icon */
-    this.iconPosition = 'left';
-    /**
-     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-     * `overflow: auto|scroll`.
-     */
-    this.hoist = false;
     this.defaultValue = null;
     this.handleDocumentKeyDown = (event) => {
       // Close when escape is pressed
@@ -766,6 +682,35 @@ let SixDatepicker = class {
       }
       this.sixBlur.emit(this.value);
     };
+    this.pointerDate = SixDatepicker.getCurrentDateAsPointer();
+    this.selectionMode = SelectionMode.DAY;
+    this.isDropDownContentUp = false;
+    this.type = 'date';
+    this.locale = 'en';
+    this.open = false;
+    this.inline = false;
+    this.readonly = false;
+    this.disabled = false;
+    this.allowedDates = () => true;
+    this.min = null;
+    this.max = null;
+    this.closeOnSelect = this.type === 'date';
+    this.placement = undefined;
+    this.size = 'medium';
+    this.required = undefined;
+    this.defaultDate = undefined;
+    this.placeholder = undefined;
+    this.value = null;
+    this.containingElement = undefined;
+    this.dateFormat = SixDateFormats.DDMMYYY_DOT;
+    this.debounce = DEFAULT_DEBOUNCE_FAST;
+    this.errorOnBlur = false;
+    this.errorText = '';
+    this.label = '';
+    this.name = '';
+    this.clearable = false;
+    this.iconPosition = 'left';
+    this.hoist = false;
   }
   debounceChanged() {
     this.sixSelect = debounceEvent(this.sixSelect, this.debounce);
@@ -1204,3 +1149,5 @@ let SixDatepicker = class {
 SixDatepicker.style = sixDatepickerCss;
 
 export { SixDatepicker as six_datepicker };
+
+//# sourceMappingURL=six-datepicker.entry.js.map