@ewc-lib/ewc-icon-button-group 1.0.1-alpha

package/notes.txt

@@ -0,0 +1,90 @@
+width: 125px;
+height: 45px;
+/* UI Properties */
+background: #FFFFFF 0% 0% no-repeat padding-box;
+border: 1px solid #0D40B7;
+border-radius: 0px 200px 200px 0px;
+opacity: 1;
+
+
+<ewc-icon-button-group id="g">
+  <ewc-icon-button icon="linechart" label="Line chart"></ewc-icon-button>
+  <ewc-icon-button icon="barchart" label="Bar chart"></ewc-icon-button>
+  <ewc-icon-button icon="table" label="Table"></ewc-icon-button>
+</ewc-icon-button-group>
+
+<ewc-icon-button-group id="g" buttons="linechart,barchart,table"></ewc-icon-button-group>
+
+
+
+
+allow to pass an array with objects holding id, text and icon name per item (order to be preserved)
+should be possible to preselect one item
+callback event for clicked item
+it should be possible to change the selection programmatically
+needs to be "responsive"
+with smaller screens (or even based on available container width) it should remove the text and only keep the icon
+@JAURENA Marc (ESTAT-EXT): please check with Federico, if the pill should reduce the width of the pill based on the text (and reduce it if text is removed)
+needs to follow basic a11y requirements => The group should be one "tabbable" element and selection could be done via left-right, space => as with radio button groups
+
+
+
+semantic HTML or not?
+
+WCAG / APG says:
+
+"Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA."
+https://www.w3.org/WAI/ARIA/apg/patterns/radio/examples/radio-activedescendant/
+
+semantic would be:
+
+<form method="get">
+  <fieldset>
+
+but in our situation, it's not applicable - there is nothing to submit - hence form is inappropriate and fieldset makes only sense within form.
+
+
+<div role="radiogroup"
+     aria-labelledby="group_label_1"
+     id="rg1">
+  <h3 id="group_label_1">
+    Pizza Crust
+  </h3>
+  <div role="radio"
+       aria-checked="false"
+       tabindex="0">
+    Regular crust
+  </div>
+  <div role="radio"
+       aria-checked="false"
+       tabindex="-1">
+    Deep dish
+  </div>
+  <div role="radio"
+       aria-checked="false"
+       tabindex="-1">
+    Thin crust
+  </div>
+</div>
+<div role="radiogroup"
+     aria-labelledby="group_label_2"
+     id="rg2">
+  <h3 id="group_label_2">
+    Pizza Delivery
+  </h3>
+  <div role="radio"
+       aria-checked="false"
+       tabindex="0">
+    Pickup
+  </div>
+  <div role="radio"
+       aria-checked="false"
+       tabindex="-1">
+    Home Delivery
+  </div>
+  <div role="radio"
+       aria-checked="false"
+       tabindex="-1">
+    Dine in
+  </div>
+</div>

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@ewc-lib/ewc-icon-button-group",
+  "//": "please always keep version in sync with constructor in main.js", 
+  "version": "1.0.1-alpha",
+  "basedOnStandard": "3.0.1",
+  "description": "",
+  "main": "src/main.js",
+  "scripts": {
+  },
+  "author": "",
+  "license": "EUPL v.1.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@ewc-lib/ewc-css-common": "0.1.0",
+    "@ewc-lib/ewc-icon-button": "1.0.0-alpha"
+  }
+}

package/readme.md

@@ -0,0 +1,36 @@
+# Screenshot
+
+![Screenshot](./screenshot.png)
+
+# Description
+
+A group of icon-buttons, displayed in "pill-"design and behaving like radio-buttons - i.e. only one button can be in "pressed" state at any time.
+
+The ewc-icon-button-group HTML tag encloses ewc-icon-buttons. It modifies their style, handles events and implements the logic.
+
+Note that adding/removing children at runtime is not supported.
+
+Regarding focus, arrow keys work analoguous to tab key.
+
+Within a button-group, only buttons that are not currently pressed can be focussed.
+
+# API
+
+## Properties
+
+There are no properties.
+
+## Attributes
+
+- **selectedIndex** - the 0-based index of the currently pressed button.
+
+# Events
+
+- When a user attempts to press a button, a custom event named "action" is dispatched. 
+- The event detail contains the 0-based index of the button which was pressed.
+  - It's the component user's responsability to actually set it pressed. 
+  - This is for two reasons:
+    - the developer has a possibility to prevent the button from being pressed
+    - to be consistent with the usage of the ewc-icon-button
+
+Please see usage-examples/ directory which contains working source-code demonstrating how this works.

package/src/main.js

@@ -0,0 +1,182 @@
+/*
+button-group: min 1 and max 1 button can be in pressed down state.
+
+keyboard navigation:
+- a group can't get a focus
+- buttons in the group can get a focus
+- only not-pressed buttons can get a focus
+- left/up and right/down keys move the focus
+- enter and space key presses a button, releases the currently pressed button
+*/
+
+
+class ButtonGroup {
+  #pressedBtnElement = null
+  #pressedBtnElementIcon = null
+  #currentIndex
+
+  #storeCurrentBtn(el) {
+    if(el) {
+      this.#pressedBtnElement=el
+      this.#pressedBtnElementIcon=el.getAttribute("icon")
+    }
+  }
+
+  #restoreCurrent() {
+    if(this.#pressedBtnElement) {
+      this.#pressedBtnElement.setAttribute("icon", this.#pressedBtnElementIcon)
+    }
+  }
+
+  setPressed(allElements, selectedElIdx) {
+    this.#restoreCurrent()
+    for(let i=0;i<allElements.length;i++) {
+      const el = allElements[i]
+      if(i===selectedElIdx){
+        el.setAttribute("tabindex","-1")
+        el.setAttribute("state","true")
+        this.#storeCurrentBtn(el)
+        el.setAttribute("icon","check")
+      } else {
+        el.setAttribute("tabindex","0")
+        el.setAttribute("state","false")
+      }
+    }
+    this.#currentIndex = Number(selectedElIdx)
+  }
+
+  getCurrentIndex() {
+    return this.#currentIndex
+  }
+
+  getCurrentElement() {
+    return this.#pressedBtnElement
+  }
+}
+
+
+class Element extends HTMLElement {
+  // only affect ewc-icon-buttons which are children of this element
+  #cssClassPrefix = "css-scope-"+ (Math.random() + 1).toString(36).substring(2)
+  
+  #buttonGroup = new ButtonGroup()
+
+  getAttr(name, _default) {
+    const r = this.hasAttribute(name) ? this.getAttribute(name) : _default
+    return r
+  }
+
+  connectedCallback() {
+    this.setAttribute("ewc-version", "1.0.1-alpha")		// please always keep in sync with version in package.json
+  }
+
+  constructor() {	
+    super()
+
+    this.classList.add(this.#cssClassPrefix)
+
+    const s = getStyleTag(`
+      .${this.#cssClassPrefix} {
+        height: 40px;
+        display: flex;
+      }
+      .${this.#cssClassPrefix} ewc-icon-button::part(button) {
+        display:flex;
+        align-items:center;
+        border: solid 1px var(--c-p);
+        padding: 0 5px;
+        color: var(--icon-color);
+        margin-left: -1px;    /* thin 1px separation between the buttons */
+        max-width: 125px;
+        min-width: 125px;
+      }
+      .${this.#cssClassPrefix} ewc-icon-button:first-of-type::part(button) {
+        border-bottom-left-radius: 50px;
+        border-top-left-radius: 50px;
+      }
+      .${this.#cssClassPrefix} ewc-icon-button:last-of-type::part(button) {
+        border-bottom-right-radius: 50px;
+        border-top-right-radius: 50px;
+      }
+    `)
+
+    this.appendChild(s)
+    this.#installEventHandlers()
+  }
+
+  static observedAttributes = ["selectedindex"]
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name==="selectedindex") {
+      //console.log(Number(newValue),this.#buttonGroup.getCurrentIndex())
+      if(Number(newValue)!==this.#buttonGroup.getCurrentIndex()) {
+        this.#buttonGroup.setPressed(this.querySelectorAll("ewc-icon-button"), Number(newValue))
+      }
+    }
+  }
+
+  #installEventHandlers() {
+
+    const nodes = this.querySelectorAll("ewc-icon-button")
+
+    // relay click/enter presses
+    for(let i=0;i<nodes.length;i++) {
+      nodes[i].addEventListener("action", (ev) => {
+        ev.stopPropagation()
+        if(this.#buttonGroup.getCurrentIndex() !== i) {
+          const event = new CustomEvent("action", { detail: i});
+          this.dispatchEvent(event)
+        }
+      })
+      nodes[i].setAttribute("__index", i)
+    }
+
+    // move focus w/ tab. TODO: make the code elegant
+		this.addEventListener("keydown", function(ev) {
+      let idx = Number(document.activeElement.getAttribute("__index"))
+      const nodes = this.querySelectorAll("ewc-icon-button")
+
+			if(ev.key=="ArrowLeft" || ev.key=="ArrowUp") {
+        idx-=1
+        if(idx<0) {idx=nodes.length-1}
+        if(nodes[idx].getAttribute("tabindex")=="-1") {
+          idx-=1
+          if(idx<0) {idx=nodes.length-1}
+        }
+        nodes[idx].focus()
+      }
+      if(ev.key=="ArrowRight" || ev.key=="ArrowDown") {
+        idx+=1
+        if(idx>nodes.length-1) {idx=0}
+        if(nodes[idx].getAttribute("tabindex")=="-1") {
+          idx+=1
+          if(idx>nodes.length-1) {idx=0}
+        }
+        nodes[idx].focus()
+      }
+    }.bind(this))
+	}
+
+  getCurrentlySelectedIndex() {
+    return this.#buttonGroup.getCurrentIndex()
+  }
+
+  getCurrentlySelectedElement() {
+    return this.#buttonGroup.getCurrentElement()
+  }
+}
+
+
+// helper
+function getStyleTag(source) {
+  const t = document.createElement('style')
+  t.innerHTML = source
+  return t
+}
+
+
+if (window.customElements.get("ewc-icon-button-group")) {
+  console.warn("ewc-icon-button-group: custom element is already defined")
+} else {
+  window.customElements.define("ewc-icon-button-group", Element);
+}

package/usage-example/vanilla/custom-props.css

@@ -0,0 +1,233 @@
+/*!
+Based on @ewc/preset-eu - 4.8.1 Built on 2024-10-17T09:38:44.856Z.
+Note: all CSS Custom Properties defined on :root are available within shadow DOM. 
+*/
+
+@charset "UTF-8";
+
+:root{
+  --ewc-color-primary: #0e47cb;
+  --ewc-color-primary-180: #082b7a;
+  --ewc-color-primary-160: #0a328e;
+  --ewc-color-primary-140: #0b39a2;
+  --ewc-color-primary-120: #0d40b7;
+  --ewc-color-primary-100: #0e47cb;
+  --ewc-color-primary-80: #3e6cd5;
+  --ewc-color-primary-60: #6e91e0;
+  --ewc-color-primary-40: #9fb5ea;
+  --ewc-color-primary-20: #cfdaf5;
+  --ewc-color-primary-10: #e7edfa;
+  --ewc-color-primary-5: #f3f6fc;
+  --ewc-color-secondary: #fc0;
+  --ewc-color-secondary-180: #997a00;
+  --ewc-color-secondary-160: #b38f00;
+  --ewc-color-secondary-140: #cca300;
+  --ewc-color-secondary-120: #e6b800;
+  --ewc-color-secondary-100: #fc0;
+  --ewc-color-secondary-80: #ffd633;
+  --ewc-color-secondary-60: #ffe066;
+  --ewc-color-secondary-40: #ffeb99;
+  --ewc-color-secondary-20: #fff5cc;
+  --ewc-color-dark: #262b38;
+  --ewc-color-dark-100: #262b38;
+  --ewc-color-dark-80: #515560;
+  --ewc-color-dark-60: #7d8088;
+  --ewc-color-dark-40: #a8aaaf;
+  --ewc-color-dark-20: #d4d5d7;
+  --ewc-color-dark-10: #e9eaeb;
+  --ewc-color-dark-5: #f4f5f5;
+  --ewc-color-info: #0e47cb;
+  --ewc-color-info-100: #0e47cb;
+  --ewc-color-info-5: #f3f6fc;
+  --ewc-color-success: #00a174;
+  --ewc-color-success-100: #00a174;
+  --ewc-color-success-5: #f2fcf9;
+  --ewc-color-warning: #ff8133;
+  --ewc-color-warning-100: #ff8133;
+  --ewc-color-warning-5: #fff7f2;
+  --ewc-color-error: #d7003d;
+  --ewc-color-error-100: #d7003d;
+  --ewc-color-error-5: #fef2f5;
+  --ewc-color-accent: #00e9ff;
+  --ewc-color-accent-100: #00e9ff;
+  --ewc-color-accent-30: #b3f8ff;
+  --ewc-color-overlay-light: color-mix(in srgb, var(--c-d) 70%, transparent);
+  --ewc-color-overlay-dark: color-mix(in srgb, var(--c-d) 90%, transparent);
+  --ewc-font-family-default: arial, sans-serif;
+  --ewc-font-family-print-default: verdana, sans-serif;
+  --ewc-font-family-print-alt: arial, sans-serif;
+  --ewc-font-xs: normal normal 400 0.75rem/1.125rem arial, sans-serif;
+  --ewc-font-s: normal normal 400 0.875rem/1.125rem arial, sans-serif;
+  --ewc-font-m: normal normal 400 1rem/1.5rem arial, sans-serif;
+  --ewc-font-l: normal normal 400 1.25rem/1.75rem arial, sans-serif;
+  --ewc-font-xl: normal normal 400 1.5rem/1.75rem arial, sans-serif;
+  --ewc-font-2xl: normal normal 400 1.75rem/2rem arial, sans-serif;
+  --ewc-font-3xl: normal normal 400 2rem/2.5rem arial, sans-serif;
+  --ewc-font-4xl: normal normal 400 2.25rem/2.75rem arial, sans-serif;
+  --ewc-font-5xl: normal normal 400 2.625rem/3.25rem arial, sans-serif;
+  --ewc-font-ui-s: normal normal 400 0.875rem/1.5rem arial, sans-serif;
+  --ewc-font-ui-m: normal normal 400 1rem/1.75rem arial, sans-serif;
+  --ewc-spacing-2xs: 0.25rem;
+  --ewc-spacing-xs: 0.5rem;
+  --ewc-spacing-s: 0.75rem;
+  --ewc-spacing-m: 1rem;
+  --ewc-spacing-l: 1.5rem;
+  --ewc-spacing-xl: 2rem;
+  --ewc-spacing-2xl: 2.5rem;
+  --ewc-spacing-3xl: 3rem;
+  --ewc-spacing-4xl: 4rem;
+  --ewc-shadow-1: 0 2px 4px rgba(9, 49, 142, 0.08),
+    0 0 10px rgba(9, 49, 142, 0.04), 0 4px 5px rgba(9, 49, 142, 0.04),
+    0 -4px 4px rgba(9, 49, 142, 0.04);
+  --ewc-shadow-2: 0 3px 5px rgba(9, 49, 142, 0.04),
+    0 0 18px rgba(9, 49, 142, 0.04), 0 6px 10px rgba(9, 49, 142, 0.04),
+    0 -4px 4px rgba(9, 49, 142, 0.04);
+  --ewc-shadow-3: 0 7px 8px rgba(9, 49, 142, 0.08),
+    0 0 22px rgba(9, 49, 142, 0.04), 0 12px 17px rgba(9, 49, 142, 0.04),
+    0 -4px 4px rgba(9, 49, 142, 0.04);
+  --ewc-shadow-4: 0 11px 15px rgba(9, 49, 142, 0.08),
+    0 9px 46px rgba(9, 49, 142, 0.04), 0 24px 38px rgba(9, 49, 142, 0.04),
+    0 -4px 4px rgba(9, 49, 142, 0.04);
+  --ewc-shadow-inner-1: 0 2px 4px rgba(9, 49, 142, 0.08) inset,
+    0 0 10px rgba(9, 49, 142, 0.04) inset,
+    0 4px 5px rgba(9, 49, 142, 0.04) inset,
+    0 -4px 4px rgba(9, 49, 142, 0.04) inset;
+  --ewc-shadow-inner-2: 0 3px 5px rgba(9, 49, 142, 0.04) inset,
+    0 0 18px rgba(9, 49, 142, 0.04) inset,
+    0 6px 10px rgba(9, 49, 142, 0.04) inset,
+    0 -4px 4px rgba(9, 49, 142, 0.04) inset;
+  --ewc-shadow-negative-1: 0 2px 4px hsla(0, 0%, 100%, 0.08),
+    0 0 10px hsla(0, 0%, 100%, 0.04), 0 4px 5px hsla(0, 0%, 100%, 0.04),
+    0 -4px 4px hsla(0, 0%, 100%, 0.04);
+  --ewc-shadow-negative-2: 0 3px 5px hsla(0, 0%, 100%, 0.04),
+    0 0 18px hsla(0, 0%, 100%, 0.04), 0 6px 10px hsla(0, 0%, 100%, 0.04),
+    0 -4px 4px hsla(0, 0%, 100%, 0.04);
+  --ewc-shadow-negative-3: 0 7px 8px hsla(0, 0%, 100%, 0.08),
+    0 0 22px hsla(0, 0%, 100%, 0.04), 0 12px 17px hsla(0, 0%, 100%, 0.04),
+    0 -4px 4px hsla(0, 0%, 100%, 0.04);
+  --ewc-shadow-negative-4: 0 11px 15px rgba(9, 49, 142, 0.08),
+    0 9px 46px rgba(9, 49, 142, 0.04), 0 24px 38px rgba(9, 49, 142, 0.04),
+    0 -4px 4px rgba(9, 49, 142, 0.04);
+  --ewc-shadow-negative-inner-1: 0 2px 4px hsla(0, 0%, 100%, 0.08) inset,
+    0 0 10px hsla(0, 0%, 100%, 0.04) inset,
+    0 4px 5px hsla(0, 0%, 100%, 0.04) inset,
+    0 -4px 4px hsla(0, 0%, 100%, 0.04) inset;
+  --ewc-shadow-negative-inner-2: 0 3px 5px hsla(0, 0%, 100%, 0.04) inset,
+    0 0 18px hsla(0, 0%, 100%, 0.04) inset,
+    0 6px 10px hsla(0, 0%, 100%, 0.04) inset,
+    0 -4px 4px hsla(0, 0%, 100%, 0.04) inset;
+  --ewc-max-width: 80ch;
+  --c-p: var(--ewc-color-primary);
+  --c-p-180: var(--ewc-color-primary-180);
+  --c-p-160: var(--ewc-color-primary-160);
+  --c-p-140: var(--ewc-color-primary-140);
+  --c-p-120: var(--ewc-color-primary-120);
+  --c-p-100: var(--ewc-color-primary-100);
+  --c-p-80: var(--ewc-color-primary-80);
+  --c-p-60: var(--ewc-color-primary-60);
+  --c-p-40: var(--ewc-color-primary-40);
+  --c-p-20: var(--ewc-color-primary-20);
+  --c-p-10: var(--ewc-color-primary-10);
+  --c-p-5: var(--ewc-color-primary-5);
+  --c-s: var(--ewc-color-secondary);
+  --c-s-180: var(--ewc-color-secondary-180);
+  --c-s-160: var(--ewc-color-secondary-160);
+  --c-s-140: var(--ewc-color-secondary-140);
+  --c-s-120: var(--ewc-color-secondary-120);
+  --c-s-100: var(--ewc-color-secondary-100);
+  --c-s-80: var(--ewc-color-secondary-80);
+  --c-s-60: var(--ewc-color-secondary-60);
+  --c-s-40: var(--ewc-color-secondary-40);
+  --c-s-20: var(--ewc-color-secondary-20);
+  --c-d: var(--ewc-color-dark);
+  --c-d-100: var(--ewc-color-dark-100);
+  --c-d-80: var(--ewc-color-dark-80);
+  --c-d-60: var(--ewc-color-dark-60);
+  --c-d-40: var(--ewc-color-dark-40);
+  --c-d-20: var(--ewc-color-dark-20);
+  --c-d-10: var(--ewc-color-dark-10);
+  --c-d-5: var(--ewc-color-dark-5);
+  --c-in: var(--ewc-color-info);
+  --c-in-100: var(--ewc-color-info-100);
+  --c-in-5: var(--ewc-color-info-5);
+  --c-su: var(--ewc-color-success);
+  --c-su-100: var(--ewc-color-success-100);
+  --c-su-5: var(--ewc-color-success-5);
+  --c-wa: var(--ewc-color-warning);
+  --c-wa-100: var(--ewc-color-warning-100);
+  --c-wa-5: var(--ewc-color-warning-5);
+  --c-er: var(--ewc-color-error);
+  --c-er-100: var(--ewc-color-error-100);
+  --c-er-5: var(--ewc-color-error-5);
+  --c-a: var(--ewc-color-accent);
+  --c-a-100: var(--ewc-color-accent-100);
+  --c-a-30: var(--ewc-color-accent-30);
+  --c-ov-l: var(--ewc-color-overlay-light);
+  --c-ov-d: var(--ewc-color-overlay-dark);
+  --ff-d: var(--ewc-font-family-default);
+  --f-xs: var(--ewc-font-xs);
+  --f-s: var(--ewc-font-s);
+  --f-m: var(--ewc-font-m);
+  --f-l: var(--ewc-font-l);
+  --f-xl: var(--ewc-font-xl);
+  --f-2xl: var(--ewc-font-2xl);
+  --f-3xl: var(--ewc-font-3xl);
+  --f-4xl: var(--ewc-font-4xl);
+  --f-5xl: var(--ewc-font-5xl);
+  --f-ui-s: var(--ewc-font-ui-s);
+  --f-ui-m: var(--ewc-font-ui-m);
+  --s-2xs: var(--ewc-spacing-2xs);
+  --s-xs: var(--ewc-spacing-xs);
+  --s-s: var(--ewc-spacing-s);
+  --s-m: var(--ewc-spacing-m);
+  --s-l: var(--ewc-spacing-l);
+  --s-xl: var(--ewc-spacing-xl);
+  --s-2xl: var(--ewc-spacing-2xl);
+  --s-3xl: var(--ewc-spacing-3xl);
+  --s-4xl: var(--ewc-spacing-4xl);
+  --sh-1: var(--ewc-shadow-1);
+  --sh-2: var(--ewc-shadow-2);
+  --sh-3: var(--ewc-shadow-3);
+  --sh-4: var(--ewc-shadow-4);
+  --sh-i-1: var(--ewc-shadow-inner-1);
+  --sh-i-2: var(--ewc-shadow-inner-2);
+  --sh-n-1: var(--ewc-shadow-negative-1);
+  --sh-n-2: var(--ewc-shadow-negative-2);
+  --sh-n-3: var(--ewc-shadow-negative-3);
+  --sh-n-4: var(--ewc-shadow-negative-4);
+  --sh-n-i-1: var(--ewc-shadow-negative-inner-1);
+  --sh-n-i-2: var(--ewc-shadow-negative-inner-2);
+  --max-w: var(--ewc-max-width);
+  --ewc-color-primary-130: #0a328e;
+  --c-p-130: var(--ewc-color-primary-130);
+  --ewc-color-secondary-10: #fffae6;
+  --c-s-10: var(--ewc-color-secondary-10);
+  --ewc-color-dark-140: #171a22;
+  --c-d-140: var(--ewc-color-dark-140);
+  --ewc-color-dark-120: #1e222d;
+  --c-d-120: var(--ewc-color-dark-120);
+  --ewc-color-error-80: #ef0044;
+  --c-er-80: var(--ewc-color-error-80);
+  --ewc-color-branding: #0e47cb;
+  --c-br: var(--ewc-color-branding);
+  --ewc-color-visited: #510dcd;
+  --c-v: var(--ewc-color-visited);
+  --ewc-color-visited-100: #510dcd;
+  --c-v-100: var(--ewc-color-visited-100);
+  --ewc-color-visited-40: #bf9af1;
+  --c-v-40: var(--ewc-color-visited-40);
+  --ewc-font-2xs: normal normal 400 0.625rem/1rem arial, sans-serif;
+  --f-2xs: var(--ewc-font-2xs);
+  --ewc-font-6xl: normal normal 400 2.625rem/3.25rem arial, sans-serif;
+  --f-6xl: var(--ewc-font-6xl);
+  --ewc-font-prolonged-xs: normal normal 400 0.75rem/1.25rem arial, sans-serif;
+  --f-p-xs: var(--ewc-font-prolonged-xs);
+  --ewc-font-prolonged-s: normal normal 400 0.875rem/1.25rem arial, sans-serif;
+  --f-p-s: var(--ewc-font-prolonged-s);
+  --ewc-font-prolonged-m: normal normal 400 1rem/1.5rem arial, sans-serif;
+  --f-p-m: var(--ewc-font-prolonged-m);
+  --ewc-font-prolonged-l: normal normal 400 1.25rem/1.75rem arial, sans-serif;
+  --f-p-l: var(--ewc-font-prolonged-l);
+  --ewc-font-prolonged-xl: normal normal 400 1.5rem/1.75rem arial, sans-serif;
+  --f-p-xl: var(--ewc-font-prolonged-xl);
+}

package/usage-example/vanilla/index.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <meta charset="utf-8">
+    <style>
+      body{
+          font-family: 'Arial', sans-serif;
+          margin:0;
+          padding:100px;
+        }
+        #container {
+          width: 650px; 
+          justify-self: center;        
+          margin-top: 100px;
+          outline:2px solid darkblue; 
+          outline-offset: 5px;
+        }
+        </style>
+  	<link rel="stylesheet" href="./custom-props.css">
+  </head>
+
+  <body>
+    <script src="./ewc-icon-button/src/main.js" type="module"></script>
+    <script src="./ewc-icon-button-group/src/main.js" type="module"></script>
+
+    <div id="container">
+      <p style="margin-bottom: 50px;">Buttons available, on light and dark background</p>
+
+      <div style="margin:20px; padding:20px;">
+        <ewc-icon-button-group style="width:600px;" selectedIndex="0" id="one">
+          <ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart"></ewc-icon-button>
+          <ewc-icon-button icon="barchart"  use-config="grp-barchart" label="Bar chart"></ewc-icon-button>
+          <ewc-icon-button icon="dotplot"   use-config="grp-dotplot" label="Dot plot"></ewc-icon-button>
+          <ewc-icon-button icon="table"     use-config="grp-table"   label="Table"></ewc-icon-button>
+        </ewc-icon-button-group>
+      </div>
+
+      <div style="margin:20px; padding:20px; background: darkblue;">
+        <ewc-icon-button-group style="width:600px;" selectedIndex="3" id="two">
+          <ewc-icon-button state="disabled" icon="linechart" background="dark" use-config="grp-linechart" label="Line chart"></ewc-icon-button>
+          <ewc-icon-button icon="barchart"  background="dark" use-config="grp-barchart" label="Bar chart"></ewc-icon-button>
+          <ewc-icon-button icon="dotplot"   background="dark" use-config="grp-dotplot" label="Dot plot"></ewc-icon-button>
+          <ewc-icon-button icon="table"     background="dark" use-config="grp-table"   label="Table"></ewc-icon-button>
+        </ewc-icon-button-group>
+      </div>
+    </div>
+
+    <script>
+      window.addEventListener('DOMContentLoaded',function () {
+        // catch events of all buttons at once
+        document.getElementById("one").addEventListener("action",(e)=>{
+          document.getElementById("one").setAttribute("selectedIndex",e.detail)
+          const el = document.getElementById("one").getCurrentlySelectedElement()
+          console.log("button clicked or selected w/ kdb: ", e.detail, el)
+        })
+      })
+
+      window.addEventListener('DOMContentLoaded',function () {
+        // catch events of all buttons at once
+        document.getElementById("two").addEventListener("action",(e)=>{
+          document.getElementById("two").setAttribute("selectedIndex",e.detail)
+          const el = document.getElementById("two").getCurrentlySelectedElement()
+          console.log("button clicked or selected w/ kdb: ", e.detail, el)
+        })
+      })
+    </script>
+    
+  </body>
+
+</html>

package/usage-example/vanilla/readme.md

@@ -0,0 +1 @@
+Serve this directory - e.g. with "python3 -m http.server 8080". Note that a filesystem supporting links is assumed.