@visitwonders/assembly 0.1.0 → 0.3.0

package/dist/layout/panel.css

@@ -0,0 +1,229 @@
+/* src/layout/panel.css */
+/* ===================================
+ * Panel Component
+ * =================================== */
+
+.panel_efcbf2ade {
+  /* Layout */
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  /* Shape */
+  overflow: hidden;
+}
+
+/* ===================================
+ * Border Radius
+ * =================================== */
+
+.panel_efcbf2ade[data-border-radius="sm"] {
+  border-radius: var(--radius-sm);
+}
+
+.panel_efcbf2ade[data-border-radius="md"] {
+  border-radius: var(--radius-md);
+}
+
+.panel_efcbf2ade[data-border-radius="lg"] {
+  border-radius: var(--radius-lg);
+}
+
+/* ===================================
+ * Elevation
+ * =================================== */
+
+.panel_efcbf2ade[data-elevation="sm"] {
+  box-shadow: var(--shadow-sm);
+}
+
+.panel_efcbf2ade[data-elevation="md"] {
+  box-shadow: var(--shadow-md);
+}
+
+/* ===================================
+ * Variant: Subtle
+ * =================================== */
+
+.panel_efcbf2ade[data-variant="subtle"][data-tone="neutral"] {
+  background: var(--color-bg-neutral-subtle);
+  color: var(--color-text);
+}
+
+.panel_efcbf2ade[data-variant="subtle"][data-tone="primary"] {
+  background: var(--color-bg-primary-subtle);
+  color: var(--color-text-primary);
+}
+
+.panel_efcbf2ade[data-variant="subtle"][data-tone="success"] {
+  background: var(--color-bg-success-subtle);
+  color: var(--color-text-success);
+}
+
+.panel_efcbf2ade[data-variant="subtle"][data-tone="warning"] {
+  background: var(--color-bg-warning-subtle);
+  color: var(--color-text-warning);
+}
+
+.panel_efcbf2ade[data-variant="subtle"][data-tone="critical"] {
+  background: var(--color-bg-critical-subtle);
+  color: var(--color-text-critical);
+}
+
+.panel_efcbf2ade[data-variant="subtle"][data-tone="info"] {
+  background: var(--color-bg-info-subtle);
+  color: var(--color-text-info);
+}
+
+/* ===================================
+ * Variant: Outline
+ * =================================== */
+
+.panel_efcbf2ade[data-variant="outline"] {
+  background: var(--color-bg-surface);
+  color: var(--color-text);
+}
+
+.panel_efcbf2ade[data-variant="outline"][data-tone="neutral"] {
+  border: 1px solid var(--color-border);
+}
+
+.panel_efcbf2ade[data-variant="outline"][data-tone="primary"] {
+  border: 1px solid var(--color-border-primary);
+}
+
+.panel_efcbf2ade[data-variant="outline"][data-tone="success"] {
+  border: 1px solid var(--color-border-success);
+}
+
+.panel_efcbf2ade[data-variant="outline"][data-tone="warning"] {
+  border: 1px solid var(--color-border-warning);
+}
+
+.panel_efcbf2ade[data-variant="outline"][data-tone="critical"] {
+  border: 1px solid var(--color-border-critical);
+}
+
+.panel_efcbf2ade[data-variant="outline"][data-tone="info"] {
+  border: 1px solid var(--color-border-info);
+}
+
+/* ===================================
+ * Variant: Filled
+ * =================================== */
+
+.panel_efcbf2ade[data-variant="filled"][data-tone="neutral"] {
+  background: var(--color-bg-fill-neutral);
+  color: var(--color-text-on-neutral);
+}
+
+.panel_efcbf2ade[data-variant="filled"][data-tone="primary"] {
+  background: var(--color-bg-fill-primary);
+  color: var(--color-text-on-primary);
+}
+
+.panel_efcbf2ade[data-variant="filled"][data-tone="success"] {
+  background: var(--color-bg-fill-success);
+  color: var(--color-text-on-success);
+}
+
+.panel_efcbf2ade[data-variant="filled"][data-tone="warning"] {
+  background: var(--color-bg-fill-warning);
+  color: var(--color-text-on-warning);
+}
+
+.panel_efcbf2ade[data-variant="filled"][data-tone="critical"] {
+  background: var(--color-bg-fill-critical);
+  color: var(--color-text-on-critical);
+}
+
+.panel_efcbf2ade[data-variant="filled"][data-tone="info"] {
+  background: var(--color-bg-fill-info);
+  color: var(--color-text-on-info);
+}
+
+/* ===================================
+ * Sections (Header, Body, Footer)
+ * =================================== */
+
+.panel-header_efcbf2ade,
+.panel-body_efcbf2ade,
+.panel-footer_efcbf2ade {
+  /* Inherit text color from panel */
+  color: inherit;
+}
+
+/* Padding: none */
+.panel_efcbf2ade[data-padding="none"] .panel-header_efcbf2ade,
+.panel_efcbf2ade[data-padding="none"] .panel-footer_efcbf2ade {
+  padding: var(--spacing-3) 0;
+}
+
+.panel_efcbf2ade[data-padding="none"] .panel-body_efcbf2ade {
+  padding: 0;
+}
+
+/* Padding: sm */
+.panel_efcbf2ade[data-padding="sm"] .panel-header_efcbf2ade,
+.panel_efcbf2ade[data-padding="sm"] .panel-footer_efcbf2ade {
+  padding: var(--spacing-3) var(--spacing-3);
+}
+
+.panel_efcbf2ade[data-padding="sm"] .panel-body_efcbf2ade {
+  padding: var(--spacing-3);
+}
+
+/* Padding: md */
+.panel_efcbf2ade[data-padding="md"] .panel-header_efcbf2ade,
+.panel_efcbf2ade[data-padding="md"] .panel-footer_efcbf2ade {
+  padding: var(--spacing-3) var(--spacing-4);
+}
+
+.panel_efcbf2ade[data-padding="md"] .panel-body_efcbf2ade {
+  padding: var(--spacing-4);
+}
+
+/* Padding: lg */
+.panel_efcbf2ade[data-padding="lg"] .panel-header_efcbf2ade,
+.panel_efcbf2ade[data-padding="lg"] .panel-footer_efcbf2ade {
+  padding: var(--spacing-3) var(--spacing-6);
+}
+
+.panel_efcbf2ade[data-padding="lg"] .panel-body_efcbf2ade {
+  padding: var(--spacing-6);
+}
+
+/* ===================================
+ * Section Separators
+ * =================================== */
+
+/* Subtle + Outline variants use subtle border */
+.panel_efcbf2ade[data-variant="subtle"] .panel-header_efcbf2ade,
+.panel_efcbf2ade[data-variant="outline"] .panel-header_efcbf2ade {
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+
+.panel_efcbf2ade[data-variant="subtle"] .panel-footer_efcbf2ade,
+.panel_efcbf2ade[data-variant="outline"] .panel-footer_efcbf2ade {
+  border-top: 1px solid var(--color-border-subtle);
+}
+
+/* Filled variant uses translucent white border */
+.panel_efcbf2ade[data-variant="filled"] .panel-header_efcbf2ade {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.panel_efcbf2ade[data-variant="filled"] .panel-footer_efcbf2ade {
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* Warning/neutral filled use dark separator for contrast on light fills */
+.panel_efcbf2ade[data-variant="filled"][data-tone="warning"] .panel-header_efcbf2ade,
+.panel_efcbf2ade[data-variant="filled"][data-tone="neutral"] .panel-header_efcbf2ade {
+  border-bottom-color: rgba(0, 0, 0, 0.1);
+}
+
+.panel_efcbf2ade[data-variant="filled"][data-tone="warning"] .panel-footer_efcbf2ade,
+.panel_efcbf2ade[data-variant="filled"][data-tone="neutral"] .panel-footer_efcbf2ade {
+  border-top-color: rgba(0, 0, 0, 0.1);
+}

package/dist/layout/panel.js

@@ -0,0 +1,32 @@
+import "./panel.css"
+import Component from '@glimmer/component';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+;
+
+class Panel extends Component {
+  get tone() {
+    return this.args.tone ?? 'neutral';
+  }
+  get variant() {
+    return this.args.variant ?? 'subtle';
+  }
+  get elevation() {
+    return this.args.elevation ?? 'none';
+  }
+  get padding() {
+    return this.args.padding ?? 'md';
+  }
+  get borderRadius() {
+    return this.args.borderRadius ?? 'lg';
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"panel_efcbf2ade\" data-tone={{this.tone}} data-variant={{this.variant}} data-elevation={{this.elevation}} data-padding={{this.padding}} data-border-radius={{this.borderRadius}} data-test-panel ...attributes>\n  {{#if (has-block \"header\")}}\n    <div class=\"panel-header_efcbf2ade\" data-test-panel-header>\n      {{yield to=\"header\"}}\n    </div>\n  {{/if}}\n\n  <div class=\"panel-body_efcbf2ade\" data-test-panel-body>\n    {{yield}}\n  </div>\n\n  {{#if (has-block \"footer\")}}\n    <div class=\"panel-footer_efcbf2ade\" data-test-panel-footer>\n      {{yield to=\"footer\"}}\n    </div>\n  {{/if}}\n</div>", {
+      strictMode: true
+    }), this);
+  }
+}
+
+export { Panel as default };
+//# sourceMappingURL=panel.js.map

package/dist/layout/panel.js.map

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

package/dist/overlay/blanket.css

@@ -1,9 +1,10 @@
+/* src/overlay/blanket.css */
 /* ===================================
  * Blanket Component
  * Full-screen overlay backdrop
  * =================================== */
 
-.blanket {
+.blanket_e68ef6998 {
   /* Positioning */
   position: fixed;
   inset: 0;
@@ -17,15 +18,15 @@
  * Opacity Variants
  * =================================== */
 
-.blanket[data-opacity="light"] {
+.blanket_e68ef6998[data-opacity="light"] {
   background: rgba(0, 0, 0, 0.3);
 }
 
-.blanket[data-opacity="default"] {
+.blanket_e68ef6998[data-opacity="default"] {
   background: rgba(0, 0, 0, 0.5);
 }
 
-.blanket[data-opacity="heavy"] {
+.blanket_e68ef6998[data-opacity="heavy"] {
   background: rgba(0, 0, 0, 0.8);
 }
 
@@ -34,16 +35,16 @@
  * =================================== */
 
 /* Fade in (visible state) */
-.blanket[data-animated="true"][data-state="visible"] {
-  animation: blanket-fade-in var(--duration-200) var(--easing-out);
+.blanket_e68ef6998[data-animated="true"][data-state="visible"] {
+  animation: blanket-fade-in__e68ef6998 var(--duration-200) var(--easing-out);
 }
 
 /* Fade out (hidden state) */
-.blanket[data-animated="true"][data-state="hidden"] {
-  animation: blanket-fade-out var(--duration-150) var(--easing-in) forwards;
+.blanket_e68ef6998[data-animated="true"][data-state="hidden"] {
+  animation: blanket-fade-out__e68ef6998 var(--duration-150) var(--easing-in) forwards;
 }
 
-@keyframes blanket-fade-in {
+@keyframes blanket-fade-in__e68ef6998 {
   from {
     opacity: 0;
   }
@@ -52,7 +53,7 @@
   }
 }
 
-@keyframes blanket-fade-out {
+@keyframes blanket-fade-out__e68ef6998 {
   from {
     opacity: 1;
   }
@@ -62,6 +63,6 @@
 }
 
 /* No animation */
-.blanket[data-animated="false"] {
+.blanket_e68ef6998[data-animated="false"] {
   animation: none;
 }

package/dist/overlay/blanket.js

@@ -126,7 +126,7 @@ class Blanket extends Component {
   // Template
   // ============================================================================
   static {
-    setComponentTemplate(precompileTemplate("{{!-- Track visibility changes to manage exit animation state --}}\n<span hidden {{this.trackVisibility visible=@visible animated=this.animated}} data-test-blanket-tracker></span>\n\n{{#if this.shouldRender}}\n  {{#in-element this.destinationElement insertBefore=null}}\n    {{!-- template-lint-disable no-invalid-interactive --}}\n    <div class=\"blanket\" aria-hidden=\"true\" data-opacity={{this.opacity}} data-animated={{if this.animated \"true\" \"false\"}} data-state={{this.dataState}} style={{this.zIndexStyle}} {{on \"click\" this.handleClick}} {{on \"animationend\" this.handleAnimationEnd}} {{this.scrollLock enabled=this.lockScroll}} data-test-blanket ...attributes>\n      {{yield}}\n    </div>\n  {{/in-element}}\n{{/if}}", {
+    setComponentTemplate(precompileTemplate("{{!-- Track visibility changes to manage exit animation state --}}\n<span hidden {{this.trackVisibility visible=@visible animated=this.animated}} data-test-blanket-tracker></span>\n\n{{#if this.shouldRender}}\n  {{#in-element this.destinationElement insertBefore=null}}\n    {{!-- template-lint-disable no-invalid-interactive --}}\n    <div class=\"blanket_e68ef6998\" aria-hidden=\"true\" data-opacity={{this.opacity}} data-animated={{if this.animated \"true\" \"false\"}} data-state={{this.dataState}} style={{this.zIndexStyle}} {{on \"click\" this.handleClick}} {{on \"animationend\" this.handleAnimationEnd}} {{this.scrollLock enabled=this.lockScroll}} data-test-blanket ...attributes>\n      {{yield}}\n    </div>\n  {{/in-element}}\n{{/if}}", {
       strictMode: true,
       scope: () => ({
         on