@statistikzh/leu 0.12.2 → 0.13.1

package/src/components/button/button.css

@@ -128,6 +128,7 @@ button.ghost {
   padding: 0 0.5rem;
   color: var(--leu-color-black-60);
   font-family: var(--leu-font-family-regular);
+  height: 2rem;
 }
 
 button.ghost:hover {
@@ -206,49 +207,82 @@ button.ghost.inverted:disabled {
   display: block;
 }
 
-.ghost.icon-before .icon-wrapper--before,
-.ghost.icon-after .icon-wrapper--after {
+.icon-wrapper {
+  display: none;
+}
+
+.icon-before .icon-wrapper--before,
+.icon-after .icon-wrapper--after {
   display: block;
-  padding: 0.5rem;
+}
+
+.ghost .icon-wrapper {
+  position: relative;
+  width: 2rem;
+  padding: 0 0.5rem;
+  --_bg: var(--leu-color-black-transp-10);
+  --_color: currentcolor;
+}
+
+.ghost .icon-wrapper__slot {
+  display: block;
+  position: relative;
+  z-index: 1;
+  color: var(--_color);
+}
+
+.ghost .icon-wrapper::before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  left: 0;
+  top: -0.5rem;
+
+  width: 2rem;
+  aspect-ratio: 1;
   border-radius: 50%;
-  background: var(--leu-color-black-transp-10);
+  background: var(--_bg);
 }
 
-.ghost.active :is(.icon-wrapper--before, .icon-wrapper--after) {
-  background: var(--leu-color-black-100);
-  color: var(--leu-color-black-0);
+.ghost.active .icon-wrapper {
+  --_bg: var(--leu-color-black-100);
+  --_color: var(--leu-color-black-0);
 }
 
-.ghost:disabled :is(.icon-wrapper--before, .icon-wrapper--after) {
-  background: var(--leu-color-black-transp-5);
+.ghost:disabled .icon-wrapper {
+  --_bg: var(--leu-color-black-transp-5);
 }
 
 /* inverted */
 
-.ghost.inverted :is(.icon-wrapper--before, .icon-wrapper--after) {
-  background: var(--leu-color-black-transp-20);
+.ghost.inverted .icon-wrapper {
+  --_bg: var(--leu-color-black-transp-20);
 }
 
-.ghost.inverted:hover :is(.icon-wrapper--before, .icon-wrapper--after) {
-  background: var(--leu-color-black-transp-40);
-  color: var(--leu-color-black-0);
+.ghost.inverted:hover .icon-wrapper {
+  --_bg: var(--leu-color-black-transp-40);
+  --_color: var(--leu-color-black-0);
 }
 
-.ghost.inverted:disabled :is(.icon-wrapper--before, .icon-wrapper--after) {
-  background: var(--leu-color-black-transp-20);
-  color: var(--leu-color-white-transp-70);
+.ghost.inverted:disabled .icon-wrapper {
+  --_bg: var(--leu-color-black-transp-20);
+  --_color: var(--leu-color-white-transp-70);
 }
 
-.ghost.active.inverted :is(.icon-wrapper--before, .icon-wrapper--after) {
-  background: var(--leu-color-black-0);
-  color: var(--leu-color-black-100);
+.ghost.active.inverted .icon-wrapper {
+  --_bg: var(--leu-color-black-0);
+  --_color: var(--leu-color-black-100);
 }
 
 /* Expanded icon */
-.icon-wrapper--expanded {
+.icon-expanded leu-icon {
+  display: block;
+}
+
+.icon-expanded {
   transition: transform 0.1s ease;
 }
 
-:host([expanded="open"]) .icon-wrapper--expanded {
+:host([expanded="true"]) .icon-expanded {
   transform: rotate(180deg);
 }

package/src/components/button/stories/button.stories.js

@@ -87,6 +87,7 @@ Regular.argTypes = {
   expanded: { control: "radio", options: BUTTON_EXPANDED_OPTIONS },
   disabled: { control: "boolean" },
   round: { control: "boolean" },
+  active: { control: "boolean" },
 }
 Regular.args = {
   content: "Click Mich...",

package/src/components/button/test/button.test.js

@@ -58,7 +58,7 @@ describe("LeuButton", () => {
     const button = el.shadowRoot.querySelector("button")
 
     expect(button).dom.to.equal(
-      "<button><slot name='before'></slot><span><slot></slot></span><slot name='after'></slot></button>",
+      "<button><div><slot name='before'></slot></div><span><slot></slot></span><div><slot name='after'></slot></div></button>",
       { ignoreAttributes: ["class", "type"] }
     )
   })
@@ -73,7 +73,7 @@ describe("LeuButton", () => {
     const button = el.shadowRoot.querySelector("button")
 
     expect(button).dom.to.equal(
-      "<button aria-expanded='true'><slot name='before'></slot><span><slot></slot></span><slot name='after'></slot><div class='icon-wrapper icon-wrapper--expanded'><leu-icon name='angleDropDown' size='24'></leu-icon></div></button>",
+      "<button aria-expanded='true'><div><slot name='before'></slot></div><span><slot></slot></span><div><slot name='after'></slot></div><div class='icon-expanded'><leu-icon name='angleDropDown' size='24'></leu-icon></div></button>",
       { ignoreAttributes: ["class", "type"] }
     )
 
@@ -82,7 +82,7 @@ describe("LeuButton", () => {
     await elementUpdated(el)
 
     expect(button).dom.to.equal(
-      "<button class='primary regular' aria-expanded='true'><slot name='before'></slot><span><slot></slot></span><slot name='after'></slot></button>",
+      "<button class='primary regular' aria-expanded='true'><div><slot name='before'></slot></div><span><slot></slot></span><div><slot name='after'></slot></div></button>",
       { ignoreAttributes: ["class", "type"] }
     )
   })

package/src/components/chip/chip.css

@@ -55,7 +55,7 @@
   border: none;
   border-radius: 1rem;
   background-color: var(--chip-background-color);
-  padding: 0.5rem 1rem;
+  padding: 8px 1rem;
 
   color: var(--chip-color);
   font-family: inherit;
@@ -66,6 +66,7 @@
 
   display: inline-flex;
   gap: 0.5rem;
+  align-items: center;
 
   /* Allow shrinking to achieve text truncation (ellipsis) */
   min-width: 0;
@@ -108,10 +109,10 @@
 }
 
 :host([size="small"]:not([variant="radio"])) .button {
-  padding: 0.5625rem 0.75rem 0.4375rem;
+  padding: 0.3125rem 0.75rem;
 
   font-size: 0.75rem;
-  line-height: 1;
+  line-height: 1.25rem;
 }
 
 :host([variant="radio"]) .button::before {

package/src/components/chip/stories/chip-selectable.stories.js

@@ -50,7 +50,7 @@ export const Default = Template.bind({})
 Default.args = {}
 
 export const Small = Template.bind({})
-Small.args = { size: SIZES.small }
+Small.args = { size: SIZES.small, label: "Publikationen Region" }
 
 export const Radio = Template.bind({})
 Radio.args = { variant: VARIANTS.radio }

package/src/components/dropdown/dropdown.css

@@ -1,5 +1,6 @@
 :host {
   position: relative;
+  display: contents;
 }
 
 .content {

package/src/components/icon/icon.css

@@ -1,3 +1,7 @@
+:host {
+  display: contents;
+}
+
 svg,
 .placeholder {
   display: block;

package/src/components/popup/popup.css

@@ -3,6 +3,7 @@
   --popup-font-black: var(--leu-font-family-black);
 
   font-family: var(--popup-font-regular);
+  display: contents;
 }
 
 .popup {

package/src/components/select/select.css

@@ -58,7 +58,7 @@
   line-height: 1.5;
   padding: 1.375rem 3rem 1.375rem 1rem;
 
-  background: none;
+  background: var(--leu-color-black-0);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/src/components/select/test/select.test.js

@@ -419,6 +419,7 @@ describe("LeuSelect", () => {
     await elementUpdated(el)
 
     expect(menuItems.every((item) => !item.multipleSelection)).to.be.true
+  })
 
   it("closes the popup when the document is clicked outside the component", async () => {
     const el = await defaultFixture({

package/src/components/table/Table.js

@@ -115,7 +115,7 @@ export class LeuTable extends LeuElement {
       this.sortOrderAsc = !this.sortOrderAsc
     } else {
       this.sortIndex = index
-      this.sortOrder = "asc"
+      this.sortOrderAsc = false
     }
   }
 
@@ -125,10 +125,6 @@ export class LeuTable extends LeuElement {
     ></leu-icon>`
   }
 
-  sortArrow(col) {
-    return html` ${this.isSorted(col) ? this.sortArrowIcon() : nothing} `
-  }
-
   get _columns() {
     return this.columns
   }
@@ -172,6 +168,26 @@ export class LeuTable extends LeuElement {
       sticky: this.firstColumnSticky,
     }
 
+    function headerStyle(col) {
+      if (col.headerStyle) {
+        return styleMap({
+          ...col.headerStyle(),
+          textAlign: col.align === "right" ? "right" : undefined,
+        })
+      }
+      return col.align === "right" ? styleMap({ textAlign: "right" }) : nothing
+    }
+
+    function bodyStyle(col, row) {
+      if (col.style) {
+        return styleMap({
+          ...col.style(row),
+          textAlign: col.align === "right" ? "right" : undefined,
+        })
+      }
+      return col.align === "right" ? styleMap({ textAlign: "right" }) : nothing
+    }
+
     return html`
       <div
         class=${classMap(scrollClasses)}
@@ -183,15 +199,19 @@ export class LeuTable extends LeuElement {
             <tr>
               ${this._columns.map(
                 (col) =>
-                  html`<th
-                    style=${col.headerStyle
-                      ? styleMap(col.headerStyle())
-                      : nothing}
-                  >
+                  html`<th style=${headerStyle(col)}>
                     ${col.sort
-                      ? html`<button @click=${(_) => this.sortClick(col)}>
+                      ? html`<button
+                          @click=${(_) => this.sortClick(col)}
+                          class=${this.isSorted(col) ? "active" : nothing}
+                        >
+                          ${col.align === "right"
+                            ? this.sortArrowIcon()
+                            : nothing}
                           <span>${col.name}</span>
-                          ${this.sortArrow(col)}
+                          ${col.align !== "right"
+                            ? this.sortArrowIcon()
+                            : nothing}
                         </button>`
                       : col.name}
                   </th>`
@@ -204,9 +224,7 @@ export class LeuTable extends LeuElement {
                 html`<tr>
                   ${this._columns.map(
                     (col) =>
-                      html`<td
-                        style=${col.style ? styleMap(col.style(row)) : nothing}
-                      >
+                      html`<td style=${bodyStyle(col, row)}>
                         ${col.value(row)}
                       </td>`
                   )}

package/src/components/table/table.css

@@ -66,20 +66,30 @@ button {
   line-height: 1.5;
   padding: 0;
   border: 0;
-  width: 100%;
-  display: flex;
-  align-items: flex-center;
   font-size: inherit;
   font-family: inherit;
   color: inherit;
 }
 
-thead leu-icon {
-  --leu-icon-size: 1.25rem;
+button span {
+  vertical-align: bottom;
+}
 
+button leu-icon {
+  --leu-icon-size: 1.25rem;
   display: inline-block;
-  color: var(--leu-color-accent-blue);
   padding: 0;
+  opacity: 0;
+  vertical-align: bottom;
+}
+
+button:hover leu-icon {
+  opacity: 1;
+}
+
+button.active leu-icon {
+  color: var(--leu-color-accent-blue);
+  opacity: 1;
 }
 
 table.sticky td:first-child,

package/src/styles/common-styles.css

@@ -3,3 +3,12 @@
   box-sizing: border-box;
   font-feature-settings: var(--leu-t-font-feature-settings);
 }
+
+/**
+ * If a custom element sets the display property to any value
+ * it will not be hidden by the [hidden] attribute.
+ * That's why we need to specify this rule.
+ */
+:host([hidden]) {
+  display: none;
+}

package/web-test-runner.config.mjs

@@ -9,6 +9,7 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   plugins: wdsPlugins,
   mimeTypes: {
     "src/components/**/*.css": "js",
+    "src/styles/common-styles.css": "js",
   },
 
   /** Resolve bare module imports */

package/dist/LeuElement-519af050.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LeuElement-519af050.d.ts","sourceRoot":"","sources":["LeuElement-519af050.js"],"names":[],"mappings":"AAsCA;IACE,8EAcC;CACF;AApDD,sEAaC;2BAf+B,KAAK"}