@getflip/swirl-components 0.87.5 → 0.88.1

package/dist/collection/components/swirl-button/swirl-button.css

@@ -90,6 +90,14 @@
       color: var(--s-icon-critical);
     }
 
+.button--variant-ghost.button--pressed {
+    color: var(--s-text-highlight);
+  }
+
+.button--variant-ghost.button--pressed .button__icon {
+      color: var(--s-icon-highlight);
+    }
+
 .button--variant-ghost.button--size-l {
     padding: var(--s-space-12) var(--s-space-20);
   }
@@ -156,6 +164,16 @@
       color: var(--s-icon-critical);
     }
 
+.button--variant-outline.button--pressed {
+    box-shadow: inset 0 0 0 var(--s-border-width-default)
+      var(--s-border-highlight);
+    color: var(--s-text-highlight);
+  }
+
+.button--variant-outline.button--pressed .button__icon {
+      color: var(--s-icon-highlight);
+    }
+
 .button--variant-outline.button--size-l {
     padding: var(--s-space-12) var(--s-space-20);
   }
@@ -165,7 +183,7 @@
     }
 
 .button--variant-outline .button__icon {
-    color: var(--s-icon-default);
+    color: var(--s-icon-strong);
   }
 
 .button--variant-plain {

package/dist/collection/components/swirl-button/swirl-button.js

@@ -23,6 +23,7 @@ export class SwirlButton {
     this.label = undefined;
     this.name = undefined;
     this.pill = undefined;
+    this.pressed = undefined;
     this.size = "m";
     this.target = undefined;
     this.type = "button";
@@ -36,8 +37,6 @@ export class SwirlButton {
   }
   componentDidRender() {
     this.forceIconProps(this.desktopMediaQuery.matches);
-  }
-  watchFormProp() {
     this.updateFormAttribute();
   }
   disconnectedCallback() {
@@ -78,9 +77,10 @@ export class SwirlButton {
     const className = classnames("button", `button--icon-position-${this.iconPosition}`, `button--intent-${this.intent}`, `button--size-${this.size}`, `button--variant-${this.variant}`, {
       "button--icon-only": hideLabel,
       "button--pill": this.pill,
+      "button--pressed": this.pressed,
     });
     const Tag = isLink ? "a" : "button";
-    return (h(Host, { style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value }, this.icon && (h("span", { class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !hideLabel && h("span", { class: "button__label" }, this.label))));
+    return (h(Host, { style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value }, this.icon && (h("span", { class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !hideLabel && h("span", { class: "button__label" }, this.label))));
   }
   static get is() { return "swirl-button"; }
   static get encapsulation() { return "scoped"; }
@@ -380,6 +380,23 @@ export class SwirlButton {
         "attribute": "pill",
         "reflect": false
       },
+      "pressed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "pressed",
+        "reflect": false
+      },
       "size": {
         "type": "string",
         "mutable": false,
@@ -486,10 +503,4 @@ export class SwirlButton {
     };
   }
   static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "form",
-        "methodName": "watchFormProp"
-      }];
-  }
 }

package/dist/collection/components/swirl-description-list/swirl-description-list.js

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SwirlDescriptionList {
   render() {
-    return (h(Host, null, h("dl", { class: "description-list" }, h("slot", null))));
+    return (h(Host, null, h("div", { class: "description-list", role: "list" }, h("slot", null))));
   }
   static get is() { return "swirl-description-list"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-description-list/swirl-description-list.spec.js

@@ -16,9 +16,9 @@ describe("swirl-description-list", () => {
     expect(page.root).toEqualHtml(`
       <swirl-description-list>
         <mock:shadow-root>
-          <dl class="description-list">
+          <div class="description-list" role="list">
             <slot></slot>
-          </dl>
+          </div>
         </mock:shadow-root>
         <swirl-description-list-item term="Term #1">
           A short description

package/dist/collection/components/swirl-description-list-item/swirl-description-list-item.js

@@ -11,7 +11,7 @@ export class SwirlDescriptionListItem {
   }
   render() {
     const className = classNames("description-list-item", `description-list-item--orientation-${this.orientation}`, { "description-list-item--bordered": this.bordered });
-    return (h(Host, null, h("div", { class: className, part: "description-list-item" }, h("dt", { class: "description-list-item__term", part: "description-list-item__term" }, this.term), h("dd", { class: "description-list-item__description" }, h("slot", null)))));
+    return (h(Host, { role: "listitem" }, h("div", { class: className, part: "description-list-item", role: "group" }, h("div", { class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term), h("div", { class: "description-list-item__description", role: "definition" }, h("slot", null)))));
   }
   static get is() { return "swirl-description-list-item"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-description-list-item/swirl-description-list-item.spec.js

@@ -7,13 +7,13 @@ describe("swirl-description-list-item", () => {
       html: `<swirl-description-list-item term="Term">Description</swirl-description-list-item>`,
     });
     expect(page.root).toEqualHtml(`
-      <swirl-description-list-item term="Term">
+      <swirl-description-list-item role="listitem" term="Term">
         <mock:shadow-root>
-          <div class="description-list-item description-list-item--bordered description-list-item--orientation-horizontal" part="description-list-item">
-            <dt class="description-list-item__term" part="description-list-item__term">Term</dt>
-            <dd class="description-list-item__description">
+          <div class="description-list-item description-list-item--bordered description-list-item--orientation-horizontal" part="description-list-item" role="group">
+            <div class="description-list-item__term" part="description-list-item__term" role="term">Term</div>
+            <div class="description-list-item__description" role="definition">
               <slot></slot>
-            </dd>
+            </div>
           </div>
         </mock:shadow-root>
         Description

package/dist/collection/components/swirl-form-control/swirl-form-control.css

@@ -130,6 +130,10 @@
       box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-critical);
     }
 
+.form-control--invalid .form-control__prefix {
+    border-color: var(--s-border-critical);
+  }
+
 .form-control--invalid .form-control__label {
     border-color: var(--s-border-critical);
   }
@@ -181,6 +185,46 @@
     clip: rect(0, 0, 0, 0);
   }
 
+.form-control--has-prefix.form-control--label-position-outside .form-control__label {
+      position: static;
+    }
+
+.form-control--has-prefix.form-control--has-focus:not(.form-control--disabled).form-control--invalid .form-control__label {
+        border-left-color: transparent;
+        box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-critical);
+      }
+
+.form-control--has-prefix.form-control--has-focus:not(.form-control--disabled).form-control--invalid .form-control__prefix {
+        border-color: var(--s-border-critical);
+        box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-critical);
+      }
+
+.form-control--has-prefix.form-control--has-focus:not(.form-control--disabled) .form-control__label {
+      border-left-color: transparent;
+      box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-highlight);
+    }
+
+.form-control--has-prefix.form-control--has-focus:not(.form-control--disabled) .form-control__prefix {
+      border-color: var(--s-border-highlight);
+      border-right-color: transparent;
+      box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-highlight);
+    }
+
+.form-control--has-prefix .form-control__label {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+.form-control--has-prefix .form-control__prefix {
+    display: flex;
+  }
+
+.form-control__controls {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+}
+
 .form-control__label {
   position: relative;
   display: flex;
@@ -208,6 +252,53 @@
   transform: none;
 }
 
+.form-control__prefix {
+  z-index: 1;
+  display: none;
+  padding-right: var(--s-space-16);
+  padding-left: var(--s-space-16);
+  justify-content: center;
+  align-items: center;
+  border-top: var(--s-border-width-default) solid var(--s-border-strong);
+  border-bottom: var(--s-border-width-default) solid var(--s-border-strong);
+  border-left: var(--s-border-width-default) solid var(--s-border-strong);
+  border-top-left-radius: var(--s-border-radius-sm);
+  border-bottom-left-radius: var(--s-border-radius-sm);
+  background-color: var(--s-surface-raised-default);
+}
+
+.form-control__prefix::slotted(select) {
+    height: 100%;
+    margin-right: calc(-1 * var(--s-space-16));
+    margin-left: calc(-1 * var(--s-space-16));
+    padding-right: calc(var(--s-space-16) + 1.25rem);
+    padding-left: var(--s-space-16);
+    border: none;
+    color: var(--s-text-default);
+    background: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 12.4579C9.88889 12.4579 9.78472 12.4404 9.6875 12.4054C9.59027 12.3709 9.5 12.312 9.41666 12.2287L5.5625 8.37453C5.40972 8.22175 5.33694 8.03064 5.34416 7.8012C5.35083 7.57231 5.43055 7.38148 5.58333 7.2287C5.73611 7.07592 5.93055 6.99953 6.16666 6.99953C6.40277 6.99953 6.59722 7.07592 6.75 7.2287L10 10.4787L13.2708 7.20787C13.4236 7.05509 13.6147 6.98203 13.8442 6.9887C14.0731 6.99592 14.2639 7.07592 14.4167 7.2287C14.5694 7.38148 14.6458 7.57592 14.6458 7.81203C14.6458 8.04814 14.5694 8.24259 14.4167 8.39537L10.5833 12.2287C10.5 12.312 10.4097 12.3709 10.3125 12.4054C10.2153 12.4404 10.1111 12.4579 10 12.4579Z" fill="%236E6E6E"/></svg>');
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: right var(--s-space-8) center;
+    font: inherit;
+    line-height: var(--s-line-height-base);
+    cursor: pointer;
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+  }
+
+.form-control__prefix::slotted(select):focus {
+      outline: none;
+    }
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.form-control__prefix::slotted(select) {
+      font-size: var(--s-font-size-sm);
+      line-height: var(--s-line-height-sm)
+  }
+    }
+
 .form-control__description {
   display: block;
   margin-top: var(--s-space-4);

package/dist/collection/components/swirl-form-control/swirl-form-control.js

@@ -3,6 +3,7 @@ import classnames from "classnames";
 import { getActiveElement } from "../../utils";
 /**
  * @slot slot - The input element, e.g. `<swirl-text-input></swirl-text-input>`
+ * @slot prefix - The prefix element, e.g. `<select slot="prefix">…</select>` or `<swirl-icon-poll></swirl-icon-poll>`
  */
 export class SwirlFormControl {
   constructor() {
@@ -108,6 +109,7 @@ export class SwirlFormControl {
   render() {
     const showErrorMessage = Boolean(this.errorMessage);
     const showDescription = Boolean(this.description) && !showErrorMessage;
+    const hasPrefix = Boolean(this.el.querySelector('[slot="prefix"]'));
     const hasValue = Array.isArray(this.inputValue)
       ? this.inputValue.length > 0
       : Boolean(this.inputValue);
@@ -119,13 +121,14 @@ export class SwirlFormControl {
       "form-control--has-character-counter": hasCharacterCounter,
       "form-control--has-focus": this.hasFocus,
       "form-control--has-placeholder": hasPlaceholder,
+      "form-control--has-prefix": hasPrefix,
       "form-control--has-value": hasValue,
       "form-control--hide-label": this.hideLabel,
       "form-control--inline": this.inline,
       "form-control--invalid": this.invalid,
       "form-control--is-select": isSelect,
     });
-    return (h(Host, { onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { class: className, role: "group" }, h("label", { class: "form-control__label" }, h("span", { class: "form-control__label-text" }, this.label), h("span", { class: "form-control__input" }, h("slot", null))), showDescription && (h("span", { class: "form-control__description", id: this.descriptionId }, this.description)), showErrorMessage && (h("span", { "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { message: this.errorMessage, size: "s" }))))));
+    return (h(Host, { onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { class: className, role: "group" }, h("span", { class: "form-control__controls" }, h("span", { class: "form-control__prefix" }, h("slot", { name: "prefix" })), h("label", { class: "form-control__label" }, h("span", { class: "form-control__label-text" }, this.label), h("span", { class: "form-control__input" }, h("slot", null)))), showDescription && (h("span", { class: "form-control__description", id: this.descriptionId }, this.description)), showErrorMessage && (h("span", { "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { message: this.errorMessage, size: "s" }))))));
   }
   static get is() { return "swirl-form-control"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-form-control/swirl-form-control.spec.js

@@ -13,14 +13,17 @@ describe("swirl-form-control", () => {
     expect(page.root).toEqualHtml(`
       <swirl-form-control label="Label">
         <div class="form-control form-control--label-position-inside" role="group">
-          <label class="form-control__label">
-            <span class="form-control__label-text">
-              Label
-            </span>
-            <span class="form-control__input">
-              <swirl-text-input label="Label"></swirl-text-input>
-            </span>
-          </label>
+          <span class="form-control__controls">
+            <span class="form-control__prefix"></span>
+            <label class="form-control__label">
+              <span class="form-control__label-text">
+                Label
+              </span>
+              <span class="form-control__input">
+                <swirl-text-input label="Label"></swirl-text-input>
+              </span>
+            </label>
+          </span>
         </div>
       </swirl-form-control>
     `);

package/dist/collection/components/swirl-form-control/swirl-form-control.stories.js

@@ -16,6 +16,12 @@ const Template = (args) => {
   const textInput = generateStoryElement("swirl-form-control", args);
   textInput.innerHTML = `
     <swirl-text-input clearable="true" type="text"></swirl-text-input>
+    <select slot="prefix">
+      <option>CH</option>
+      <option selected>DE</option>
+      <option>EN</option>
+      <option>FR</option>
+    </select>
   `;
   const numberInput = generateStoryElement("swirl-form-control", {
     ...args,

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js

@@ -1,6 +1,7 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import { getDesktopMediaQuery } from "../../utils";
+import { v4 as uuid } from "uuid";
 /**
  * @slot control - Used to add a menu button to the item
  * @slot badges - Badges displayed inside the item
@@ -9,6 +10,7 @@ import { getDesktopMediaQuery } from "../../utils";
 export class SwirlResourceListItem {
   constructor() {
     this.desktopMediaQuery = getDesktopMediaQuery();
+    this.id = uuid();
     this.desktopMediaQueryHandler = (event) => {
       this.forceIconProps(event.matches);
       this.updateIconSize(event.matches);
@@ -107,7 +109,7 @@ export class SwirlResourceListItem {
       "resource-list-item--selectable": this.selectable,
       "resource-list-item--show-control-on-focus": showControlOnFocus,
     });
-    return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": "label", class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, part: "resource-list-item__content", role: role, tabIndex: 0 }, this.hasMedia && (h("span", { class: "resource-list-item__media" }, h("slot", { name: "media" }))), h("span", { class: "resource-list-item__label-container" }, h("span", { class: "resource-list-item__label", id: "label", innerHTML: this.label }), this.description && (h("span", { class: "resource-list-item__description" }, this.description))), showMeta && (h("span", { class: "resource-list-item__meta" }, h("span", { class: "resource-list-item__meta-text" }, this.meta), h("span", { class: "resource-list-item__badges" }, h("slot", { name: "badges" }))))), this.selectable && (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null))))), h("span", { class: "resource-list-item__control" }, h("slot", { name: "control" })), showMenu && (h("swirl-popover-trigger", { popover: this.menuTriggerId }, h("swirl-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { size: this.iconSize })))));
+    return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": this.id, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, part: "resource-list-item__content", role: role, tabIndex: 0 }, this.hasMedia && (h("span", { class: "resource-list-item__media" }, h("slot", { name: "media" }))), h("span", { class: "resource-list-item__label-container" }, h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.label }), this.description && (h("span", { class: "resource-list-item__description" }, this.description))), showMeta && (h("span", { class: "resource-list-item__meta" }, h("span", { class: "resource-list-item__meta-text" }, this.meta), h("span", { class: "resource-list-item__badges" }, h("slot", { name: "badges" }))))), this.selectable && (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null))))), h("span", { class: "resource-list-item__control" }, h("slot", { name: "control" })), showMenu && (h("swirl-popover-trigger", { popover: this.menuTriggerId }, h("swirl-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { size: this.iconSize })))));
   }
   static get is() { return "swirl-resource-list-item"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.spec.js

@@ -13,15 +13,16 @@ describe("swirl-resource-list-item", () => {
         </swirl-resource-list-item>
       `,
     });
+    const id = page.root.querySelector("[id]").id;
     expect(page.root).toEqualHtml(`
       <swirl-resource-list-item description="Description" label="Label" role="row">
         <div class="resource-list-item resource-list-item--interactive resource-list-item--label-weight-medium" role="gridcell">
-          <button aria-labelledby="label" class="resource-list-item__content" part="resource-list-item__content"  tabindex="0">
+          <button aria-labelledby="${id}" class="resource-list-item__content" part="resource-list-item__content"  tabindex="0">
             <span class="resource-list-item__media">
               <swirl-avatar label="John Doe" src="https://picsum.photos/id/433/144/144" slot="media"></swirl-avatar>
             </span>
             <span class="resource-list-item__label-container">
-              <span class="resource-list-item__label" id="label">
+              <span class="resource-list-item__label" id="${id}">
                 Label
               </span>
               <span class="resource-list-item__description">