@kubex/zinc 1.1.57 → 1.1.59

package/docs/pages/components/toggle.md

@@ -62,6 +62,39 @@ Use the `label` attribute to add a form control label above the toggle.
 <zn-toggle label="User Preferences">Enable email notifications</zn-toggle>
 ```
 
+### Label Position
+
+Use the `label-position` attribute to control where the label sits relative to the toggle. Available positions are `top` (default), `left`, and `right`.
+
+With `left`, the label sits at the start of the row and the toggle is pushed to the far right — useful for settings lists. With `right`, the layout is mirrored.
+
+```html:preview
+<zn-toggle label="Top label (default)"></zn-toggle>
+<br />
+<zn-toggle label="Left label" label-position="left"></zn-toggle>
+<br />
+<zn-toggle label="Right label" label-position="right"></zn-toggle>
+```
+
+Combine `label-position` with the `inline` attribute to keep the label and toggle adjacent instead of spread across the full width.
+
+```html:preview
+<zn-toggle label="Inline left" label-position="left" inline></zn-toggle>
+<br />
+<zn-toggle label="Inline right" label-position="right" inline></zn-toggle>
+```
+
+A settings list using `label-position="left"`:
+
+```html:preview
+<div style="max-width: 320px;">
+  <zn-toggle label="Apple" label-position="left"></zn-toggle>
+  <zn-toggle label="Windows" label-position="left"></zn-toggle>
+  <zn-toggle label="Android" label-position="left"></zn-toggle>
+  <zn-toggle label="Blackberry" label-position="left" checked></zn-toggle>
+</div>
+```
+
 ### On/Off Text with Tooltip
 
 Use the `on-text` and `off-text` attributes to display tooltips that show when the toggle is in the on or off state. This provides additional context for the toggle's current state.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.57",
+  "version": "1.1.59",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/scss/themes/_light.scss

@@ -112,6 +112,7 @@
   /* Border radii */
   --zn-border-radius: 6px;
   --zn-border-radius-small: 2px;
+  --zn-border-radius-x-large: var(--zn-border-radius); // For backwards compat modal border radius
   --zn-border-radius-circle: 50%;
   --zn-border-radius-pill: 9999px;
 

package/src/components/cols/cols.component.ts

@@ -74,7 +74,7 @@ export default class ZnCols extends ZincElement {
     });
 
     return html`
-      <div class="${classMap({
+      <div part="base" class="${classMap({
         'cols': true,
         'cols--no-gap': this.noGap,
         'cols--border': this.border,

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

@@ -83,3 +83,7 @@
     grid-column: span 5 / span 5;
   }
 }
+
+zn-cols::part(base) {
+  gap: 70px;
+}

package/src/components/toggle/toggle.component.ts

@@ -2,6 +2,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
 import { defaultValue } from "../../internal/default-value";
 import { FormControlController } from "../../internal/form";
+import { HasSlotController } from "../../internal/slot";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { live } from "lit/directives/live.js";
 import { property, query, state } from 'lit/decorators.js';
@@ -20,6 +21,7 @@ import styles from './toggle.scss';
  * @event zn-input - Emitted when the toggle receives input.
  *
  * @slot - The toggle's label.
+ * @slot help-text - Text that describes how to use the toggle. Alternatively, you can use the `help-text` attribute.
  *
  * @csspart base - The component's base wrapper containing the toggle switch.
  * @csspart control - The toggle switch control (the circular button that slides).
@@ -29,6 +31,8 @@ import styles from './toggle.scss';
 export default class ZnToggle extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
+  private readonly hasSlotController = new HasSlotController(this, 'help-text');
+
   private readonly formControlController = new FormControlController(this, {
     value: (control: ZnToggle) => (control.checked ? control.value || 'on' : undefined),
     defaultValue: (control: ZnToggle) => control.defaultChecked,
@@ -69,6 +73,8 @@ export default class ZnToggle extends ZincElement implements ZincFormControl {
 
   @property() label: string = '';
 
+  @property({ attribute: 'label-position', reflect: true }) labelPosition: 'top' | 'left' | 'right' = 'top';
+
   @property({ type: Boolean }) inline: boolean = false;
 
   get validity() {
@@ -167,6 +173,7 @@ export default class ZnToggle extends ZincElement implements ZincFormControl {
 
     const tooltipContent = this.checked ? this.onText : this.offText;
     const showTooltip = !!tooltipContent;
+    const hasHelpText = this.helpText ? true : this.hasSlotController.test('help-text');
 
     const toggle = html`
       <div class="switch__input-wrapper" part="base">
@@ -195,13 +202,20 @@ export default class ZnToggle extends ZincElement implements ZincFormControl {
 
     return html`
       <div class="${classMap({
+        'form-control': true,
+        'form-control--small': this.size === 'small',
+        'form-control--medium': this.size === 'medium',
+        'form-control--large': this.size === 'large',
+        'form-control--has-help-text': hasHelpText,
         'switch__wrapper': true,
         'switch__wrapper--disabled': this.disabled,
         'switch__wrapper--has-focus': this.hasFocus,
         'switch__wrapper--small': this.size === 'small',
         'switch__wrapper--medium': this.size === 'medium',
         'switch__wrapper--large': this.size === 'large',
-        'switch__wrapper--inline': this.inline
+        'switch__wrapper--inline': this.inline,
+        'switch__wrapper--label-left': this.labelPosition === 'left',
+        'switch__wrapper--label-right': this.labelPosition === 'right'
       })}">
         <label>
           ${this.label ? html`<p class="switch-label">${this.label}</p>` : ''}
@@ -211,6 +225,12 @@ export default class ZnToggle extends ZincElement implements ZincFormControl {
               ${toggle}
             </zn-tooltip>`}
         </label>
+        <div part="form-control-help-text"
+             id="help-text"
+             class="form-control__help-text"
+             aria-hidden=${hasHelpText ? 'false' : 'true'}>
+          <slot name="help-text">${this.helpText}</slot>
+        </div>
       </div>`;
   }
 }

package/src/components/toggle/toggle.scss

@@ -1,11 +1,22 @@
 @use "../../wc";
+@use "../../form-control";
 
 :host {
   --zn-toggle-margin: 8px 0;
+  display: block;
 }
 
 .switch__wrapper {
-  display: inline-flex;
+  display: flex;
+  flex-direction: column;
+
+  label {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    cursor: pointer;
+  }
 }
 
 .switch__input-wrapper {
@@ -19,8 +30,8 @@
   cursor: pointer;
   border-radius: 12px;
   align-items: center;
-  background-color: rgba(0, 0, 0, 0.15);
-  border: 0.92px solid transparent;
+  background-color: rgb(var(--zn-color-tab));
+  border: 0.92px solid rgb(var(--zn-color-tab));
   margin: var(--zn-toggle-margin);
   transition: color .2s ease-in-out, background-color .4s ease-in-out, border-color .2s ease-in-out;
 }
@@ -34,7 +45,7 @@
   border-color: rgb(var(--zn-color-primary));
 
   .switch__control {
-    transform: translate(16px, -50%);
+    left: calc(100% - 20.32px - 0.92px);
   }
 }
 
@@ -47,22 +58,34 @@
 }
 
 .switch-label {
-  font-size: 90%;
+  margin: 0;
+  color: var(--zn-input-label-color);
+  font-size: var(--zn-input-label-font-size-medium);
+  font-weight: var(--zn-input-label-font-weight);
+  line-height: var(--zn-input-label-line-height);
+}
+
+.switch__wrapper--small .switch-label {
+  font-size: var(--zn-input-label-font-size-small);
+}
+
+.switch__wrapper--large .switch-label {
+  font-size: var(--zn-input-label-font-size-large);
 }
 
 .switch__control {
   pointer-events: none;
   position: absolute;
   top: 50%;
-  left: 3px;
-  width: 20px;
-  height: 20px;
+  left: 0.92px;
+  width: 20.32px;
+  height: 20.32px;
   border-radius: 50%;
   background: #fff;
-  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 1px 2px -1px;
+  box-shadow: 0 2px 4px 0 rgba(var(--zn-color-text), 0.1);
 
   transform: translateY(-50%);
-  transition: transform .3s ease-in-out, background-color .4s ease-in-out;
+  transition: left .3s ease-in-out, background-color .4s ease-in-out;
   outline: none;
 }
 
@@ -87,14 +110,36 @@
 
 :host([checked]) .switch__wrapper--small .switch__input-wrapper {
   .switch__control {
-    transform: translate(13px, -50%);
+    left: calc(100% - 14px - 0.92px);
   }
 }
 
+// Label position
+.switch__wrapper--label-left label,
+.switch__wrapper--label-right label {
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.switch__wrapper--label-left label {
+  flex-direction: row;
+}
+
+.switch__wrapper--label-right label {
+  flex-direction: row-reverse;
+}
+
 // Support inline label
+:host([inline]) {
+  display: inline-block;
+}
+
 .switch__wrapper--inline label {
+  flex: none;
+  flex-direction: row;
   align-items: center;
-  display: flex;
+  justify-content: flex-start;
   gap: 8px;
 
   .switch__input {
@@ -102,3 +147,7 @@
     margin-inline-end: 1px;
   }
 }
+
+.switch__wrapper--inline.switch__wrapper--label-right label {
+  flex-direction: row-reverse;
+}