@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

package/lib/collection/components/duet-checkbox/duet-checkbox.js

@@ -11,6 +11,67 @@ export class DuetCheckbox {
          */
         this.checkboxId = createID("DuetCheckbox");
         this.errorId = createID("DuetError");
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Aria Details of the component
+         */
+        this.accessibleDetails = undefined;
+        /**
+         * String of id's that indicate alternative labels elements
+         */
+        this.accessibleLabelledBy = undefined;
+        /**
+         * Aria description the button
+         */
+        this.accessibleDescription = undefined;
+        /**
+         * Aria selected
+         */
+        this.accessibleSelected = undefined;
+        /**
+         * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive"
+         * makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave
+         * the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message
+         * unread by screen readers.
+         */
+        this.accessibleLiveError = "polite";
+        /**
+         * Set whether the input is required or not. Please note that this is required for
+         * accessible inputs when the user is required to fill them. When using this property
+         * you need to also set “novalidate” attribute to your form element to prevent
+         * browser from displaying its own validation errors.
+         */
+        this.required = false;
+        /**
+         * Display the checkbox in error state along with an error message (when a required choice has not been made).
+         * Note that this should only be used for single checkbox - for multiple checkboxes, wrap them in a fieldset and use
+         * the error property on that.
+         */
+        this.error = "";
+        /**
+         * Theme of the checkbox.
+         */
+        this.theme = "";
+        /**
+         * Makes the checkbox component disabled. This prevents users from being able to
+         * interact with the checkbox, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Label for the checkbox
+         */
+        this.label = "label";
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
+        /**
+         * Check state of the checkbox.
+         */
+        this.checked = false;
         /**
          * Component event handling.
          */
@@ -49,28 +110,6 @@ export class DuetCheckbox {
             }
             return describedBy.length > 0 ? describedBy.join(" ") : null;
         };
-        this.accessibleActiveDescendant = undefined;
-        this.margin = "auto";
-        this.accessibleControls = undefined;
-        this.accessibleIndex = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.accessibleDetails = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleDescription = undefined;
-        this.accessibleSelected = undefined;
-        this.accessibleLiveError = "polite";
-        this.required = false;
-        this.error = "";
-        this.theme = "";
-        this.disabled = false;
-        this.identifier = undefined;
-        this.label = "label";
-        this.labelHidden = false;
-        this.name = undefined;
-        this.role = undefined;
-        this.checked = false;
-        this.value = undefined;
     }
     /**
      * Component lifecycle events.
@@ -94,11 +133,11 @@ export class DuetCheckbox {
      */
     render() {
         const identifier = this.identifier || this.checkboxId;
-        return (h(Host, { key: '384b2451cc9f332a9b8ac970d3b8ca514cef04ac', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '7054f176fd64937eb3e3593a4c250d3b859bc513', class: {
+        return (h(Host, { key: '6b86df6df409dddb234482222ed98aa1856f36a9', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '84c3d4918deb9b887a13156b0437760a25b6808a', class: {
                 "duet-checkbox-container": true,
                 "duet-label-hidden": this.labelHidden,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("input", { key: '065d7c5a7572d7b35eae0a737b4e8893c95eb973', ref: input => (this.nativeInput = input), type: "checkbox", onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, value: this.value, class: { "duet-checkbox": true, disabled: this.disabled }, checked: this.checked, disabled: this.disabled, tabindex: this.accessibleIndex, "aria-invalid": this.error ? "true" : "false", "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-selected": this.accessibleSelected, required: this.required, role: this.role, name: this.name, id: identifier }), h("label", { key: '230c32312aebf8539e4c8082bb30062f09db2bc7', class: "duet-label", htmlFor: identifier }, h("span", { key: 'fc1c8a054c43f487513405bb0e592c114a7969bf' }, this.label)), h("div", { key: 'ff34862455f6c81370d7860c8c45b7f64b792fbc', class: "duet-checkbox-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'c0ae8d05ca74b8955f1ee2f312a515d020ef997e' }, this.error)))));
+            } }, h("input", { key: 'b1ed311c0d079e07e83a5a27ff963d79b3e2dc76', ref: input => (this.nativeInput = input), type: "checkbox", onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, value: this.value, class: { "duet-checkbox": true, disabled: this.disabled }, checked: this.checked, disabled: this.disabled, tabindex: this.accessibleIndex, "aria-invalid": this.error ? "true" : "false", "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-selected": this.accessibleSelected, required: this.required, role: this.role, name: this.name, id: identifier }), h("label", { key: '9950f2962f0c64ef59616f9968ecaf0f01c12c44', class: "duet-label", htmlFor: identifier }, h("span", { key: '9030e64b2d5364eff9c0e7c693aa43ed1637b205' }, this.label)), h("div", { key: '38ed5e4c0de52f6118818acc06424024c5333195', class: "duet-checkbox-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '70f692619ec92896fc2c287a1c39f9aa5d5eebd0' }, this.error)))));
     }
     static get is() { return "duet-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -116,6 +155,7 @@ export class DuetCheckbox {
         return {
             "accessibleActiveDescendant": {
                 "type": "string",
+                "attribute": "accessible-active-descendant",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -130,11 +170,11 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-active-descendant",
                 "reflect": false
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -155,12 +195,12 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "accessibleControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -175,11 +215,11 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false
             },
             "accessibleIndex": {
                 "type": "string",
+                "attribute": "accessible-index",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -194,11 +234,11 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-index",
                 "reflect": false
             },
             "accessibleOwns": {
                 "type": "string",
+                "attribute": "accessible-owns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -213,11 +253,11 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-owns",
                 "reflect": false
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -232,11 +272,11 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false
             },
             "accessibleDetails": {
                 "type": "string",
+                "attribute": "accessible-details",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -251,12 +291,12 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabelledBy": {
                 "type": "string",
+                "attribute": "accessible-labelled-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -271,12 +311,12 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDescription": {
                 "type": "string",
+                "attribute": "accessible-description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -291,12 +331,12 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleSelected": {
                 "type": "string",
+                "attribute": "accessible-selected",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -311,12 +351,12 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-selected",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLiveError": {
                 "type": "string",
+                "attribute": "accessible-live-error",
                 "mutable": false,
                 "complexType": {
                     "original": "\"off\" | \"polite\" | \"assertive\"",
@@ -331,12 +371,12 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-live-error",
                 "reflect": false,
                 "defaultValue": "\"polite\""
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -351,12 +391,12 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "error": {
                 "type": "string",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -371,12 +411,12 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -397,12 +437,12 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -417,12 +457,12 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -437,11 +477,11 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -456,12 +496,12 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"label\""
             },
             "labelHidden": {
                 "type": "boolean",
+                "attribute": "label-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -476,12 +516,12 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -496,11 +536,11 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "role": {
                 "type": "string",
+                "attribute": "role",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -515,11 +555,11 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "role",
                 "reflect": false
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -534,12 +574,12 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -554,7 +594,6 @@ export class DuetCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true
             }
         };

package/lib/collection/components/duet-chip/duet-chip.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-right: 8px !important;
   margin-bottom: 12px !important;
   position: relative;
@@ -32,6 +32,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type {
+  margin-right: 8px !important;
+}
 
 :host(.input) {
   margin-top: 6px !important;
@@ -48,10 +51,10 @@
   display: block;
   width: 100%;
   padding: 1px;
-  hyphens: none;
   line-height: 1.1;
   color: rgb(8, 42, 77) !important;
   text-align: center;
+  hyphens: none;
   cursor: pointer;
   background: rgb(255, 255, 255);
   border-color: rgb(181, 198, 208);
@@ -130,7 +133,7 @@
 .duet-chip-container.duet-chip-has-icon .duet-chip-icon-container {
   width: 24px;
   height: 16px;
-  padding-right: 10px;
+  padding-right: 8px;
 }
 .duet-chip-container.duet-chip-has-icon.duet-chip-filter-checked .duet-chip-icon-container, .duet-chip-container.duet-chip-has-icon.duet-chip-radio-checked .duet-chip-icon-container {
   padding-right: 11px;
@@ -138,24 +141,24 @@
 }
 .duet-chip-container.duet-chip-has-icon button,
 .duet-chip-container.duet-chip-has-icon label {
-  padding-left: 10px;
+  padding-left: 12px;
 }
 .duet-chip-container.duet-chip-has-popup button,
 .duet-chip-container.duet-chip-has-popup label {
-  padding-right: 8px;
+  padding-right: 12px;
 }
 .duet-chip-container duet-icon:not(.check-mark) {
-  width: auto;
   visibility: visible;
-  transition: width 300ms ease, transform 300ms ease;
+  width: auto;
   transform: scaleX(1);
+  transition: width 300ms ease, transform 300ms ease;
 }
 .duet-chip-container duet-icon.check-mark {
+  visibility: hidden;
   width: 0;
   overflow: hidden;
-  visibility: hidden;
-  transition: width 300ms ease, transform 300ms ease;
   transform: scaleX(0);
+  transition: width 300ms ease, transform 300ms ease;
 }
 .duet-chip-container.duet-chip-filter-checked, .duet-chip-container.duet-chip-radio-checked {
   padding: 0 !important;
@@ -175,24 +178,24 @@
   padding-right: 10px;
 }
 .duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon:not(.check-mark), .duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container duet-icon:not(.check-mark) {
+  visibility: hidden;
   width: 0;
   overflow: hidden;
-  visibility: hidden;
-  transition: width 300ms ease, transform 300ms ease;
   transform: scaleX(0);
+  transition: width 300ms ease, transform 300ms ease;
 }
 .duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon.check-mark, .duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container duet-icon.check-mark {
-  width: auto;
   visibility: visible;
-  transition: width 300ms ease, transform 300ms ease;
+  width: auto;
   transform: scaleX(1);
+  transition: width 300ms ease, transform 300ms ease;
 }
 .duet-chip-container.duet-chip-filter-checked.duet-theme-turva, .duet-chip-container.duet-chip-radio-checked.duet-theme-turva {
-  background: rgb(245, 247, 250);
+  background: rgb(255, 241, 241);
   border-color: rgb(198, 12, 48);
 }
 .duet-chip-container.duet-chip-filter-checked.duet-theme-turva:hover, .duet-chip-container.duet-chip-radio-checked.duet-theme-turva:hover {
-  background: rgb(222, 224, 228);
+  background: rgb(255, 213, 215);
 }
 .duet-chip-container .duet-chip-popup-disclosure {
   padding-right: 4.5px;
@@ -206,7 +209,7 @@
   border-color: rgb(240, 247, 250);
 }
 .duet-chip-container.duet-chip-filter-popup-open.duet-theme-turva {
-  background: rgb(245, 247, 250);
+  background: rgb(255, 241, 241);
   border-color: rgb(245, 247, 250);
 }
 .duet-chip-container.duet-chip-filter-popup-open .duet-chip-popup-disclosure duet-icon {
@@ -280,16 +283,29 @@
 }
 .duet-chip-container.large button,
 .duet-chip-container.large label {
-  padding: 15px 22px;
+  padding: 15px 18px;
+}
+.duet-chip-container.large.duet-chip-has-icon .duet-chip-icon-container {
+  width: 30px;
+  padding-right: 10px;
+}
+.duet-chip-container.large .duet-chip-popup-disclosure {
+  padding-right: 6.5px;
+  padding-left: 14.5px;
 }
 
 :host(.user-is-tabbing) .duet-chip-focus,
 :host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-:host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva,
-:host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva :host(.user-is-tabbing) .duet-chip-focus, :host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-chip-focus, :host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva2,
+.duet-theme-turva :host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button,
+:host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button.duet-theme-turva,
+.duet-theme-turva2 :host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button,
+:host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
 .duet-chip-container input,
@@ -301,13 +317,38 @@
   width: 100%;
   height: 100%;
   margin: 0;
+  appearance: none;
   cursor: pointer;
   border-width: 2px;
   border-radius: 8px;
   opacity: 0;
-  appearance: none;
 }
 
 *::slotted([slot=input]:not([aria-disabled=true])) {
   z-index: 1;
+}
+
+:host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva {
+  color: rgb(23, 42, 59) !important;
+  border-color: rgb(178, 194, 205);
+}
+:host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva:hover {
+  border-color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-filter-checked, :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-radio-checked {
+  background: rgb(253, 247, 242);
+  border-color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-filter-checked:hover, :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-radio-checked:hover {
+  background: rgb(251, 225, 209);
+}
+:host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-filter-popup-open {
+  background: rgb(253, 247, 242);
+  border-color: rgb(178, 194, 205);
+}
+:host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-input:hover {
+  border-color: rgb(178, 194, 205);
+}
+:host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-input.duet-chip-hover, :host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-input.duet-chip-selected {
+  border-color: rgb(230, 23, 64);
 }