@kubex/zinc 1.0.24 → 1.0.98

package/src/components/priority-list/priority-list.scss

@@ -0,0 +1,185 @@
+@use "../../wc";
+@use "../../form-control";
+
+:host {
+  display: block;
+  line-height: var(--zn-line-height-dense);
+
+  --zn-priority-list-item-gap: var(--zn-spacing-2x-small);
+  --zn-priority-list-item-padding: var(--zn-spacing-small) var(--zn-spacing-medium);
+  --zn-priority-list-handle-color: var(--zn-color-neutral-400);
+  --zn-priority-list-priority-color: var(--zn-color-neutral-600);
+}
+
+.form-control {
+  position: relative;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.form-control__label {
+  padding: 0;
+}
+
+.priority-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zn-priority-list-item-gap);
+}
+
+.priority-list--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+// During an active drag, animate items shifting into new positions
+.priority-list--drag-active {
+  .priority-list__item {
+    transition: transform 200ms ease, opacity 200ms ease, box-shadow 200ms ease;
+  }
+}
+
+.priority-list__item {
+  display: flex;
+  align-items: center;
+  gap: var(--zn-spacing-small);
+  padding: var(--zn-priority-list-item-padding);
+  background: rgb(var(--zn-panel));
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: var(--zn-border-radius-medium);
+  cursor: grab;
+  user-select: none;
+  -webkit-user-drag: element;
+  position: relative;
+
+  &:hover {
+    background: rgb(var(--zn-panel-hover, var(--zn-panel)));
+    border-color: rgb(var(--zn-color-primary-500));
+
+    .priority-list__handle {
+      color: rgb(var(--zn-color-primary-500));
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgb(var(--zn-color-primary-500));
+    outline-offset: -1px;
+    border-color: rgb(var(--zn-color-primary-500));
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+// The item currently being dragged — shown as a faded placeholder
+.priority-list__item--dragging {
+  opacity: 0.3;
+  border-style: dashed;
+  border-color: rgb(var(--zn-color-primary-400));
+  background: rgb(var(--zn-color-primary-50, var(--zn-panel)));
+  box-shadow: none;
+}
+
+.priority-list__item--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+
+  &:hover {
+    background: rgb(var(--zn-panel));
+    border-color: rgb(var(--zn-border-color));
+  }
+}
+
+.priority-list__handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--zn-priority-list-handle-color);
+  cursor: grab;
+  transition: color 150ms ease;
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.priority-list__priority {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: 1.5em;
+  font-size: var(--zn-font-size-small);
+  font-weight: var(--zn-font-weight-semibold);
+  color: var(--zn-priority-list-priority-color);
+}
+
+.priority-list__content {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  // Prevent slotted content from capturing its own drag events,
+  // which would override the item-level draggable behaviour
+  pointer-events: none;
+
+  ::slotted(*) {
+    pointer-events: none;
+    -webkit-user-drag: none;
+  }
+}
+
+.priority-list__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--zn-spacing-2x-small);
+  flex-shrink: 0;
+  // Re-enable pointer events so action buttons are clickable
+  pointer-events: auto;
+
+  ::slotted(*) {
+    pointer-events: auto;
+    -webkit-user-drag: none;
+  }
+}
+
+// Size variants
+:host([size="small"]) {
+  .priority-list__item {
+    padding: var(--zn-spacing-2x-small) var(--zn-spacing-small);
+    font-size: var(--zn-font-size-small);
+  }
+
+  .priority-list__priority {
+    font-size: var(--zn-font-size-x-small);
+    min-width: 1.25em;
+  }
+}
+
+:host([size="large"]) {
+  .priority-list__item {
+    padding: var(--zn-spacing-medium) var(--zn-spacing-large);
+    font-size: var(--zn-font-size-medium);
+  }
+
+  .priority-list__priority {
+    font-size: var(--zn-font-size-medium);
+    min-width: 1.75em;
+  }
+}
+
+// The collector div that holds the default slot is hidden; items get
+// reassigned to named slots once detected.
+.priority-list__collector {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.priority-list__hidden-inputs {
+  display: none;
+}

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

@@ -0,0 +1,139 @@
+import '../../../dist/zn.min.js';
+import {expect, fixture, html} from '@open-wc/testing';
+
+describe('<zn-priority-list>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html`<zn-priority-list></zn-priority-list>`);
+    expect(el).to.exist;
+  });
+
+  it('should initialize order from slotted children', async () => {
+    const el = await fixture(html`
+      <zn-priority-list>
+        <div value="alpha">Alpha</div>
+        <div value="beta">Beta</div>
+        <div value="gamma">Gamma</div>
+      </zn-priority-list>
+    `) as any;
+
+    await el.updateComplete;
+    expect(el.value).to.deep.equal(['alpha', 'beta', 'gamma']);
+  });
+
+  it('should assign slot names to children based on value attribute', async () => {
+    const el = await fixture(html`
+      <zn-priority-list>
+        <div value="first">First</div>
+        <div value="second">Second</div>
+      </zn-priority-list>
+    `) as any;
+
+    await el.updateComplete;
+    const firstChild = el.querySelector('[value="first"]');
+    const secondChild = el.querySelector('[value="second"]');
+    expect(firstChild.getAttribute('slot')).to.equal('_item-first');
+    expect(secondChild.getAttribute('slot')).to.equal('_item-second');
+  });
+
+  it('should render priority numbers starting from priorityStart', async () => {
+    const el = await fixture(html`
+      <zn-priority-list priority-start="10">
+        <div value="a">A</div>
+        <div value="b">B</div>
+      </zn-priority-list>
+    `) as any;
+
+    await el.updateComplete;
+    const priorities = el.shadowRoot.querySelectorAll('.priority-list__priority');
+    expect(priorities[0].textContent.trim()).to.equal('10');
+    expect(priorities[1].textContent.trim()).to.equal('11');
+  });
+
+  it('should return correct priority map', async () => {
+    const el = await fixture(html`
+      <zn-priority-list>
+        <div value="x">X</div>
+        <div value="y">Y</div>
+        <div value="z">Z</div>
+      </zn-priority-list>
+    `) as any;
+
+    await el.updateComplete;
+    const map = el.getPriorityMap();
+    expect(map).to.deep.equal([
+      {key: 'x', priority: 1},
+      {key: 'y', priority: 2},
+      {key: 'z', priority: 3},
+    ]);
+  });
+
+  it('should generate hidden inputs for form submission', async () => {
+    const el = await fixture(html`
+      <zn-priority-list name="priority">
+        <div value="item1">Item 1</div>
+        <div value="item2">Item 2</div>
+      </zn-priority-list>
+    `) as any;
+
+    await el.updateComplete;
+    const hiddenInputs = el.shadowRoot.querySelectorAll('.priority-list__hidden-inputs input[type="hidden"]');
+    expect(hiddenInputs.length).to.equal(2);
+    expect(hiddenInputs[0].name).to.equal('priority[item1]');
+    expect(hiddenInputs[0].value).to.equal('1');
+    expect(hiddenInputs[1].name).to.equal('priority[item2]');
+    expect(hiddenInputs[1].value).to.equal('2');
+  });
+
+  it('should have listbox role on the list container', async () => {
+    const el = await fixture(html`
+      <zn-priority-list label="My List">
+        <div value="a">A</div>
+      </zn-priority-list>
+    `) as any;
+
+    await el.updateComplete;
+    const list = el.shadowRoot.querySelector('.priority-list');
+    expect(list.getAttribute('role')).to.equal('listbox');
+    expect(list.getAttribute('aria-orientation')).to.equal('vertical');
+  });
+
+  it('should have option role on each item', async () => {
+    const el = await fixture(html`
+      <zn-priority-list>
+        <div value="a">A</div>
+        <div value="b">B</div>
+      </zn-priority-list>
+    `) as any;
+
+    await el.updateComplete;
+    const items = el.shadowRoot.querySelectorAll('.priority-list__item');
+    items.forEach((item: Element) => {
+      expect(item.getAttribute('role')).to.equal('option');
+    });
+  });
+
+  it('should render drag handles', async () => {
+    const el = await fixture(html`
+      <zn-priority-list>
+        <div value="a">A</div>
+      </zn-priority-list>
+    `) as any;
+
+    await el.updateComplete;
+    const handles = el.shadowRoot.querySelectorAll('.priority-list__handle');
+    expect(handles.length).to.equal(1);
+  });
+
+  it('should disable dragging when disabled', async () => {
+    const el = await fixture(html`
+      <zn-priority-list disabled>
+        <div value="a">A</div>
+      </zn-priority-list>
+    `) as any;
+
+    await el.updateComplete;
+    const item = el.shadowRoot.querySelector('.priority-list__item');
+    expect(item.getAttribute('draggable')).to.equal('false');
+    expect(item.getAttribute('tabindex')).to.equal('-1');
+  });
+});

package/src/components/progress-bar/progress-bar.component.ts

@@ -5,21 +5,25 @@ import ZincElement from '../../internal/zinc-element';
 import styles from './progress-bar.scss';
 
 /**
- * @summary Short summary of the component's intended use.
+ * @summary Progress bars provide visual feedback about the completion status of a task or process.
  * @documentation https://zinc.style/components/progress-bar
  * @status experimental
  * @since 1.0
  *
- * @dependency zn-example
+ * @csspart header - The header container that contains the caption and progress text.
+ * @csspart caption - The caption text element.
+ * @csspart progress - The progress percentage text element.
+ * @csspart bar - The SVG element containing the progress bar.
+ * @csspart track - The background track of the progress bar.
+ * @csspart fill - The filled portion of the progress bar indicating progress.
+ * @csspart footer - The footer container that contains the description.
+ * @csspart info - The description text element.
  *
- * @event zn-event-name - Emitted as an example.
- *
- * @slot - The default slot.
- * @slot example - An example slot.
- *
- * @csspart base - The component's base wrapper.
- *
- * @cssproperty --example - An example CSS custom property.
+ * @cssproperty --zn-border-color - The color of the progress bar background track.
+ * @cssproperty --zn-primary - The color of the progress bar fill.
+ * @cssproperty --zn-text-heading - The color of the caption text.
+ * @cssproperty --zn-text - The color of the progress percentage and description text.
+ * @cssproperty --zn-spacing-x-small - The spacing between header/footer and the progress bar.
  */
 export default class ZnProgressBar extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -34,28 +38,30 @@ export default class ZnProgressBar extends ZincElement {
     return html`
       ${this.caption || this.showProgress
         ? html`
-          <div class="header">
-            <p class="caption">${this.caption}</p>
+          <div part="header" class="header">
+            <p part="caption" class="caption">${this.caption}</p>
             ${this.showProgress
               ? html`
-                <p class="progress">${this.value}%</p> `
+                <p part="progress" class="progress">${this.value}%</p> `
               : ''}
           </div>
         `
         : ''}
-      <svg width="100%" height="8">
+      <svg part="bar" width="100%" height="8">
         <defs>
           <clipPath id="clip-path">
             <rect width="100%" height="8px" rx="4px"/>
           </clipPath>
         </defs>
         <rect
+          part="track"
           fill="rgba(var(--zn-border-color))"
           width="100%"
           height="100%"
           rx="4px"
         />
         <rect
+          part="fill"
           fill='rgb(var(--zn-primary))'
           width="${this.value}%"
           height="100%"
@@ -65,10 +71,10 @@ export default class ZnProgressBar extends ZincElement {
       </svg>
       ${this.description
         ? html`
-          <div class="footer">
+          <div part="footer" class="footer">
             ${this.description
               ? html`
-                <p class="info">
+                <p part="info" class="info">
                   ${this.description}
                 </p>`
               : ''}

package/src/components/radio/radio.scss

@@ -100,10 +100,17 @@
   border: none;
 }
 
+/* Focus */
+.radio:not(.radio--checked):not(.radio--disabled) .radio__input:focus-visible ~ .radio__control {
+  border-color: rgb(var(--zn-primary));
+  outline: var(--zn-focus-ring);
+  outline-offset: var(--zn-focus-ring-offset);
+}
+
 /* Checked + focus */
-:host(:focus-visible) .radio__control {
-  outline: rgb(var(--zn-primary));
-  outline-offset: 2px;
+.radio.radio--checked:not(.radio--disabled) .radio__input:focus-visible ~ .radio__control {
+  outline: var(--zn-focus-ring);
+  outline-offset: var(--zn-focus-ring-offset);
 }
 
 /* Disabled */