@grayscale-dev/dragon 0.1.3 → 0.1.5

package/README.md

@@ -9,13 +9,21 @@ npm install
 npm --workspace packages/ui run build
 ```
 
+**Manifest Build**
+
+```bash
+npm --workspace packages/ui run build:manifest
+```
+
+`build` always generates `dist/manifest.json` and validates it with zod.
+
 **Unit Tests**
 
 ```bash
 npm --workspace packages/ui run test
 ```
 
-Covers value/property sync, native `input`/`change` events, form association, focus forwarding, and styling hooks.
+Covers value/property sync, native `input`/`change` events, form association, focus forwarding, styling hooks, and manifest integrity.
 
 **Usage (Vanilla)**
 
@@ -71,6 +79,25 @@ function handleInput(e: Event) {
 </template>
 ```
 
+**Manifest Consumption**
+
+Machine-readable docs/theme-builder metadata is exported at `@grayscale-dev/dragon/manifest`.
+
+```ts
+import manifest from '@grayscale-dev/dragon/manifest';
+
+for (const component of manifest.components) {
+  console.log(component.tag, component.cssTokens.length);
+}
+```
+
+Generate docs/theme controls from this manifest only, so package metadata remains your single source of truth.
+
+**Metadata Files**
+
+- `dist/manifest.json`: Dragon UI docs/theme-builder metadata (tokens, controls, builder groups, option enums).
+- `custom-elements.json`: optional Web Components API standard file (not currently generated in this package).
+
 **Styling**
 
 CSS custom properties:
@@ -84,6 +111,12 @@ CSS custom properties:
 - `--ui-input-placeholder-color`
 - `--ui-input-focus-ring`
 - `--ui-input-label-font-size`
+- `--ui-input-label-color`
+- `--ui-input-floating-label-left`
+- `--ui-input-floating-padding-top`
+- `--ui-input-floating-padding-right`
+- `--ui-input-floating-padding-bottom`
+- `--ui-input-floating-padding-left`
 
 Default size values in `<dui-input>` are pixel-based.
 

package/dist/index.js

@@ -102,11 +102,12 @@ e.styles = h`
 
     .field.floating label {
       position: absolute;
-      left: var(--ui-input-floating-label-left, 12px);
+      left: var(--ui-input-floating-label-left, var(--ui-input-floating-padding-left, 12px));
       top: 50%;
       transform: translateY(-50%);
+      transform-origin: left center;
       margin: 0;
-      padding: 0 4px;
+      padding: 0;
       background: var(--ui-input-bg, #ffffff);
       color: var(--ui-input-placeholder-color, #9aa4b2);
       pointer-events: none;
@@ -115,8 +116,8 @@ e.styles = h`
 
     .field.floating[data-has-value='true'] label,
     :host(:focus-within) .field.floating label {
-      top: 6px;
-      transform: translateY(0) scale(0.85);
+      top: 7px;
+      transform: scale(0.85);
       color: var(--ui-input-label-color, #475569);
     }
 
@@ -151,9 +152,9 @@ e.styles = h`
     }
 
     .field.floating input {
-      padding-top: var(--ui-input-floating-padding-top, 15px);
+      padding-top: var(--ui-input-floating-padding-top, 22px);
       padding-right: var(--ui-input-floating-padding-right, 12px);
-      padding-bottom: var(--ui-input-floating-padding-bottom, 7px);
+      padding-bottom: var(--ui-input-floating-padding-bottom, 8px);
       padding-left: var(--ui-input-floating-padding-left, 12px);
     }
   `;

package/dist/manifest/build-manifest.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/manifest/components/dui-input.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifest } from '../schema.js';
+export declare const duiInputManifest: ComponentManifest;

package/dist/manifest/index.d.ts

@@ -0,0 +1,5 @@
+import { type DragonManifest } from './schema.js';
+export declare const manifest: DragonManifest;
+export declare function getManifest(): DragonManifest;
+export { ManifestSchema, AttributeMetaSchema, PropertyMetaSchema, EventMetaSchema, PartMetaSchema, CssTokenMetaSchema, BuilderMetaSchema, ComponentManifestSchema } from './schema.js';
+export type { DragonManifest, ComponentManifest, AttributeMeta, PropertyMeta, EventMeta, PartMeta, CssTokenMeta, BuilderMeta, BuilderControl } from './schema.js';