@microsoft/webui-framework 0.0.8 → 0.0.9

package/dist/decorators.d.ts

@@ -1,3 +1,5 @@
+/** Convert camelCase to kebab-case for attribute reflection. */
+export declare function toKebabCase(str: string): string;
 export declare function getObservableNames(ctor: Function): Set<string>;
 /**
  * Marks a property as observable. When the value changes the decorator will:

package/dist/decorators.js

@@ -9,9 +9,74 @@
 // ---------------------------------------------------------------------------
 // Internal helpers
 // ---------------------------------------------------------------------------
+/**
+ * Map of camelCase property names to their HTML attribute names.
+ *
+ * Covers two categories of irregular mappings:
+ *
+ * 1. Multi-word ARIA attributes — concatenated lowercase after `aria-`
+ *    (e.g., `ariaDescribedBy` → `aria-describedby`), per the ARIAMixin spec.
+ * 2. HTML global/element attributes — concatenated lowercase attribute names
+ *    with camelCase property counterparts (e.g., `readOnly` → `readonly`).
+ */
+const propertyToAttribute = Object.assign(Object.create(null), {
+    // --- ARIA (ARIAMixin) ---
+    ariaActiveDescendant: 'aria-activedescendant',
+    ariaAutoComplete: 'aria-autocomplete',
+    ariaBrailleLabel: 'aria-braillelabel',
+    ariaBrailleRoleDescription: 'aria-brailleroledescription',
+    ariaColCount: 'aria-colcount',
+    ariaColIndex: 'aria-colindex',
+    ariaColIndexText: 'aria-colindextext',
+    ariaColSpan: 'aria-colspan',
+    ariaDescribedBy: 'aria-describedby',
+    ariaDropEffect: 'aria-dropeffect',
+    ariaErrorMessage: 'aria-errormessage',
+    ariaFlowTo: 'aria-flowto',
+    ariaHasPopup: 'aria-haspopup',
+    ariaKeyShortcuts: 'aria-keyshortcuts',
+    ariaLabelledBy: 'aria-labelledby',
+    ariaMultiLine: 'aria-multiline',
+    ariaMultiSelectable: 'aria-multiselectable',
+    ariaPosInSet: 'aria-posinset',
+    ariaReadOnly: 'aria-readonly',
+    ariaRoleDescription: 'aria-roledescription',
+    ariaRowCount: 'aria-rowcount',
+    ariaRowIndex: 'aria-rowindex',
+    ariaRowIndexText: 'aria-rowindextext',
+    ariaRowSpan: 'aria-rowspan',
+    ariaSetSize: 'aria-setsize',
+    ariaValueMax: 'aria-valuemax',
+    ariaValueMin: 'aria-valuemin',
+    ariaValueNow: 'aria-valuenow',
+    ariaValueText: 'aria-valuetext',
+    // --- HTML global/element attributes ---
+    accessKey: 'accesskey',
+    autoCapitalize: 'autocapitalize',
+    contentEditable: 'contenteditable',
+    crossOrigin: 'crossorigin',
+    dirName: 'dirname',
+    fetchPriority: 'fetchpriority',
+    formAction: 'formaction',
+    formEnctype: 'formenctype',
+    formMethod: 'formmethod',
+    formNoValidate: 'formnovalidate',
+    formTarget: 'formtarget',
+    inputMode: 'inputmode',
+    isMap: 'ismap',
+    maxLength: 'maxlength',
+    minLength: 'minlength',
+    noModule: 'nomodule',
+    noValidate: 'novalidate',
+    readOnly: 'readonly',
+    referrerPolicy: 'referrerpolicy',
+    tabIndex: 'tabindex',
+    useMap: 'usemap',
+});
 /** Convert camelCase to kebab-case for attribute reflection. */
-function toKebabCase(str) {
-    return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+export function toKebabCase(str) {
+    const mapped = propertyToAttribute[str];
+    return mapped ?? str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
 }
 /**
  * Shared logic for installing a reactive getter/setter on a class prototype.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/webui-framework",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "type": "module",
   "description": "WebUI Framework Next — Preact-inspired lightweight Web Component runtime with SSR hydration. 15KB minified, compiled-template path mapping, no hydration markers.",
   "license": "MIT",
@@ -19,7 +19,7 @@
     "@playwright/test": "^1.58.2",
     "@types/node": "^25.3.5",
     "typescript": "^5.9.3",
-    "@microsoft/webui-test-support": "0.0.8"
+    "@microsoft/webui-test-support": "0.0.9"
   },
   "scripts": {
     "build": "tsc",