feat: publish changed packages independently

packages/ui/components/DeviceFrame.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component DeviceFrame {
   outputs {
     change(payload: { device: string; orientation: string; sourceEvent: Event })
@@ -32,7 +30,6 @@ component DeviceFrame {
       <header><div>{#if title}<strong>{title}</strong>{/if}{#if description}<p>{description}</p>{/if}</div>{#if showToolbar}<div class="wire-next__device-actions" role="toolbar" aria-label="Preview device">{#each items as item}<button type="button" aria-pressed="{item.value === device}" @click="setDevice(item.value, event)">{item.label}</button>{/each}<button type="button" aria-label="Rotate preview" @click="rotateFrame(event)">↻</button></div>{/if}</header>
       <div class="wire-next__device-shell">{#if src || srcdoc}<iframe title="{frameTitle}" src="{src}" srcdoc="{srcdoc}" allow="{allow}"></iframe>{:else}<div class="wire-next__device-content"><slot /></div>{/if}</div>
     </section>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -106,5 +103,74 @@ component DeviceFrame {
         flex-direction: column;
       }
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }