@kubex/zinc 1.1.184 → 2.0.0

package/src/components/content-block/content-block.scss

@@ -18,6 +18,11 @@
 
 .content-block--collapsible .content-block-header {
   cursor: pointer;
+
+  &:focus-visible {
+    outline: var(--zn-focus-ring);
+    border-radius: var(--zn-border-radius-small);
+  }
 }
 
 .content-block-header__icon {
@@ -37,6 +42,7 @@
 }
 
 .content-block-header__caption {
+  font-family: var(--zn-text-h1-font-family, inherit);
   font-weight: var(--zn-text-h1-font-weight);
   font-size: var(--zn-text-h1-font-size);
   color: rgba(var(--zn-text-panel-title), 100%);
@@ -130,18 +136,18 @@
   }
 
   code {
-    background-color: #f0f0f0;
+    background-color: var(--zn-code-inline-background, #f0f0f0);
     border-radius: 3px;
     font-size: 85%;
     padding: 2px 4px;
   }
 
   pre {
-    background-color: #23241f;
+    background-color: var(--zn-code-background, #23241f);
     border-radius: 3px;
     margin-block: 5px;
     padding: 5px 10px;
-    color: #f8f8f2;
+    color: var(--zn-code-color, #f8f8f2);
     overflow: auto;
   }
 
@@ -176,7 +182,7 @@ li > ol, li > ul {
 }
 
 li[data-list=checked] > .ql-ui, li[data-list=unchecked] > .ql-ui {
-  color: #777;
+  color: var(--zn-content-block-meta-color, #777);
 }
 
 li {
@@ -207,7 +213,7 @@ li[data-list="unchecked"]::before {
 
 li[data-list="checked"]::before,
 li[data-list="unchecked"]::before {
-  color: #777;
+  color: var(--zn-content-block-meta-color, #777);
 }
 
 ol li::before,

package/src/components/content-block/content-block.test.ts

@@ -17,6 +17,13 @@ describe('<zn-content-block>', () => {
     expect(el).to.exist;
   });
 
+  it('should only create the html preview frame when there is html', async () => {
+    const el = await fixture<LitElement>('<zn-content-block><div slot="text">plain</div></zn-content-block>');
+    await el.updateComplete;
+
+    expect(el.shadowRoot!.querySelector('iframe')).to.be.null;
+  });
+
   it('should decode escaped source in the html body once', async () => {
     const el = await fixture<LitElement>(
       '<zn-content-block><div slot="html">&lt;p&gt;Test&amp;nbsp;Format&lt;/p&gt;</div></zn-content-block>'
@@ -27,6 +34,25 @@ describe('<zn-content-block>', () => {
     expect(iframe.srcdoc).to.contain('<p>Test&nbsp;Format</p>');
   });
 
+  it('should read the text slot without forcing layout', async () => {
+    const descriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'innerText')!;
+    let reads = 0;
+    Object.defineProperty(HTMLElement.prototype, 'innerText', {
+      ...descriptor,
+      get() {
+        reads++;
+        return descriptor.get!.call(this);
+      }
+    });
+    try {
+      const content = await textSection('line one<br>\nline two');
+      expect(content.textContent).to.contain('line two');
+    } finally {
+      Object.defineProperty(HTMLElement.prototype, 'innerText', descriptor);
+    }
+    expect(reads).to.equal(0);
+  });
+
   it('should render plain text in the text body as text', async () => {
     const content = await textSection('1 &lt; 2 &amp;&amp; 3 &gt; 2');
 

package/src/components/copy-button/copy-button.component.ts

@@ -44,7 +44,7 @@ export default class ZnCopyButton extends ZincElement {
 
   @property() src = '';
 
-  @property({type: Number, reflect: true}) size: number = 24;
+  @property({type: Number, reflect: true}) size: number = 16;
 
   /**
    * An id that references an element in the same document from which data will be copied. If both this and `value` are
@@ -68,7 +68,7 @@ export default class ZnCopyButton extends ZincElement {
         content=${copyLabel}>
         <button class="copy-button__button" part="button" @click=${this.handleCopy}>
           <slot part="copy-icon" name="copy-icon">
-            <zn-icon src="${this.src ? this.src : 'content_copy'}" size="${this.size}"></zn-icon>
+            <zn-icon src="${this.src ? this.src : 'copy@lu'}" size="${this.size}"></zn-icon>
           </slot>
           <slot part="success-icon" name="success-icon" hidden>
             <zn-icon src="check" size="${this.size}"></zn-icon>

package/src/components/copy-button/copy-button.scss

@@ -22,14 +22,27 @@ slot {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  background: none;
+  justify-content: center;
+  aspect-ratio: 1;
+  background: transparent;
   border: none;
-  border-radius: 3px;
+  border-radius: var(--zn-border-radius);
   font-size: inherit;
   color: inherit;
-  padding: var(--zn-spacing-2x-small);
+  padding: 4px;
+  line-height: 0;
   cursor: pointer;
-  transition: color 0.2s;
+  transition: background-color var(--zn-transition-fast, 150ms) ease,
+              color var(--zn-transition-fast, 150ms) ease,
+              transform 160ms var(--zn-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
+
+  &:hover:not([disabled]) {
+    background: var(--zn-button-plain-hover-background, rgb(var(--zn-color-tab)));
+  }
+
+  &:active:not([disabled]) {
+    transform: scale(0.97);
+  }
 
   &:focus-visible {
     outline: none;

package/src/components/data-select/data-select.component.ts

@@ -11,6 +11,7 @@ import {
 import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from 'lit';
 import {defaultValue} from "../../internal/default-value";
 import {FormControlController} from "../../internal/form";
+import {ifDefined} from "lit/directives/if-defined.js";
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property, query} from 'lit/decorators.js';
 import {watch} from "../../internal/watch";
@@ -334,7 +335,8 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
           <div slot="prefix"
                class="select__icon ${this.iconPosition === 'end' ? 'select__icon--end' : ''}"></div>` : ''}
         ${data.map((item: DataProviderOption) => html`
-          <zn-option class="select__option" value="${item.key}">
+          <zn-option class="select__option" value="${item.key}"
+                     aria-label="${ifDefined(this.iconOnly ? item.value : undefined)}">
             ${(this.iconPosition !== 'none' || this.iconOnly) ? html`<span
               slot="prefix">${item.prefix}</span>` : ''}
             ${this.iconOnly ? undefined : item.value}