@kubex/zinc 1.0.25 → 1.0.98

package/src/components/opt-group/opt-group.component.ts

@@ -0,0 +1,74 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import {watch} from '../../internal/watch';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './opt-group.scss';
+
+/**
+ * @summary Groups options within a `<zn-select>` under a labeled header, similar to `<optgroup>` in native HTML.
+ * @documentation https://zinc.style/components/opt-group
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The default slot for `<zn-option>` elements.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The group label element.
+ */
+export default class ZnOptGroup extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  /** The label for the opt-group, displayed as a non-selectable header above the grouped options. */
+  @property() label = '';
+
+  /** Disables all options within the group. */
+  @property({type: Boolean, reflect: true}) disabled = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'group');
+    this.setAttribute('aria-label', this.label);
+  }
+
+  @watch('label')
+  handleLabelChange() {
+    this.setAttribute('aria-label', this.label);
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    this.propagateDisabled();
+  }
+
+  /** @internal - Updates visibility of the group based on whether any child options are visible. */
+  updateVisibility() {
+    const options = [...this.querySelectorAll('zn-option')];
+    this.hidden = options.length > 0 && options.every(option => option.hidden);
+  }
+
+  render() {
+    return html`
+      <div part="base" class="opt-group">
+        <div part="label" class="opt-group__label" aria-hidden="true">
+          ${this.label}
+        </div>
+        <div class="opt-group__options" role="none">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  private handleSlotChange() {
+    if (this.disabled) {
+      this.propagateDisabled();
+    }
+  }
+
+  private propagateDisabled() {
+    this.querySelectorAll('zn-option').forEach(option => {
+      option.disabled = this.disabled;
+    });
+  }
+}

package/src/components/opt-group/opt-group.scss

@@ -0,0 +1,37 @@
+@use "../../wc";
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+.opt-group__label {
+  font-family: var(--zn-font-sans);
+  font-size: var(--zn-font-size-x-small);
+  font-weight: var(--zn-font-weight-semibold);
+  line-height: var(--zn-line-height-normal);
+  letter-spacing: var(--zn-letter-spacing-normal);
+  color: var(--zn-color-neutral-500);
+  text-transform: uppercase;
+  padding-block: var(--zn-spacing-2x-small);
+  padding-inline: var(--zn-spacing-large);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+:host(:not(:first-of-type)) .opt-group__label {
+  border-block-start: solid var(--zn-panel-border-width) var(--zn-panel-border-color);
+  margin-block-start: var(--zn-spacing-x-small);
+  padding-block-start: var(--zn-spacing-small);
+}
+
+.opt-group__options {
+  display: block;
+}
+
+:host([disabled]) {
+  opacity: 0.5;
+}

package/src/components/opt-group/opt-group.test.ts

@@ -0,0 +1,27 @@
+import '../../../dist/zn.min.js';
+import {expect, fixture, html} from '@open-wc/testing';
+
+describe('<zn-opt-group>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html`
+      <zn-opt-group></zn-opt-group> `);
+
+    expect(el).to.exist;
+  });
+
+  it('should display a label', async () => {
+    const el = await fixture(html`
+      <zn-opt-group label="Group Label"></zn-opt-group> `);
+    const label = el.shadowRoot!.querySelector('.opt-group__label');
+
+    expect(label).to.exist;
+    expect(label!.textContent!.trim()).to.equal('Group Label');
+  });
+
+  it('should have role="group"', async () => {
+    const el = await fixture(html`
+      <zn-opt-group label="Test"></zn-opt-group> `);
+
+    expect(el.getAttribute('role')).to.equal('group');
+  });
+});

package/src/components/option/option.component.ts

@@ -43,8 +43,7 @@ export default class ZnOption extends ZincElement {
 
   /**
    * The option's value. When selected, the containing form control will receive this value. The value must be unique
-   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
-   * multiple values.
+   * from other options in the same group. Values may contain spaces when using JSON array syntax on the parent select.
    */
   @property({ reflect: true }) value = '';
 
@@ -93,20 +92,6 @@ export default class ZnOption extends ZincElement {
     this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
   }
 
-  @watch('value')
-  handleValueChange() {
-    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers
-    // instead of requiring them to cast the value to a string.
-    if (typeof this.value !== 'string') {
-      this.value = String(this.value);
-    }
-
-    if (this.value.includes(' ')) {
-      console.error(`Option values cannot include a space. All spaces have been replaced with underscores.`, this);
-      this.value = this.value.replace(/ /g, '_');
-    }
-  }
-
   /** Returns a plain text label based on the option's content. */
   getTextLabel() {
     const nodes = this.childNodes;

package/src/components/option/option.scss

@@ -6,6 +6,10 @@
   -webkit-user-select: none;
 }
 
+:host([hidden]) {
+  display: none !important;
+}
+
 :host(:focus) {
   outline: none;
 }

package/src/components/panel/panel.component.ts

@@ -8,18 +8,18 @@ import ZincElement from '../../internal/zinc-element';
 import styles from './panel.scss';
 
 /**
- * @summary Short summary of the component's intended use.
+ * @summary Panels are versatile containers that provide structure for organizing content with optional headers and footers.
  * @documentation https://zinc.style/components/panel
  * @status experimental
  * @since 1.0
  *
- * @slot - The default slot.
- * @slot actions - The actions slot.
- * @slot footer - The footer slot.
+ * @slot - The panel's main content.
+ * @slot actions - Actions displayed in the panel header (buttons, chips, etc).
+ * @slot footer - Content displayed in the panel footer.
  *
  * @csspart base - The component's base wrapper.
  *
- * @cssproperty --example - An example CSS custom property.
+ * @cssproperty --zn-panel-basis - The flex-basis of the panel. Can be set using the basis-px attribute.
  */
 export default class ZnPanel extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -92,7 +92,7 @@ export default class ZnPanel extends ZincElement {
         'panel--has-footer': hasFooterSlot,
         'panel--has-header': hasHeader,
         'panel--cosmic': this.cosmic,
-        'panel--shadow': this.shadow
+        'panel--shadow': this.shadow,
       })}">
 
         <div class="panel__inner">
@@ -109,8 +109,10 @@ export default class ZnPanel extends ZincElement {
                 <slot name="actions" slot="actions" class="panel__header__actions"></slot>` : null}
             </zn-header>` : null}
 
-          <div class="panel__body">
-            <slot></slot>
+          <div class="panel__content">
+            <div class="panel__body">
+              <slot></slot>
+            </div>
           </div>
 
           ${hasFooterSlot ? html`

package/src/components/panel/panel.scss

@@ -33,13 +33,32 @@
     flex-grow: 1;
   }
 
+  &__content {
+    display: flex;
+    flex-grow: 1;
+    overflow: hidden;
+    position: relative;
+  }
+
+
   &__header {
     padding: var(--zn-spacing-x-small) var(--zn-spacing-medium);
 
+    // background-color: rgba(var(--zn-panel-highlight), 0.6);
+    // border-bottom: 1px solid rgb(var(--zn-border-color));
+
     &::part(base) {
       border-bottom: 0;
     }
 
+    &::part(header-caption) {
+      font-size: var(--zn-font-size-large);
+    }
+
+    &--inline {
+      border-bottom: 0;
+    }
+
     &--underline {
       border-bottom: 1px solid rgb(var(--zn-border-color));
     }
@@ -144,4 +163,5 @@
   &--shadow {
     box-shadow: 0 6px 20px 10px rgba(0, 0, 0, 0.25);
   }
+
 }

package/src/components/priority-list/index.ts

@@ -0,0 +1,12 @@
+import ZnPriorityList from './priority-list.component';
+
+export * from './priority-list.component';
+export default ZnPriorityList;
+
+ZnPriorityList.define('zn-priority-list');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-priority-list': ZnPriorityList;
+  }
+}