@visitwonders/assembly 0.1.0

package/dist/form/toggle-group.css

@@ -0,0 +1,46 @@
+/* src/form/toggle-group.css */
+.fieldset_e5e69723c {
+  border: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1-5);
+}
+
+.legend_e5e69723c {
+  display: block;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
+  line-height: var(--line-height-normal);
+  margin-bottom: var(--spacing-1-5);
+  padding: 0;
+}
+
+.fieldset_e5e69723c[data-disabled="true"] .legend_e5e69723c {
+  color: var(--color-text-disabled);
+}
+
+.description_e5e69723c {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-1);
+}
+
+.options_e5e69723c {
+  display: flex;
+  gap: var(--spacing-4);
+}
+
+.options_e5e69723c[data-orientation="vertical"] {
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
+.options_e5e69723c[data-orientation="horizontal"] {
+  flex-flow: row wrap;
+  gap: var(--spacing-6);
+}

package/dist/form/toggle-group.js

@@ -0,0 +1,20 @@
+import "./toggle-group.css"
+import Component from '@glimmer/component';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+;
+
+class ToggleGroup extends Component {
+  get orientation() {
+    return this.args.orientation ?? 'vertical';
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<fieldset class=\"fieldset_e5e69723c\" data-orientation={{this.orientation}} data-disabled={{if @isDisabled \"true\"}} data-test-toggle-group ...attributes>\n  {{#if @label}}\n    <legend class=\"legend_e5e69723c\" data-test-toggle-group-legend>\n      {{@label}}\n    </legend>\n  {{/if}}\n\n  {{#if @description}}\n    <p class=\"description_e5e69723c\" data-test-toggle-group-description>\n      {{@description}}\n    </p>\n  {{/if}}\n\n  <div class=\"options_e5e69723c\" data-orientation={{this.orientation}} data-test-toggle-group-options>\n    {{yield}}\n  </div>\n</fieldset>", {
+      strictMode: true
+    }), this);
+  }
+}
+
+export { ToggleGroup as default };
+//# sourceMappingURL=toggle-group.js.map

package/dist/form/toggle-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/form/toggle.css

@@ -0,0 +1,206 @@
+/* src/form/toggle.css */
+.wrapper_eb612ecfd {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.label-wrapper_eb612ecfd {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  cursor: pointer;
+  user-select: none;
+}
+
+.wrapper_eb612ecfd[data-disabled="true"] .label-wrapper_eb612ecfd {
+  cursor: not-allowed;
+}
+
+/* Hide native input */
+.input_eb612ecfd {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* Track (switch background) */
+.track_eb612ecfd {
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  background-color: var(--color-bg-neutral-subtle);
+  border-radius: 999px;
+  transition: background-color 150ms ease;
+  padding: var(--spacing-0-5);
+}
+
+/* Track sizes - sm: 32x18, md: 40x22, lg: 48x26 */
+.wrapper_eb612ecfd[data-size="sm"] .track_eb612ecfd {
+  width: 32px;
+  height: 18px;
+}
+
+.wrapper_eb612ecfd[data-size="md"] .track_eb612ecfd {
+  width: 40px;
+  height: 22px;
+}
+
+.wrapper_eb612ecfd[data-size="lg"] .track_eb612ecfd {
+  width: 48px;
+  height: 26px;
+}
+
+/* Thumb (switch knob) */
+.thumb_eb612ecfd {
+  background-color: var(--white);
+  border-radius: 50%;
+  box-shadow: var(--shadow-sm);
+  transition:
+    transform 150ms ease,
+    box-shadow 150ms ease;
+}
+
+/* Thumb sizes - sm: 14px, md: 18px, lg: 22px */
+.wrapper_eb612ecfd[data-size="sm"] .thumb_eb612ecfd {
+  width: 14px;
+  height: 14px;
+}
+
+.wrapper_eb612ecfd[data-size="md"] .thumb_eb612ecfd {
+  width: 18px;
+  height: 18px;
+}
+
+.wrapper_eb612ecfd[data-size="lg"] .thumb_eb612ecfd {
+  width: 22px;
+  height: 22px;
+}
+
+/* Hover state (off) */
+.label-wrapper_eb612ecfd:hover .track_eb612ecfd:not(.checked_eb612ecfd) {
+  background-color: var(--color-bg-neutral);
+}
+
+.wrapper_eb612ecfd[data-disabled="true"] .label-wrapper_eb612ecfd:hover .track_eb612ecfd {
+  background-color: var(--color-bg-disabled);
+}
+
+/* Hover state - increase shadow */
+.label-wrapper_eb612ecfd:hover .thumb_eb612ecfd {
+  box-shadow: var(--shadow-md);
+}
+
+.wrapper_eb612ecfd[data-disabled="true"] .label-wrapper_eb612ecfd:hover .thumb_eb612ecfd {
+  box-shadow: var(--shadow-sm);
+}
+
+/* Focus state */
+.track_eb612ecfd.focused_eb612ecfd {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* Active state - scale thumb */
+.label-wrapper_eb612ecfd:active .thumb_eb612ecfd {
+  transform: scale(0.95);
+}
+
+/* Checked state - track */
+.track_eb612ecfd.checked_eb612ecfd {
+  background-color: var(--color-bg-fill-accent);
+}
+
+/* Checked + hover */
+.label-wrapper_eb612ecfd:hover .track_eb612ecfd.checked_eb612ecfd {
+  background-color: var(--color-bg-fill-accent-hover);
+}
+
+/* Checked state - thumb position */
+.wrapper_eb612ecfd[data-size="sm"] .track_eb612ecfd.checked_eb612ecfd .thumb_eb612ecfd {
+  transform: translateX(14px);
+}
+
+.wrapper_eb612ecfd[data-size="md"] .track_eb612ecfd.checked_eb612ecfd .thumb_eb612ecfd {
+  transform: translateX(18px);
+}
+
+.wrapper_eb612ecfd[data-size="lg"] .track_eb612ecfd.checked_eb612ecfd .thumb_eb612ecfd {
+  transform: translateX(22px);
+}
+
+/* Active + checked - maintain position with scale */
+.wrapper_eb612ecfd[data-size="sm"] .label-wrapper_eb612ecfd:active .track_eb612ecfd.checked_eb612ecfd .thumb_eb612ecfd {
+  transform: translateX(14px) scale(0.95);
+}
+
+.wrapper_eb612ecfd[data-size="md"] .label-wrapper_eb612ecfd:active .track_eb612ecfd.checked_eb612ecfd .thumb_eb612ecfd {
+  transform: translateX(18px) scale(0.95);
+}
+
+.wrapper_eb612ecfd[data-size="lg"] .label-wrapper_eb612ecfd:active .track_eb612ecfd.checked_eb612ecfd .thumb_eb612ecfd {
+  transform: translateX(22px) scale(0.95);
+}
+
+/* Disabled state - track */
+.wrapper_eb612ecfd[data-disabled="true"] .track_eb612ecfd {
+  background-color: var(--color-bg-disabled);
+}
+
+.wrapper_eb612ecfd[data-disabled="true"] .track_eb612ecfd.checked_eb612ecfd {
+  background-color: var(--color-bg-disabled);
+}
+
+/* Disabled state - thumb */
+.wrapper_eb612ecfd[data-disabled="true"] .thumb_eb612ecfd {
+  background-color: var(--color-bg-surface);
+  box-shadow: none;
+}
+
+/* Label */
+.label_eb612ecfd {
+  font-size: var(--font-size-md);
+  color: var(--color-text);
+  line-height: var(--line-height-normal);
+}
+
+.wrapper_eb612ecfd[data-size="sm"] .label_eb612ecfd {
+  font-size: var(--font-size-sm);
+}
+
+.wrapper_eb612ecfd[data-size="lg"] .label_eb612ecfd {
+  font-size: var(--font-size-lg);
+}
+
+.wrapper_eb612ecfd[data-disabled="true"] .label_eb612ecfd {
+  color: var(--color-text-disabled);
+}
+
+/* Required indicator */
+.required_eb612ecfd {
+  color: var(--color-text-critical);
+  margin-left: var(--spacing-0-5);
+}
+
+/* Description */
+.description_eb612ecfd {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  color: var(--color-text-secondary);
+}
+
+/* Description offset when label is at end (align under the label, not the toggle) */
+.wrapper_eb612ecfd[data-label-position="end"] .description_eb612ecfd {
+  margin-left: calc(var(--spacing-2) + 40px);
+}
+
+.wrapper_eb612ecfd[data-label-position="end"][data-size="sm"] .description_eb612ecfd {
+  margin-left: calc(var(--spacing-2) + 32px);
+}
+
+.wrapper_eb612ecfd[data-label-position="end"][data-size="lg"] .description_eb612ecfd {
+  margin-left: calc(var(--spacing-2) + 48px);
+}

package/dist/form/toggle.js

@@ -0,0 +1,103 @@
+import "./toggle.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+import { on } from '@ember/modifier';
+import { eq } from 'ember-truth-helpers';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime';
+
+;
+
+class Toggle extends Component {
+  static {
+    g(this.prototype, "internalChecked", [tracked]);
+  }
+  #internalChecked = (i(this, "internalChecked"), void 0);
+  static {
+    g(this.prototype, "isFocused", [tracked], function () {
+      return false;
+    });
+  }
+  #isFocused = (i(this, "isFocused"), void 0);
+  constructor(owner, args) {
+    super(owner, args);
+    this.internalChecked = args.defaultChecked ?? false;
+  }
+  guid = guidFor(this);
+  get inputId() {
+    return this.args.id ?? this.guid;
+  }
+  get descriptionId() {
+    return `${this.guid}-description`;
+  }
+  get size() {
+    return this.args.size ?? 'md';
+  }
+  get labelPosition() {
+    return this.args.labelPosition ?? 'start';
+  }
+  get value() {
+    return this.args.value ?? 'on';
+  }
+  get isControlled() {
+    return this.args.checked !== undefined;
+  }
+  get checked() {
+    return this.isControlled ? this.args.checked ?? false : this.internalChecked;
+  }
+  get hasLabel() {
+    return !!this.args.label;
+  }
+  get hasDescription() {
+    return !!this.args.description;
+  }
+  get ariaDescribedBy() {
+    if (this.args['aria-describedby']) {
+      return this.args['aria-describedby'];
+    }
+    if (this.hasDescription) {
+      return this.descriptionId;
+    }
+    return undefined;
+  }
+  handleChange(event) {
+    const target = event.target;
+    const newChecked = target.checked;
+    if (!this.isControlled) {
+      this.internalChecked = newChecked;
+    }
+    this.args.onChange?.(newChecked);
+  }
+  static {
+    n(this.prototype, "handleChange", [action]);
+  }
+  handleFocus() {
+    this.isFocused = true;
+    this.args.onFocus?.();
+  }
+  static {
+    n(this.prototype, "handleFocus", [action]);
+  }
+  handleBlur() {
+    this.isFocused = false;
+    this.args.onBlur?.();
+  }
+  static {
+    n(this.prototype, "handleBlur", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"wrapper_eb612ecfd\" data-size={{this.size}} data-label-position={{this.labelPosition}} data-disabled={{if @isDisabled \"true\"}} data-test-toggle-wrapper ...attributes>\n  <label class=\"label-wrapper_eb612ecfd\">\n    {{#if this.hasLabel}}\n      {{#if (eq this.labelPosition \"start\")}}\n        <span class=\"label_eb612ecfd\" data-test-toggle-label>\n          {{@label}}\n          {{#if @isRequired}}\n            <span class=\"required_eb612ecfd\">*</span>\n          {{/if}}\n        </span>\n      {{/if}}\n    {{/if}}\n\n    <input id={{this.inputId}} type=\"checkbox\" role=\"switch\" class=\"input_eb612ecfd\" name={{@name}} value={{this.value}} checked={{this.checked}} disabled={{@isDisabled}} required={{@isRequired}} aria-checked={{if this.checked \"true\" \"false\"}} aria-describedby={{this.ariaDescribedBy}} {{on \"change\" this.handleChange}} {{on \"focus\" this.handleFocus}} {{on \"blur\" this.handleBlur}} data-test-toggle />\n\n    <span class=\"track_eb612ecfd\n        {{if this.checked \"checked_eb612ecfd\"}}\n        {{if this.isFocused \"focused_eb612ecfd\"}}\" data-focused={{if this.isFocused \"true\"}} data-test-toggle-track>\n      <span class=\"thumb_eb612ecfd\" data-test-toggle-thumb></span>\n    </span>\n\n    {{#if this.hasLabel}}\n      {{#if (eq this.labelPosition \"end\")}}\n        <span class=\"label_eb612ecfd\" data-test-toggle-label>\n          {{@label}}\n          {{#if @isRequired}}\n            <span class=\"required_eb612ecfd\">*</span>\n          {{/if}}\n        </span>\n      {{/if}}\n    {{/if}}\n  </label>\n\n  {{#if this.hasDescription}}\n    <p id={{this.descriptionId}} class=\"description_eb612ecfd\" data-test-toggle-description>\n      {{@description}}\n    </p>\n  {{/if}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        eq,
+        on
+      })
+    }), this);
+  }
+}
+
+export { Toggle as default };
+//# sourceMappingURL=toggle.js.map

package/dist/form/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/index.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/layout/divider-css-1ba104b9c606cbd1f542b45640fb5f2b.css

@@ -0,0 +1,122 @@
+/* <inline>/src/layout/divider-css-1ba104b9c606cbd1f542b45640fb5f2b.css */
+
+  .divider_e11f7c205 {
+    display: flex;
+    align-items: center;
+  }
+
+  /* Orientation */
+  .divider_e11f7c205[data-orientation="horizontal"] {
+    flex-direction: row;
+    width: 100%;
+  }
+
+  .divider_e11f7c205[data-orientation="vertical"] {
+    flex-direction: column;
+    height: 100%;
+    align-self: stretch;
+    min-height: 1rem;
+  }
+
+  /* Line styles */
+  .divider__line_e11f7c205 {
+    flex: 1;
+    border: none;
+    margin: 0;
+  }
+
+  .divider_e11f7c205[data-orientation="horizontal"] .divider__line_e11f7c205 {
+    height: var(--border-width-1);
+    width: auto;
+  }
+
+  .divider_e11f7c205[data-orientation="vertical"] .divider__line_e11f7c205 {
+    width: var(--border-width-1);
+    height: auto;
+    min-height: 0.5rem;
+  }
+
+  /* Variants */
+  .divider_e11f7c205[data-variant="default"] .divider__line_e11f7c205 {
+    background-color: var(--color-border-subtle);
+  }
+
+  .divider_e11f7c205[data-variant="subtle"] .divider__line_e11f7c205 {
+    background-color: var(--color-border-subtle);
+    opacity: 0.5;
+  }
+
+  .divider_e11f7c205[data-variant="strong"] .divider__line_e11f7c205 {
+    background-color: var(--color-border);
+  }
+
+  /* Spacing - Horizontal */
+  .divider_e11f7c205[data-orientation="horizontal"][data-spacing="none"] {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .divider_e11f7c205[data-orientation="horizontal"][data-spacing="sm"] {
+    margin-top: var(--spacing-gap-sm);
+    margin-bottom: var(--spacing-gap-sm);
+  }
+
+  .divider_e11f7c205[data-orientation="horizontal"][data-spacing="md"] {
+    margin-top: var(--spacing-gap-md);
+    margin-bottom: var(--spacing-gap-md);
+  }
+
+  .divider_e11f7c205[data-orientation="horizontal"][data-spacing="lg"] {
+    margin-top: var(--spacing-gap-lg);
+    margin-bottom: var(--spacing-gap-lg);
+  }
+
+  /* Spacing - Vertical */
+  .divider_e11f7c205[data-orientation="vertical"][data-spacing="none"] {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .divider_e11f7c205[data-orientation="vertical"][data-spacing="sm"] {
+    margin-left: var(--spacing-gap-sm);
+    margin-right: var(--spacing-gap-sm);
+  }
+
+  .divider_e11f7c205[data-orientation="vertical"][data-spacing="md"] {
+    margin-left: var(--spacing-gap-md);
+    margin-right: var(--spacing-gap-md);
+  }
+
+  .divider_e11f7c205[data-orientation="vertical"][data-spacing="lg"] {
+    margin-left: var(--spacing-gap-lg);
+    margin-right: var(--spacing-gap-lg);
+  }
+
+  /* Label */
+  .divider__label_e11f7c205 {
+    flex-shrink: 0;
+    color: var(--color-text-tertiary);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+  }
+
+  .divider_e11f7c205[data-orientation="horizontal"] .divider__label_e11f7c205 {
+    padding-left: var(--spacing-gap-md);
+    padding-right: var(--spacing-gap-md);
+  }
+
+  .divider_e11f7c205[data-orientation="vertical"] .divider__label_e11f7c205 {
+    padding-top: var(--spacing-gap-sm);
+    padding-bottom: var(--spacing-gap-sm);
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+  }
+
+  /* Label positioning - hide lines based on position */
+  .divider_e11f7c205[data-label-position="start"] .divider__line--start_e11f7c205 {
+    display: none;
+  }
+
+  .divider_e11f7c205[data-label-position="end"] .divider__line--end_e11f7c205 {
+    display: none;
+  }

package/dist/layout/divider.js

@@ -0,0 +1,35 @@
+import "./divider-css-1ba104b9c606cbd1f542b45640fb5f2b.css"
+import Component from '@glimmer/component';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+;
+
+class Divider extends Component {
+  get orientation() {
+    return this.args.orientation ?? 'horizontal';
+  }
+  get variant() {
+    return this.args.variant ?? 'default';
+  }
+  get spacing() {
+    return this.args.spacing ?? 'md';
+  }
+  get labelPosition() {
+    return this.args.labelPosition ?? 'center';
+  }
+  get decorative() {
+    return this.args.decorative ?? true;
+  }
+  get ariaOrientation() {
+    return this.orientation === 'vertical' ? 'vertical' : undefined;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("\n\n<div class=\"divider_e11f7c205\" role=\"separator\" aria-orientation={{this.ariaOrientation}} aria-hidden={{if this.decorative \"true\"}} data-orientation={{this.orientation}} data-variant={{this.variant}} data-spacing={{this.spacing}} data-label-position={{if @label this.labelPosition}} ...attributes>\n  {{#if @label}}\n    <span class=\"divider__line_e11f7c205 divider__line--start_e11f7c205\"></span>\n    <span class=\"divider__label_e11f7c205\">{{@label}}</span>\n    <span class=\"divider__line_e11f7c205 divider__line--end_e11f7c205\"></span>\n  {{else}}\n    <span class=\"divider__line_e11f7c205\"></span>\n  {{/if}}\n</div>", {
+      strictMode: true
+    }), this);
+  }
+}
+
+export { Divider as default };
+//# sourceMappingURL=divider.js.map

package/dist/layout/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}