@aurelia-ui-toolkits/headless 1.0.0

package/dist/button/ui-button.html

@@ -0,0 +1,20 @@
+<template class="ui-button"
+  role="button"
+  tabindex.bind="disabled ? -1 : 0"
+  aria-disabled.attr="disabled ? '' : null"
+  data-disabled.attr="disabled ? '' : null"
+  data-hover.attr="hover ? '' : null"
+  data-focus.attr="focus ? '' : null"
+  data-active.attr="active ? '' : null"
+  data-primary.attr="primary ? '' : null"
+  data-outlined.attr="outlined ? '' : null"
+  mouseenter.trigger="onMouseEnter()"
+  mouseleave.trigger="onMouseLeave()"
+  focusin.trigger="onFocusIn()"
+  focusout.trigger="onFocusOut()"
+  pointerdown.trigger="onPointerDown()"
+  pointerup.trigger="onPointerUp()"
+  pointerleave.trigger="onPointerLeave()"
+  click.trigger="onClick($event)">
+  <au-slot></au-slot>
+</template>

package/dist/button/ui-button.js

@@ -0,0 +1,77 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, customElement } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import template from './ui-button.html?raw';
+let UiButton = (() => {
+    let _classDecorators = [customElement({ name: 'ui-button', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _primary_decorators;
+    let _primary_initializers = [];
+    let _primary_extraInitializers = [];
+    let _outlined_decorators;
+    let _outlined_initializers = [];
+    let _outlined_extraInitializers = [];
+    var UiButton = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _disabled_decorators = [bindable({ set: booleanAttr })];
+            _primary_decorators = [bindable({ set: booleanAttr })];
+            _outlined_decorators = [bindable({ set: booleanAttr })];
+            __esDecorate(null, null, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(null, null, _primary_decorators, { kind: "field", name: "primary", static: false, private: false, access: { has: obj => "primary" in obj, get: obj => obj.primary, set: (obj, value) => { obj.primary = value; } }, metadata: _metadata }, _primary_initializers, _primary_extraInitializers);
+            __esDecorate(null, null, _outlined_decorators, { kind: "field", name: "outlined", static: false, private: false, access: { has: obj => "outlined" in obj, get: obj => obj.outlined, set: (obj, value) => { obj.outlined = value; } }, metadata: _metadata }, _outlined_initializers, _outlined_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiButton = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        disabled = __runInitializers(this, _disabled_initializers, false);
+        primary = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _primary_initializers, false));
+        outlined = (__runInitializers(this, _primary_extraInitializers), __runInitializers(this, _outlined_initializers, false));
+        hover = (__runInitializers(this, _outlined_extraInitializers), false);
+        focus = false;
+        active = false;
+        onMouseEnter() {
+            if (!this.disabled) {
+                this.hover = true;
+            }
+        }
+        onMouseLeave() {
+            this.hover = false;
+        }
+        onFocusIn() {
+            if (!this.disabled) {
+                this.focus = true;
+            }
+        }
+        onFocusOut() {
+            this.focus = false;
+        }
+        onPointerDown() {
+            if (!this.disabled) {
+                this.active = true;
+            }
+        }
+        onPointerUp() {
+            this.active = false;
+        }
+        onPointerLeave() {
+            this.active = false;
+        }
+        onClick(event) {
+            if (this.disabled) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+        }
+    };
+    return UiButton = _classThis;
+})();
+export { UiButton };
+//# sourceMappingURL=ui-button.js.map

package/dist/button/ui-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-button.js","sourceRoot":"","sources":["../../src/button/ui-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,QAAQ,MAAM,sBAAsB,CAAC;IAG/B,QAAQ;4BADpB,aAAa,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;;;;;;;;oCAE5C,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;mCAG9B,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;oCAG9B,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;YAL/B,0KAAA,QAAQ,6BAAR,QAAQ,2FAAkB;YAG1B,uKAAA,OAAO,6BAAP,OAAO,yFAAkB;YAGzB,0KAAA,QAAQ,6BAAR,QAAQ,2FAAkB;YAR5B,6KAsDC;;;YAtDY,uDAAQ;;QAEnB,QAAQ,mDAAY,KAAK,EAAC;QAG1B,OAAO,yGAAY,KAAK,GAAC;QAGzB,QAAQ,yGAAY,KAAK,GAAC;QAE1B,KAAK,0DAAY,KAAK,EAAC;QACvB,KAAK,GAAY,KAAK,CAAC;QACvB,MAAM,GAAY,KAAK,CAAC;QAExB,YAAY;YACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YACpB,CAAC;QACH,CAAC;QAED,YAAY;YACV,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC;QAED,SAAS;YACP,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YACpB,CAAC;QACH,CAAC;QAED,UAAU;YACR,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC;QAED,aAAa;YACX,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACrB,CAAC;QACH,CAAC;QAED,WAAW;YACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;QAED,cAAc;YACZ,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;QAED,OAAO,CAAC,KAAiB;YACvB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACnC,CAAC;QACH,CAAC;;;;SArDU,QAAQ","sourcesContent":["import { bindable, customElement } from 'aurelia';\nimport { booleanAttr } from '../base/boolean-attr';\nimport template from './ui-button.html?raw';\n\n@customElement({ name: 'ui-button', template })\nexport class UiButton {\n  @bindable({ set: booleanAttr })\n  disabled: boolean = false;\n\n  @bindable({ set: booleanAttr })\n  primary: boolean = false;\n\n  @bindable({ set: booleanAttr })\n  outlined: boolean = false;\n\n  hover: boolean = false;\n  focus: boolean = false;\n  active: boolean = false;\n\n  onMouseEnter(): void {\n    if (!this.disabled) {\n      this.hover = true;\n    }\n  }\n\n  onMouseLeave(): void {\n    this.hover = false;\n  }\n\n  onFocusIn(): void {\n    if (!this.disabled) {\n      this.focus = true;\n    }\n  }\n\n  onFocusOut(): void {\n    this.focus = false;\n  }\n\n  onPointerDown(): void {\n    if (!this.disabled) {\n      this.active = true;\n    }\n  }\n\n  onPointerUp(): void {\n    this.active = false;\n  }\n\n  onPointerLeave(): void {\n    this.active = false;\n  }\n\n  onClick(event: MouseEvent): void {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n}\n"]}

package/dist/button/ui-icon-button.html

@@ -0,0 +1,20 @@
+<template class="ui-icon-button"
+  role="button"
+  tabindex.bind="disabled ? -1 : 0"
+  aria-disabled.attr="disabled ? '' : null"
+  data-disabled.attr="disabled ? '' : null"
+  data-hover.attr="hover ? '' : null"
+  data-focus.attr="focus ? '' : null"
+  data-active.attr="active ? '' : null"
+  data-size.attr="size"
+  data-outlined.attr="outlined ? '' : null"
+  mouseenter.trigger="onMouseEnter()"
+  mouseleave.trigger="onMouseLeave()"
+  focusin.trigger="onFocusIn()"
+  focusout.trigger="onFocusOut()"
+  pointerdown.trigger="onPointerDown()"
+  pointerup.trigger="onPointerUp()"
+  pointerleave.trigger="onPointerLeave()"
+  click.trigger="onClick($event)">
+  <au-slot></au-slot>
+</template>

package/dist/button/ui-icon-button.js

@@ -0,0 +1,77 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, customElement } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import template from './ui-icon-button.html?raw';
+let UiIconButton = (() => {
+    let _classDecorators = [customElement({ name: 'ui-icon-button', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _outlined_decorators;
+    let _outlined_initializers = [];
+    let _outlined_extraInitializers = [];
+    var UiIconButton = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _disabled_decorators = [bindable({ set: booleanAttr })];
+            _size_decorators = [bindable];
+            _outlined_decorators = [bindable({ set: booleanAttr })];
+            __esDecorate(null, null, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(null, null, _size_decorators, { kind: "field", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            __esDecorate(null, null, _outlined_decorators, { kind: "field", name: "outlined", static: false, private: false, access: { has: obj => "outlined" in obj, get: obj => obj.outlined, set: (obj, value) => { obj.outlined = value; } }, metadata: _metadata }, _outlined_initializers, _outlined_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiIconButton = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        disabled = __runInitializers(this, _disabled_initializers, false);
+        size = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _size_initializers, 'medium'));
+        outlined = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _outlined_initializers, false));
+        hover = (__runInitializers(this, _outlined_extraInitializers), false);
+        focus = false;
+        active = false;
+        onMouseEnter() {
+            if (!this.disabled) {
+                this.hover = true;
+            }
+        }
+        onMouseLeave() {
+            this.hover = false;
+        }
+        onFocusIn() {
+            if (!this.disabled) {
+                this.focus = true;
+            }
+        }
+        onFocusOut() {
+            this.focus = false;
+        }
+        onPointerDown() {
+            if (!this.disabled) {
+                this.active = true;
+            }
+        }
+        onPointerUp() {
+            this.active = false;
+        }
+        onPointerLeave() {
+            this.active = false;
+        }
+        onClick(event) {
+            if (this.disabled) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+        }
+    };
+    return UiIconButton = _classThis;
+})();
+export { UiIconButton };
+//# sourceMappingURL=ui-icon-button.js.map

package/dist/button/ui-icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-icon-button.js","sourceRoot":"","sources":["../../src/button/ui-icon-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,QAAQ,MAAM,2BAA2B,CAAC;IAKpC,YAAY;4BADxB,aAAa,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;;;;;;;;oCAEjD,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;gCAG9B,QAAQ;oCAGR,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;YAL/B,0KAAA,QAAQ,6BAAR,QAAQ,2FAAkB;YAG1B,8JAAA,IAAI,6BAAJ,IAAI,mFAA4B;YAGhC,0KAAA,QAAQ,6BAAR,QAAQ,2FAAkB;YAR5B,6KAsDC;;;YAtDY,uDAAY;;QAEvB,QAAQ,mDAAY,KAAK,EAAC;QAG1B,IAAI,sGAAmB,QAAQ,GAAC;QAGhC,QAAQ,sGAAY,KAAK,GAAC;QAE1B,KAAK,0DAAY,KAAK,EAAC;QACvB,KAAK,GAAY,KAAK,CAAC;QACvB,MAAM,GAAY,KAAK,CAAC;QAExB,YAAY;YACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YACpB,CAAC;QACH,CAAC;QAED,YAAY;YACV,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC;QAED,SAAS;YACP,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YACpB,CAAC;QACH,CAAC;QAED,UAAU;YACR,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC;QAED,aAAa;YACX,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACrB,CAAC;QACH,CAAC;QAED,WAAW;YACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;QAED,cAAc;YACZ,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;QAED,OAAO,CAAC,KAAiB;YACvB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACnC,CAAC;QACH,CAAC;;;;SArDU,YAAY","sourcesContent":["import { bindable, customElement } from 'aurelia';\nimport { booleanAttr } from '../base/boolean-attr';\nimport template from './ui-icon-button.html?raw';\n\ntype IconButtonSize = 'small' | 'medium' | 'large';\n\n@customElement({ name: 'ui-icon-button', template })\nexport class UiIconButton {\n  @bindable({ set: booleanAttr })\n  disabled: boolean = false;\n\n  @bindable\n  size: IconButtonSize = 'medium';\n\n  @bindable({ set: booleanAttr })\n  outlined: boolean = false;\n\n  hover: boolean = false;\n  focus: boolean = false;\n  active: boolean = false;\n\n  onMouseEnter(): void {\n    if (!this.disabled) {\n      this.hover = true;\n    }\n  }\n\n  onMouseLeave(): void {\n    this.hover = false;\n  }\n\n  onFocusIn(): void {\n    if (!this.disabled) {\n      this.focus = true;\n    }\n  }\n\n  onFocusOut(): void {\n    this.focus = false;\n  }\n\n  onPointerDown(): void {\n    if (!this.disabled) {\n      this.active = true;\n    }\n  }\n\n  onPointerUp(): void {\n    this.active = false;\n  }\n\n  onPointerLeave(): void {\n    this.active = false;\n  }\n\n  onClick(event: MouseEvent): void {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n}\n"]}

package/dist/checkbox/ui-checkbox.html

@@ -0,0 +1,32 @@
+<template class="ui-checkbox"
+  role="checkbox"
+  tabindex.bind="disabled ? null : tabIndex"
+  aria-checked.attr="indeterminate ? 'mixed' : checked ? 'true' : 'false'"
+  aria-disabled.attr="disabled ? '' : null"
+  data-checked.attr="checked ? '' : null"
+  data-disabled.attr="disabled ? '' : null"
+  data-indeterminate.attr="indeterminate ? '' : null"
+  data-hover.attr="hover ? '' : null"
+  data-focus.attr="focus ? '' : null"
+  data-active.attr="active ? '' : null"
+  data-changing.attr="changing ? '' : null"
+  click.trigger="onClick($event)"
+  keyup.trigger="onKeyUp($event)"
+  keypress.trigger="onKeyPress($event)"
+  mouseenter.trigger="onMouseEnter()"
+  mouseleave.trigger="onMouseLeave()"
+  focusin.trigger="onFocusIn()"
+  focusout.trigger="onFocusOut()"
+  pointerdown.trigger="onPointerDown()"
+  pointerup.trigger="onPointerUp()"
+  pointerleave.trigger="onPointerLeave()">
+  <input ref="controlEl"
+    class="ui-checkbox__control"
+    type="checkbox"
+    id.attr="id || null"
+    checked.bind="checked"
+    disabled.bind="disabled"
+    click.trigger="onInputClick($event)"
+    change.trigger="onInputChange($event)">
+  <span class="ui-checkbox__indicator" aria-hidden="true"></span>
+</template>

package/dist/checkbox/ui-checkbox.js

@@ -0,0 +1,186 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, BindingMode, customElement } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { Keys } from '../base/keys';
+import template from './ui-checkbox.html?raw';
+let UiCheckbox = (() => {
+    let _classDecorators = [customElement({ name: 'ui-checkbox', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _checked_decorators;
+    let _checked_initializers = [];
+    let _checked_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _indeterminate_decorators;
+    let _indeterminate_initializers = [];
+    let _indeterminate_extraInitializers = [];
+    let _id_decorators;
+    let _id_initializers = [];
+    let _id_extraInitializers = [];
+    let _tabIndex_decorators;
+    let _tabIndex_initializers = [];
+    let _tabIndex_extraInitializers = [];
+    var UiCheckbox = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _checked_decorators = [bindable({ mode: BindingMode.twoWay, set: booleanAttr })];
+            _disabled_decorators = [bindable({ set: booleanAttr })];
+            _indeterminate_decorators = [bindable({ mode: BindingMode.twoWay, set: booleanAttr })];
+            _id_decorators = [bindable];
+            _tabIndex_decorators = [bindable];
+            __esDecorate(null, null, _checked_decorators, { kind: "field", name: "checked", static: false, private: false, access: { has: obj => "checked" in obj, get: obj => obj.checked, set: (obj, value) => { obj.checked = value; } }, metadata: _metadata }, _checked_initializers, _checked_extraInitializers);
+            __esDecorate(null, null, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(null, null, _indeterminate_decorators, { kind: "field", name: "indeterminate", static: false, private: false, access: { has: obj => "indeterminate" in obj, get: obj => obj.indeterminate, set: (obj, value) => { obj.indeterminate = value; } }, metadata: _metadata }, _indeterminate_initializers, _indeterminate_extraInitializers);
+            __esDecorate(null, null, _id_decorators, { kind: "field", name: "id", static: false, private: false, access: { has: obj => "id" in obj, get: obj => obj.id, set: (obj, value) => { obj.id = value; } }, metadata: _metadata }, _id_initializers, _id_extraInitializers);
+            __esDecorate(null, null, _tabIndex_decorators, { kind: "field", name: "tabIndex", static: false, private: false, access: { has: obj => "tabIndex" in obj, get: obj => obj.tabIndex, set: (obj, value) => { obj.tabIndex = value; } }, metadata: _metadata }, _tabIndex_initializers, _tabIndex_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiCheckbox = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        checked = __runInitializers(this, _checked_initializers, false);
+        disabled = (__runInitializers(this, _checked_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+        indeterminate = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _indeterminate_initializers, false));
+        id = (__runInitializers(this, _indeterminate_extraInitializers), __runInitializers(this, _id_initializers, ''));
+        tabIndex = (__runInitializers(this, _id_extraInitializers), __runInitializers(this, _tabIndex_initializers, 0));
+        hover = (__runInitializers(this, _tabIndex_extraInitializers), false);
+        focus = false;
+        active = false;
+        changing = false;
+        controlEl;
+        changingFrame;
+        onClick(event) {
+            if (event.target instanceof HTMLInputElement) {
+                return;
+            }
+            event.preventDefault();
+            this.toggle();
+        }
+        onInputClick(event) {
+            event.stopPropagation();
+        }
+        onInputChange(event) {
+            if (!(event.target instanceof HTMLInputElement) || this.disabled) {
+                return;
+            }
+            this.changing = true;
+            this.checked = event.target.checked;
+            this.indeterminate = false;
+            if (this.changingFrame) {
+                cancelAnimationFrame(this.changingFrame);
+            }
+            this.changingFrame = requestAnimationFrame(() => {
+                this.changing = false;
+                this.changingFrame = undefined;
+            });
+        }
+        onKeyUp(event) {
+            if (this.disabled) {
+                return;
+            }
+            if (event.key === Keys.Space) {
+                event.preventDefault();
+                this.toggle();
+                return;
+            }
+            if (event.key === Keys.Enter) {
+                this.submitClosestForm(event.currentTarget);
+            }
+        }
+        onKeyPress(event) {
+            if (event.key === Keys.Space || event.key === Keys.Enter) {
+                event.preventDefault();
+            }
+        }
+        onMouseEnter() {
+            if (!this.disabled) {
+                this.hover = true;
+            }
+        }
+        onMouseLeave() {
+            this.hover = false;
+        }
+        onFocusIn() {
+            if (!this.disabled) {
+                this.focus = true;
+            }
+        }
+        onFocusOut() {
+            this.focus = false;
+        }
+        onPointerDown() {
+            if (!this.disabled) {
+                this.active = true;
+            }
+        }
+        onPointerUp() {
+            this.active = false;
+        }
+        onPointerLeave() {
+            this.active = false;
+        }
+        detaching() {
+            if (this.changingFrame) {
+                cancelAnimationFrame(this.changingFrame);
+                this.changingFrame = undefined;
+            }
+        }
+        attached() {
+            this.syncControlIndeterminate();
+        }
+        indeterminateChanged() {
+            this.syncControlIndeterminate();
+        }
+        toggle() {
+            if (this.disabled) {
+                return;
+            }
+            this.changing = true;
+            if (this.indeterminate) {
+                this.indeterminate = false;
+                this.checked = true;
+            }
+            else {
+                this.checked = !this.checked;
+            }
+            this.dispatchValueEvent('input');
+            this.dispatchValueEvent('change');
+            if (this.changingFrame) {
+                cancelAnimationFrame(this.changingFrame);
+            }
+            this.changingFrame = requestAnimationFrame(() => {
+                this.changing = false;
+                this.changingFrame = undefined;
+            });
+        }
+        submitClosestForm(target) {
+            const element = target instanceof HTMLElement ? target : null;
+            const form = element?.closest('form');
+            if (!form || this.disabled) {
+                return;
+            }
+            if (typeof form.requestSubmit === 'function') {
+                form.requestSubmit();
+                return;
+            }
+            form.submit();
+        }
+        syncControlIndeterminate() {
+            if (this.controlEl) {
+                this.controlEl.indeterminate = this.indeterminate;
+            }
+        }
+        dispatchValueEvent(type) {
+            this.controlEl.checked = this.checked;
+            this.controlEl.indeterminate = this.indeterminate;
+            this.controlEl.dispatchEvent(new Event(type, { bubbles: true }));
+        }
+    };
+    return UiCheckbox = _classThis;
+})();
+export { UiCheckbox };
+//# sourceMappingURL=ui-checkbox.js.map

package/dist/checkbox/ui-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-checkbox.js","sourceRoot":"","sources":["../../src/checkbox/ui-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { bindable, BindingMode, customElement } from 'aurelia';\nimport { booleanAttr } from '../base/boolean-attr';\nimport { Keys } from '../base/keys';\nimport template from './ui-checkbox.html?raw';\n\n@customElement({ name: 'ui-checkbox', template })\nexport class UiCheckbox {\n  @bindable({ mode: BindingMode.twoWay, set: booleanAttr })\n  checked: boolean = false;\n\n  @bindable({ set: booleanAttr })\n  disabled: boolean = false;\n\n  @bindable({ mode: BindingMode.twoWay, set: booleanAttr })\n  indeterminate: boolean = false;\n\n  @bindable\n  id: string = '';\n\n  @bindable\n  tabIndex: number = 0;\n\n  hover: boolean = false;\n  focus: boolean = false;\n  active: boolean = false;\n  changing: boolean = false;\n\n  controlEl!: HTMLInputElement;\n\n  private changingFrame: number | undefined;\n\n  onClick(event: MouseEvent): void {\n    if (event.target instanceof HTMLInputElement) {\n      return;\n    }\n\n    event.preventDefault();\n    this.toggle();\n  }\n\n  onInputClick(event: MouseEvent): void {\n    event.stopPropagation();\n  }\n\n  onInputChange(event: Event): void {\n    if (!(event.target instanceof HTMLInputElement) || this.disabled) {\n      return;\n    }\n\n    this.changing = true;\n    this.checked = event.target.checked;\n    this.indeterminate = false;\n\n    if (this.changingFrame) {\n      cancelAnimationFrame(this.changingFrame);\n    }\n\n    this.changingFrame = requestAnimationFrame(() => {\n      this.changing = false;\n      this.changingFrame = undefined;\n    });\n  }\n\n  onKeyUp(event: KeyboardEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    if (event.key === Keys.Space) {\n      event.preventDefault();\n      this.toggle();\n      return;\n    }\n\n    if (event.key === Keys.Enter) {\n      this.submitClosestForm(event.currentTarget);\n    }\n  }\n\n  onKeyPress(event: KeyboardEvent): void {\n    if (event.key === Keys.Space || event.key === Keys.Enter) {\n      event.preventDefault();\n    }\n  }\n\n  onMouseEnter(): void {\n    if (!this.disabled) {\n      this.hover = true;\n    }\n  }\n\n  onMouseLeave(): void {\n    this.hover = false;\n  }\n\n  onFocusIn(): void {\n    if (!this.disabled) {\n      this.focus = true;\n    }\n  }\n\n  onFocusOut(): void {\n    this.focus = false;\n  }\n\n  onPointerDown(): void {\n    if (!this.disabled) {\n      this.active = true;\n    }\n  }\n\n  onPointerUp(): void {\n    this.active = false;\n  }\n\n  onPointerLeave(): void {\n    this.active = false;\n  }\n\n  detaching(): void {\n    if (this.changingFrame) {\n      cancelAnimationFrame(this.changingFrame);\n      this.changingFrame = undefined;\n    }\n  }\n\n  attached(): void {\n    this.syncControlIndeterminate();\n  }\n\n  indeterminateChanged(): void {\n    this.syncControlIndeterminate();\n  }\n\n  private toggle(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.changing = true;\n    if (this.indeterminate) {\n      this.indeterminate = false;\n      this.checked = true;\n    } else {\n      this.checked = !this.checked;\n    }\n\n    this.dispatchValueEvent('input');\n    this.dispatchValueEvent('change');\n\n    if (this.changingFrame) {\n      cancelAnimationFrame(this.changingFrame);\n    }\n\n    this.changingFrame = requestAnimationFrame(() => {\n      this.changing = false;\n      this.changingFrame = undefined;\n    });\n  }\n\n  private submitClosestForm(target: EventTarget | null): void {\n    const element = target instanceof HTMLElement ? target : null;\n    const form = element?.closest('form');\n\n    if (!form || this.disabled) {\n      return;\n    }\n\n    if (typeof form.requestSubmit === 'function') {\n      form.requestSubmit();\n      return;\n    }\n\n    form.submit();\n  }\n\n  private syncControlIndeterminate(): void {\n    if (this.controlEl) {\n      this.controlEl.indeterminate = this.indeterminate;\n    }\n  }\n\n  private dispatchValueEvent(type: 'input' | 'change'): void {\n    this.controlEl.checked = this.checked;\n    this.controlEl.indeterminate = this.indeterminate;\n    this.controlEl.dispatchEvent(new Event(type, { bubbles: true }));\n  }\n}\n"]}

package/dist/chip/ui-chip.html

@@ -0,0 +1,32 @@
+<template class="ui-chip"
+  role="button"
+  tabindex.bind="disabled ? -1 : 0"
+  aria-pressed.attr="selected ? 'true' : 'false'"
+  aria-disabled.attr="disabled ? 'true' : null"
+  data-tone.attr="tone"
+  data-selected.attr="selected ? '' : null"
+  data-disabled.attr="disabled ? '' : null"
+  data-removable.attr="removable ? '' : null"
+  data-hover.attr="hover ? '' : null"
+  data-focus.attr="focus ? '' : null"
+  data-active.attr="active ? '' : null"
+  click.trigger="onClick($event)"
+  keydown.trigger="onKeyDown($event)"
+  mouseenter.trigger="onMouseEnter()"
+  mouseleave.trigger="onMouseLeave()"
+  focusin.trigger="onFocusIn()"
+  focusout.trigger="onFocusOut()"
+  pointerdown.trigger="onPointerDown()"
+  pointerup.trigger="onPointerUp()"
+  pointerleave.trigger="onPointerLeave()">
+  <span class="ui-chip__content"><au-slot></au-slot></span>
+  <button class="ui-chip__remove"
+    if.bind="removable"
+    type="button"
+    tabindex="-1"
+    aria-label="Remove"
+    disabled.bind="disabled"
+    click.trigger="onRemoveClick($event)">
+    <span class="ui-chip__remove-icon" aria-hidden="true"></span>
+  </button>
+</template>

package/dist/chip/ui-chip.js

@@ -0,0 +1,129 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, BindingMode, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { Keys } from '../base/keys';
+import template from './ui-chip.html?raw';
+let UiChip = (() => {
+    let _classDecorators = [customElement({ name: 'ui-chip', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _selected_decorators;
+    let _selected_initializers = [];
+    let _selected_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _removable_decorators;
+    let _removable_initializers = [];
+    let _removable_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _tone_decorators;
+    let _tone_initializers = [];
+    let _tone_extraInitializers = [];
+    var UiChip = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _selected_decorators = [bindable({ mode: BindingMode.twoWay, set: booleanAttr })];
+            _disabled_decorators = [bindable({ set: booleanAttr })];
+            _removable_decorators = [bindable({ set: booleanAttr })];
+            _value_decorators = [bindable];
+            _tone_decorators = [bindable];
+            __esDecorate(null, null, _selected_decorators, { kind: "field", name: "selected", static: false, private: false, access: { has: obj => "selected" in obj, get: obj => obj.selected, set: (obj, value) => { obj.selected = value; } }, metadata: _metadata }, _selected_initializers, _selected_extraInitializers);
+            __esDecorate(null, null, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(null, null, _removable_decorators, { kind: "field", name: "removable", static: false, private: false, access: { has: obj => "removable" in obj, get: obj => obj.removable, set: (obj, value) => { obj.removable = value; } }, metadata: _metadata }, _removable_initializers, _removable_extraInitializers);
+            __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(null, null, _tone_decorators, { kind: "field", name: "tone", static: false, private: false, access: { has: obj => "tone" in obj, get: obj => obj.tone, set: (obj, value) => { obj.tone = value; } }, metadata: _metadata }, _tone_initializers, _tone_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiChip = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        host = resolve(INode);
+        selected = __runInitializers(this, _selected_initializers, false);
+        disabled = (__runInitializers(this, _selected_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+        removable = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _removable_initializers, false));
+        value = (__runInitializers(this, _removable_extraInitializers), __runInitializers(this, _value_initializers, void 0));
+        tone = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _tone_initializers, 'neutral'));
+        hover = (__runInitializers(this, _tone_extraInitializers), false);
+        focus = false;
+        active = false;
+        onClick(event) {
+            if (this.disabled || this.isRemoveTarget(event.target)) {
+                return;
+            }
+            this.toggleSelected();
+        }
+        onKeyDown(event) {
+            if (this.disabled) {
+                return;
+            }
+            if (event.key === Keys.Space || event.key === Keys.Enter) {
+                event.preventDefault();
+                this.toggleSelected();
+                return;
+            }
+            if (this.removable && (event.key === 'Backspace' || event.key === 'Delete')) {
+                event.preventDefault();
+                this.remove();
+            }
+        }
+        onRemoveClick(event) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.remove();
+        }
+        onMouseEnter() {
+            if (!this.disabled) {
+                this.hover = true;
+            }
+        }
+        onMouseLeave() {
+            this.hover = false;
+        }
+        onFocusIn() {
+            if (!this.disabled) {
+                this.focus = true;
+            }
+        }
+        onFocusOut() {
+            this.focus = false;
+        }
+        onPointerDown() {
+            if (!this.disabled) {
+                this.active = true;
+            }
+        }
+        onPointerUp() {
+            this.active = false;
+        }
+        onPointerLeave() {
+            this.active = false;
+        }
+        toggleSelected() {
+            this.selected = !this.selected;
+            this.host.dispatchEvent(new CustomEvent('chip-select', {
+                bubbles: true,
+                detail: { selected: this.selected, value: this.value }
+            }));
+        }
+        remove() {
+            if (this.disabled || !this.removable) {
+                return;
+            }
+            this.host.dispatchEvent(new CustomEvent('chip-remove', {
+                bubbles: true,
+                detail: { value: this.value }
+            }));
+        }
+        isRemoveTarget(target) {
+            return target instanceof HTMLElement && !!target.closest('.ui-chip__remove');
+        }
+    };
+    return UiChip = _classThis;
+})();
+export { UiChip };
+//# sourceMappingURL=ui-chip.js.map

package/dist/chip/ui-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-chip.js","sourceRoot":"","sources":["../../src/chip/ui-chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { bindable, BindingMode, customElement, INode, resolve } from 'aurelia';\nimport { booleanAttr } from '../base/boolean-attr';\nimport { Keys } from '../base/keys';\nimport template from './ui-chip.html?raw';\n\ntype ChipTone = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';\n\n@customElement({ name: 'ui-chip', template })\nexport class UiChip {\n  private readonly host = resolve(INode) as HTMLElement;\n\n  @bindable({ mode: BindingMode.twoWay, set: booleanAttr })\n  selected = false;\n\n  @bindable({ set: booleanAttr })\n  disabled = false;\n\n  @bindable({ set: booleanAttr })\n  removable = false;\n\n  @bindable\n  value: unknown;\n\n  @bindable\n  tone: ChipTone = 'neutral';\n\n  hover = false;\n  focus = false;\n  active = false;\n\n  onClick(event: MouseEvent): void {\n    if (this.disabled || this.isRemoveTarget(event.target)) {\n      return;\n    }\n\n    this.toggleSelected();\n  }\n\n  onKeyDown(event: KeyboardEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    if (event.key === Keys.Space || event.key === Keys.Enter) {\n      event.preventDefault();\n      this.toggleSelected();\n      return;\n    }\n\n    if (this.removable && (event.key === 'Backspace' || event.key === 'Delete')) {\n      event.preventDefault();\n      this.remove();\n    }\n  }\n\n  onRemoveClick(event: MouseEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this.remove();\n  }\n\n  onMouseEnter(): void {\n    if (!this.disabled) {\n      this.hover = true;\n    }\n  }\n\n  onMouseLeave(): void {\n    this.hover = false;\n  }\n\n  onFocusIn(): void {\n    if (!this.disabled) {\n      this.focus = true;\n    }\n  }\n\n  onFocusOut(): void {\n    this.focus = false;\n  }\n\n  onPointerDown(): void {\n    if (!this.disabled) {\n      this.active = true;\n    }\n  }\n\n  onPointerUp(): void {\n    this.active = false;\n  }\n\n  onPointerLeave(): void {\n    this.active = false;\n  }\n\n  private toggleSelected(): void {\n    this.selected = !this.selected;\n    this.host.dispatchEvent(new CustomEvent('chip-select', {\n      bubbles: true,\n      detail: { selected: this.selected, value: this.value }\n    }));\n  }\n\n  private remove(): void {\n    if (this.disabled || !this.removable) {\n      return;\n    }\n\n    this.host.dispatchEvent(new CustomEvent('chip-remove', {\n      bubbles: true,\n      detail: { value: this.value }\n    }));\n  }\n\n  private isRemoveTarget(target: EventTarget | null): boolean {\n    return target instanceof HTMLElement && !!target.closest('.ui-chip__remove');\n  }\n}\n"]}