@microsoft/fast-html 1.0.0-alpha.40 → 1.0.0-alpha.42

package/README.md

@@ -313,13 +313,36 @@ Where the right operand can be either a reference to a value (string e.g. `{{foo
     <ul><f-repeat value="{{item in list}}"><li>{{item}}</li></f-repeat></ul>
     ```
 
-    Should you need to refer to the parent element (not the individual item in the list), you can use the context of a previous repeat, or no context which will resolve to the custom element.
+    Bindings inside `<f-repeat>` without a context prefix resolve to the custom element. For example, `{{title}}` below resolves to the host element's `title` property:
 
-    Example:
     ```html
     <ul><f-repeat value="{{item in list}}"><li>{{item}} - {{title}}</li></f-repeat></ul>
     ```
 
+#### Execution Context Access
+
+In imperative fast-element templates, every binding expression receives both the data source and the execution context: `${(x, c) => c.parent.handleClick(c.event)}`. Declarative `<f-template>` expressions can access the same execution context using the `$c` prefix.
+
+This is particularly useful inside `<f-repeat>`, where `$c.parent` refers to the parent view-model (typically the host element) and `$c.event` provides the DOM event.
+
+Event handler with context access:
+
+```html
+<f-repeat value="{{item in items}}">
+    <button @click="{$c.parent.handleItemClick($c.event)}">{{item.name}}</button>
+</f-repeat>
+```
+
+Conditional rendering using a host property inside a repeat:
+
+```html
+<f-repeat value="{{item in items}}">
+    <f-when value="{{$c.parent.showNames}}">
+        <span>{{item.name}}</span>
+    </f-when>
+</f-repeat>
+```
+
 #### Unescaped HTML
 
 You can add unescaped HTML using triple braces, this will create an additional `div` element as the HTML needs an element to bind to. Where possible it is advisable to not use unescaped HTML and instead use other binding techniques.

package/dist/dts/components/syntax.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Default syntax for FAST declarative templates
+ */
+export declare const attributeDirectivePrefix: string, clientSideCloseExpression: string, clientSideOpenExpression: string, closeExpression: string, executionContextAccessor: string, openExpression: string, repeatDirectiveClose: string, repeatDirectiveOpen: string, unescapedCloseExpression: string, unescapedOpenExpression: string, whenDirectiveClose: string, whenDirectiveOpen: string;

package/dist/dts/components/utilities.d.ts

@@ -40,6 +40,7 @@ export interface ChildrenMap {
     customElementName: string;
     attributeName: string;
 }
+export declare const contextPrefixDot: string;
 declare const LogicalOperator: {
     AND: string;
     OR: string;
@@ -115,13 +116,14 @@ export declare function getExpressionChain(value: string): ChainedExpression | v
  */
 export declare function transformInnerHTML(innerHTML: string, index?: number): string;
 /**
- * Resolves f-when
+ * Resolves boolean logic
+ * used for f-when and boolean attributes
  * @param self - Where the first item in the path path refers to the item itself (used by repeat).
  * @param chainedExpression - The chained expression which includes the expression and the next expression
  * if there is another in the chain
  * @returns - A binding that resolves the chained expression logic
  */
-export declare function resolveWhen(rootPropertyName: string | null, expression: ChainedExpression, parentContext: string | null, level: number, schema: Schema): (x: boolean, c: any) => any;
+export declare function getBooleanBinding(rootPropertyName: string | null, expression: ChainedExpression, parentContext: string | null, level: number, schema: Schema): (x: boolean, c: any) => any;
 /**
  * Find a definition
  * This may exist as a $ref at the root or as a $ref in any anyOf or not at all

package/dist/esm/components/syntax.js

@@ -0,0 +1,17 @@
+/**
+ * Default syntax for FAST declarative templates
+ */
+export const { attributeDirectivePrefix, clientSideCloseExpression, clientSideOpenExpression, closeExpression, executionContextAccessor, openExpression, repeatDirectiveClose, repeatDirectiveOpen, unescapedCloseExpression, unescapedOpenExpression, whenDirectiveClose, whenDirectiveOpen, } = {
+    attributeDirectivePrefix: "f-",
+    clientSideCloseExpression: "}",
+    clientSideOpenExpression: "{",
+    closeExpression: "}}",
+    executionContextAccessor: "$c",
+    openExpression: "{{",
+    unescapedCloseExpression: "}}}",
+    unescapedOpenExpression: "{{{",
+    repeatDirectiveClose: "</f-repeat>",
+    repeatDirectiveOpen: "<f-repeat",
+    whenDirectiveClose: "</f-when>",
+    whenDirectiveOpen: "<f-when",
+};

package/dist/esm/components/template.js

@@ -3,7 +3,7 @@ import { attr, children, elements, FAST, FASTElement, FASTElementDefinition, fas
 import "@microsoft/fast-element/install-hydratable-view-templates.js";
 import { ObserverMap } from "./observer-map.js";
 import { Schema } from "./schema.js";
-import { bindingResolver, getExpressionChain, getNextBehavior, getRootPropertyName, resolveWhen, transformInnerHTML, } from "./utilities.js";
+import { bindingResolver, contextPrefixDot, getBooleanBinding, getExpressionChain, getNextBehavior, getRootPropertyName, transformInnerHTML, } from "./utilities.js";
 /**
  * Values for the observerMap element option.
  */
@@ -69,24 +69,24 @@ class TemplateElement extends FASTElement {
         }
         this.schema = new Schema(name);
         FASTElementDefinition.registerAsync(name).then(async (value) => {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _d, _e, _f, _g, _h;
             (_b = (_a = TemplateElement.lifecycleCallbacks).elementDidRegister) === null || _b === void 0 ? void 0 : _b.call(_a, name);
-            if (!((_c = TemplateElement.elementOptions) === null || _c === void 0 ? void 0 : _c[name])) {
+            if (!((_d = TemplateElement.elementOptions) === null || _d === void 0 ? void 0 : _d[name])) {
                 TemplateElement.setOptions(name);
             }
-            if (((_d = TemplateElement.elementOptions[name]) === null || _d === void 0 ? void 0 : _d.observerMap) === "all") {
+            if (((_e = TemplateElement.elementOptions[name]) === null || _e === void 0 ? void 0 : _e.observerMap) === "all") {
                 this.observerMap = new ObserverMap(value.prototype, this.schema);
             }
             const registeredFastElement = fastElementRegistry.getByType(value);
             const template = this.getElementsByTagName("template").item(0);
             if (template) {
                 // Callback: Before template has been evaluated and assigned
-                (_f = (_e = TemplateElement.lifecycleCallbacks).templateWillUpdate) === null || _f === void 0 ? void 0 : _f.call(_e, name);
+                (_g = (_f = TemplateElement.lifecycleCallbacks).templateWillUpdate) === null || _g === void 0 ? void 0 : _g.call(_f, name);
                 const innerHTML = transformInnerHTML(this.innerHTML);
                 // Cache paths during template processing (pass undefined if observerMap is not available)
                 const { strings, values } = await this.resolveStringsAndValues(null, innerHTML, false, null, 0, this.schema, this.observerMap);
                 // Define the root properties cached in the observer map as observable (only if observerMap exists)
-                (_g = this.observerMap) === null || _g === void 0 ? void 0 : _g.defineProperties();
+                (_h = this.observerMap) === null || _h === void 0 ? void 0 : _h.defineProperties();
                 if (registeredFastElement) {
                     // Attach lifecycle callbacks to the definition before assigning template
                     // This allows the Observable notification to trigger the callbacks
@@ -140,7 +140,7 @@ class TemplateElement extends FASTElement {
         switch (behaviorConfig.name) {
             case "when": {
                 const expressionChain = getExpressionChain(behaviorConfig.value);
-                const whenLogic = resolveWhen(rootPropertyName, expressionChain, parentContext, level, schema);
+                const whenLogic = getBooleanBinding(rootPropertyName, expressionChain, parentContext, level, schema);
                 const { strings, values } = await this.resolveStringsAndValues(rootPropertyName, innerHTML.slice(behaviorConfig.openingTagEndIndex, behaviorConfig.closingTagStartIndex), self, parentContext, level, schema, observerMap);
                 externalValues.push(when(whenLogic, this.resolveTemplateOrBehavior(strings, values)));
                 break;
@@ -215,32 +215,57 @@ class TemplateElement extends FASTElement {
             }
             case "attribute": {
                 strings.push(innerHTML.slice(0, behaviorConfig.openingStartIndex));
-                if (behaviorConfig.aspect === "@") {
-                    const bindingHTML = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
-                    const openingParenthesis = bindingHTML.indexOf("(");
-                    const closingParenthesis = bindingHTML.indexOf(")");
-                    const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex -
-                        (closingParenthesis - openingParenthesis) -
-                        1);
-                    const type = "event";
-                    rootPropertyName = getRootPropertyName(rootPropertyName, propName, parentContext, type);
-                    const arg = bindingHTML.slice(openingParenthesis + 1, closingParenthesis);
-                    const binding = bindingResolver(strings.join(""), rootPropertyName, propName, parentContext, type, schema, parentContext, level);
-                    const attributeBinding = (x, c) => binding(x, c).bind(x)(...(arg === "e" ? [c.event] : []), ...(arg !== "e" && arg !== ""
-                        ? [
-                            bindingResolver(strings.join(""), rootPropertyName, arg, parentContext, type, schema, parentContext, level)(x, c),
-                        ]
-                        : []));
-                    values.push(attributeBinding);
-                }
-                else {
-                    const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
-                    const type = "access";
-                    rootPropertyName = getRootPropertyName(rootPropertyName, propName, parentContext, type);
-                    const binding = bindingResolver(strings.join(""), rootPropertyName, propName, parentContext, type, schema, parentContext, level);
-                    const attributeBinding = (x, c) => binding(x, c);
-                    values.push(attributeBinding);
+                let attributeBinding;
+                switch (behaviorConfig.aspect) {
+                    case "@": {
+                        const bindingHTML = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
+                        const openingParenthesis = bindingHTML.indexOf("(");
+                        const closingParenthesis = bindingHTML.indexOf(")");
+                        const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex -
+                            (closingParenthesis - openingParenthesis) -
+                            1);
+                        const type = "event";
+                        rootPropertyName = getRootPropertyName(rootPropertyName, propName, parentContext, type);
+                        const arg = bindingHTML.slice(openingParenthesis + 1, closingParenthesis);
+                        const binding = bindingResolver(strings.join(""), rootPropertyName, propName, parentContext, type, schema, parentContext, level);
+                        const isContextPath = propName.startsWith(contextPrefixDot);
+                        const getOwner = isContextPath
+                            ? (_x, c) => {
+                                const ownerPath = propName.split(".").slice(1, -1);
+                                return ownerPath.reduce((prev, item) => prev === null || prev === void 0 ? void 0 : prev[item], c);
+                            }
+                            : (x, _c) => x;
+                        attributeBinding = (x, c) => binding(x, c).bind(getOwner(x, c))(...(arg === "e" ? [c.event] : []), ...(arg !== "e" && arg !== ""
+                            ? [
+                                bindingResolver(strings.join(""), rootPropertyName, arg, parentContext, type, schema, parentContext, level)(x, c),
+                            ]
+                            : []));
+                        break;
+                    }
+                    case "?": {
+                        const expression = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
+                        const expressionChain = getExpressionChain(expression);
+                        if (expressionChain === null || expressionChain === void 0 ? void 0 : expressionChain.expression.operator) {
+                            attributeBinding = getBooleanBinding(rootPropertyName, expressionChain, parentContext, level, schema);
+                        }
+                        else {
+                            const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
+                            const type = "access";
+                            rootPropertyName = getRootPropertyName(rootPropertyName, propName, parentContext, type);
+                            const binding = bindingResolver(strings.join(""), rootPropertyName, propName, parentContext, type, schema, parentContext, level);
+                            attributeBinding = (x, c) => binding(x, c);
+                        }
+                        break;
+                    }
+                    default: {
+                        const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
+                        const type = "access";
+                        rootPropertyName = getRootPropertyName(rootPropertyName, propName, parentContext, type);
+                        const binding = bindingResolver(strings.join(""), rootPropertyName, propName, parentContext, type, schema, parentContext, level);
+                        attributeBinding = (x, c) => binding(x, c);
+                    }
                 }
+                values.push(attributeBinding);
                 await this.resolveInnerHTML(rootPropertyName, innerHTML.slice(behaviorConfig.closingEndIndex, innerHTML.length), strings, values, self, parentContext, level, schema, observerMap);
                 break;
             }

package/dist/esm/components/utilities.js

@@ -1,15 +1,7 @@
 import { Observable } from "@microsoft/fast-element/observable.js";
 import { defsPropertyName, fastContextMetaData, refPropertyName, Schema, } from "./schema.js";
-const openClientSideBinding = "{";
-const closeClientSideBinding = "}";
-const openContentBinding = "{{";
-const closeContentBinding = "}}";
-const openUnescapedBinding = "{{{";
-const closeUnescapedBinding = "}}}";
-const openTagStart = "<f-";
-const tagEnd = ">";
-const closeTagStart = "</f-";
-const attributeDirectivePrefix = "f-";
+import { attributeDirectivePrefix, clientSideCloseExpression, clientSideOpenExpression, closeExpression, executionContextAccessor, openExpression, repeatDirectiveClose, repeatDirectiveOpen, unescapedCloseExpression, unescapedOpenExpression, whenDirectiveClose, whenDirectiveOpen, } from "./syntax.js";
+export const contextPrefixDot = `${executionContextAccessor}.`;
 const startInnerHTMLDiv = `<div :innerHTML="{{`;
 const startInnerHTMLDivLength = startInnerHTMLDiv.length;
 const endInnerHTMLDiv = `}}"></div>`;
@@ -90,16 +82,23 @@ export function getIndexOfNextMatchingTag(openingTagStartSlice, openingTag, clos
  * @returns DirectiveBehaviorConfig - A configuration object
  */
 function getNextDirectiveBehavior(innerHTML) {
-    const openingTagStartIndex = innerHTML.indexOf(openTagStart);
+    const whenIndex = innerHTML.indexOf(whenDirectiveOpen);
+    const repeatIndex = innerHTML.indexOf(repeatDirectiveOpen);
+    const isWhen = whenIndex !== -1 && (repeatIndex === -1 || whenIndex < repeatIndex);
+    let openingTag = repeatDirectiveOpen;
+    let closingTag = repeatDirectiveClose;
+    let directiveTag = "repeat";
+    let openingTagStartIndex = repeatIndex;
+    if (isWhen) {
+        openingTag = whenDirectiveOpen;
+        closingTag = whenDirectiveClose;
+        directiveTag = "when";
+        openingTagStartIndex = whenIndex;
+    }
     const openingTagStartSlice = innerHTML.slice(openingTagStartIndex);
     const openingTagEndIndex = // account for f-when which may include >= or > as operators, but will always include a condition attr
-     openingTagStartSlice.indexOf(`"${tagEnd}`) + openingTagStartIndex + 2;
-    const directiveTag = innerHTML
-        .slice(openingTagStartIndex + 3, openingTagEndIndex - 1)
-        .split(" ")[0];
+     openingTagStartSlice.indexOf(`">`) + openingTagStartIndex + 2;
     const directiveValue = getNextDataBindingBehavior(innerHTML);
-    const openingTag = `${openTagStart}${directiveTag}`;
-    const closingTag = `${closeTagStart}${directiveTag}${tagEnd}`;
     const matchingCloseTagIndex = getIndexOfNextMatchingTag(openingTagStartSlice, openingTag, closingTag, openingTagStartIndex);
     return {
         type: "templateDirective",
@@ -185,14 +184,14 @@ function getContentDataBindingConfig(config) {
  */
 function getIndexAndBindingTypeOfNextDataBindingBehavior(innerHTML) {
     // {{{}}} binding
-    const openingUnescapedStartIndex = innerHTML.indexOf(openUnescapedBinding);
-    const closingUnescapedStartIndex = innerHTML.indexOf(closeUnescapedBinding);
+    const openingUnescapedStartIndex = innerHTML.indexOf(unescapedOpenExpression);
+    const closingUnescapedStartIndex = innerHTML.indexOf(unescapedCloseExpression);
     // {{}} binding
-    const openingContentStartIndex = innerHTML.indexOf(openContentBinding);
-    const closingContentStartIndex = innerHTML.indexOf(closeContentBinding);
+    const openingContentStartIndex = innerHTML.indexOf(openExpression);
+    const closingContentStartIndex = innerHTML.indexOf(closeExpression);
     // {} binding
-    const openingClientStartIndex = innerHTML.indexOf(openClientSideBinding);
-    const closingClientStartIndex = innerHTML.indexOf(closeClientSideBinding);
+    const openingClientStartIndex = innerHTML.indexOf(clientSideOpenExpression);
+    const closingClientStartIndex = innerHTML.indexOf(clientSideCloseExpression);
     if (openingUnescapedStartIndex !== -1 &&
         openingUnescapedStartIndex <= openingContentStartIndex &&
         openingUnescapedStartIndex <= openingClientStartIndex) {
@@ -251,8 +250,14 @@ export function getNextBehavior(innerHTML, offset = 0) {
     while (true) {
         const currentSlice = innerHTML.slice(offset);
         // client side binding will capture all bindings starting with "{"
-        const dataBindingOpen = currentSlice.indexOf(openClientSideBinding);
-        const directiveBindingOpen = currentSlice.indexOf(openTagStart);
+        const dataBindingOpen = currentSlice.indexOf(clientSideOpenExpression);
+        const whenDirectiveIndex = currentSlice.indexOf(whenDirectiveOpen);
+        const repeatDirectiveIndex = currentSlice.indexOf(repeatDirectiveOpen);
+        const directiveBindingOpen = whenDirectiveIndex === -1
+            ? repeatDirectiveIndex
+            : repeatDirectiveIndex === -1
+                ? whenDirectiveIndex
+                : Math.min(whenDirectiveIndex, repeatDirectiveIndex);
         const nextDataBindingBehavior = getNextDataBindingBehavior(currentSlice);
         if (dataBindingOpen === -1 && directiveBindingOpen === -1) {
             return null;
@@ -318,6 +323,13 @@ function isLegitimateClientSideBinding(result) {
 export function pathResolver(path, contextPath, level, rootSchema) {
     var _a, _b;
     let splitPath = path.split(".");
+    // Explicit context access via executionContextAccessor — resolve directly from ExecutionContext
+    if (splitPath[0] === executionContextAccessor) {
+        const contextAccessPath = splitPath.slice(1);
+        return (_accessibleObject, context) => {
+            return contextAccessPath.reduce((prev, item) => prev === null || prev === void 0 ? void 0 : prev[item], context);
+        };
+    }
     let levelCount = level;
     let self = splitPath[0] === contextPath;
     const parentContexts = [];
@@ -370,6 +382,13 @@ function pathWithContextResolver(splitPath, self) {
     };
 }
 export function bindingResolver(previousString, rootPropertyName, path, parentContext, type, schema, currentContext, level) {
+    // Explicit context access — resolve from ExecutionContext, skip schema tracking
+    if (path.startsWith(contextPrefixDot)) {
+        const segments = path.split(".").slice(1);
+        return (_x, context) => {
+            return segments.reduce((prev, item) => prev === null || prev === void 0 ? void 0 : prev[item], context);
+        };
+    }
     rootPropertyName = getRootPropertyName(rootPropertyName, path, currentContext, type);
     if (type !== "event" && rootPropertyName !== null) {
         const childrenMap = getChildrenMap(previousString);
@@ -391,6 +410,8 @@ export function expressionResolver(rootPropertyName, expression, parentContext,
     if (rootPropertyName !== null) {
         const paths = extractPathsFromChainedExpression(expression);
         paths.forEach(path => {
+            if (path.startsWith(contextPrefixDot))
+                return;
             schema.addPath({
                 pathConfig: {
                     type: "access",
@@ -443,7 +464,7 @@ function isOperandValue(operand) {
             isValue: true,
         };
     }
-    catch (e) {
+    catch {
         return {
             value: operand,
             isValue: false,
@@ -586,9 +607,11 @@ function resolveExpression(x, c, level, contextPath, expression, rootSchema) {
             return !resolvedLeft;
         }
         case Operator.EQUALS: {
+            // biome-ignore lint/suspicious/noDoubleEquals: Breaks prior existing functionality - see when fixture
             return resolvedLeft == resolvedRight;
         }
         case Operator.NOT_EQUALS: {
+            // biome-ignore lint/suspicious/noDoubleEquals: Breaks prior existing functionality - see when fixture
             return resolvedLeft != resolvedRight;
         }
         case Operator.GREATER_THAN_OR_EQUALS: {
@@ -673,13 +696,14 @@ export function transformInnerHTML(innerHTML, index = 0) {
     return transformedInnerHTML;
 }
 /**
- * Resolves f-when
+ * Resolves boolean logic
+ * used for f-when and boolean attributes
  * @param self - Where the first item in the path path refers to the item itself (used by repeat).
  * @param chainedExpression - The chained expression which includes the expression and the next expression
  * if there is another in the chain
  * @returns - A binding that resolves the chained expression logic
  */
-export function resolveWhen(rootPropertyName, expression, parentContext, level, schema) {
+export function getBooleanBinding(rootPropertyName, expression, parentContext, level, schema) {
     const binding = expressionResolver(rootPropertyName, expression, parentContext, level, schema);
     return (x, c) => binding(x, c);
 }

package/dist/esm/components/utilities.spec.js

@@ -1,6 +1,6 @@
 import { expect, test } from "@playwright/test";
 import { refPropertyName, Schema } from "./schema.js";
-import { getNextBehavior, getIndexOfNextMatchingTag, pathResolver, transformInnerHTML, getExpressionChain, extractPathsFromChainedExpression, getChildrenMap, findDef, resolveWhen, } from "./utilities.js";
+import { extractPathsFromChainedExpression, findDef, getBooleanBinding, getChildrenMap, getExpressionChain, getIndexOfNextMatchingTag, getNextBehavior, pathResolver, transformInnerHTML, } from "./utilities.js";
 test.describe("utilities", async () => {
     test.describe("content", async () => {
         test("get the next content binding", async () => {
@@ -17,7 +17,7 @@ test.describe("utilities", async () => {
     });
     test.describe("attributes", async () => {
         test("get the next attribute binding", async () => {
-            const innerHTML = "<input type=\"{{type}}\" disabled>";
+            const innerHTML = '<input type="{{type}}" disabled>';
             const templateResult = getNextBehavior(innerHTML);
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.type).toEqual("dataBinding");
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.subtype).toEqual("attribute");
@@ -29,7 +29,7 @@ test.describe("utilities", async () => {
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingEndIndex).toEqual(21);
         });
         test("get the next attribute event binding", async () => {
-            const innerHTML = "<input @click=\"{handleClick()}\">";
+            const innerHTML = '<input @click="{handleClick()}">';
             const templateResult = getNextBehavior(innerHTML);
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.type).toEqual("dataBinding");
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.subtype).toEqual("attribute");
@@ -46,10 +46,10 @@ test.describe("utilities", async () => {
             expect(templateResult).toBeNull();
         });
         test("skip single-brace non-event, non-property attribute bindings", async () => {
-            const innerHTML1 = "<input type=\"{type}\">";
+            const innerHTML1 = '<input type="{type}">';
             const templateResult1 = getNextBehavior(innerHTML1);
             expect(templateResult1).toBeNull();
-            const innerHTML2 = "<input ?disabled=\"{disabled}\">";
+            const innerHTML2 = '<input ?disabled="{disabled}">';
             const templateResult2 = getNextBehavior(innerHTML2);
             expect(templateResult2).toBeNull();
         });
@@ -63,7 +63,7 @@ test.describe("utilities", async () => {
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingStartIndex).toEqual(67);
         });
         test("find event binding after skipped single-brace content", async () => {
-            const innerHTML = "<style>.foo { color: red }</style><button @click=\"{handler()}\">";
+            const innerHTML = '<style>.foo { color: red }</style><button @click="{handler()}">';
             const templateResult = getNextBehavior(innerHTML);
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.type).toEqual("dataBinding");
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.subtype).toEqual("attribute");
@@ -71,7 +71,7 @@ test.describe("utilities", async () => {
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.bindingType).toEqual("client");
         });
         test("find property binding after skipped single-brace content", async () => {
-            const innerHTML = "<style>.foo { color: red } .bar { color: blue }</style><button :value=\"{someValue}\">";
+            const innerHTML = '<style>.foo { color: red } .bar { color: blue }</style><button :value="{someValue}">';
             const templateResult = getNextBehavior(innerHTML);
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.type).toEqual("dataBinding");
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.subtype).toEqual("attribute");
@@ -79,13 +79,13 @@ test.describe("utilities", async () => {
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.bindingType).toEqual("client");
         });
         test("ensure if there are expected missing {} this does not cause parsing issues", async () => {
-            const innerHTML = "<f-when value=\"missing\">";
+            const innerHTML = '<f-when value="missing">';
             expect(getNextBehavior(innerHTML)).toBeTruthy();
         });
     });
     test.describe("templates", async () => {
         test("when directive", async () => {
-            const innerHTML = "<f-when value=\"{{show}}\">Hello world</f-when>";
+            const innerHTML = '<f-when value="{{show}}">Hello world</f-when>';
             const templateResult = getNextBehavior(innerHTML);
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.type).toEqual("templateDirective");
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.openingTagStartIndex).toEqual(0);
@@ -94,7 +94,7 @@ test.describe("utilities", async () => {
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingTagEndIndex).toEqual(45);
         });
         test("when directive with content", async () => {
-            const innerHTML = "Hello pluto<f-when value=\"{{show}}\">Hello world</f-when>";
+            const innerHTML = 'Hello pluto<f-when value="{{show}}">Hello world</f-when>';
             const templateResult = getNextBehavior(innerHTML);
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.type).toEqual("templateDirective");
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.openingTagStartIndex).toEqual(11);
@@ -103,7 +103,7 @@ test.describe("utilities", async () => {
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingTagEndIndex).toEqual(56);
         });
         test("when directive with binding", async () => {
-            const innerHTML = "<f-when value=\"{{show}}\">{{text}}</f-when>";
+            const innerHTML = '<f-when value="{{show}}">{{text}}</f-when>';
             const templateResult = getNextBehavior(innerHTML);
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.type).toEqual("templateDirective");
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.openingTagStartIndex).toEqual(0);
@@ -111,10 +111,16 @@ test.describe("utilities", async () => {
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingTagStartIndex).toEqual(33);
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingTagEndIndex).toEqual(42);
         });
+        test("should not treat an unknown f- tag as a directive", async () => {
+            const innerHTML = '<f-foo value="{{bar}}">Hello</f-foo>';
+            const templateResult = getNextBehavior(innerHTML);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.type).toEqual("dataBinding");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.subtype).toEqual("attribute");
+        });
     });
     test.describe("attributes", async () => {
         test("children directive", async () => {
-            const innerHTML = "<ul f-children=\"{list}\"></ul>";
+            const innerHTML = '<ul f-children="{list}"></ul>';
             const result = getNextBehavior(innerHTML);
             expect(result === null || result === void 0 ? void 0 : result.type).toEqual("dataBinding");
             expect(result === null || result === void 0 ? void 0 : result.subtype).toEqual("attributeDirective");
@@ -126,7 +132,7 @@ test.describe("utilities", async () => {
             expect(result === null || result === void 0 ? void 0 : result.closingEndIndex).toEqual(22);
         });
         test("slotted directive", async () => {
-            const innerHTML = "<slot f-slotted=\"{slottedNodes}\"></slot>";
+            const innerHTML = '<slot f-slotted="{slottedNodes}"></slot>';
             const result = getNextBehavior(innerHTML);
             expect(result === null || result === void 0 ? void 0 : result.type).toEqual("dataBinding");
             expect(result === null || result === void 0 ? void 0 : result.subtype).toEqual("attributeDirective");
@@ -138,7 +144,7 @@ test.describe("utilities", async () => {
             expect(result === null || result === void 0 ? void 0 : result.closingEndIndex).toEqual(31);
         });
         test("ref directive", async () => {
-            const innerHTML = "<video f-ref=\"{video}\"></video>";
+            const innerHTML = '<video f-ref="{video}"></video>';
             const result = getNextBehavior(innerHTML);
             expect(result === null || result === void 0 ? void 0 : result.type).toEqual("dataBinding");
             expect(result === null || result === void 0 ? void 0 : result.subtype).toEqual("attributeDirective");
@@ -214,7 +220,7 @@ test.describe("utilities", async () => {
                     leftIsValue: false,
                     right: null,
                     rightIsValue: null,
-                }
+                },
             });
         });
         test("should resolve a falsy value", async () => {
@@ -225,7 +231,7 @@ test.describe("utilities", async () => {
                     leftIsValue: false,
                     right: null,
                     rightIsValue: null,
-                }
+                },
             });
         });
         test("should resolve a path not equal to string value", async () => {
@@ -236,7 +242,7 @@ test.describe("utilities", async () => {
                     leftIsValue: false,
                     right: "test",
                     rightIsValue: true,
-                }
+                },
             });
         });
         test("should resolve a path not equal to boolean value", async () => {
@@ -247,7 +253,7 @@ test.describe("utilities", async () => {
                     leftIsValue: false,
                     right: false,
                     rightIsValue: true,
-                }
+                },
             });
         });
         test("should resolve a path not equal to numerical value", async () => {
@@ -258,7 +264,7 @@ test.describe("utilities", async () => {
                     leftIsValue: false,
                     right: 5,
                     rightIsValue: true,
-                }
+                },
             });
         });
         test("should resolve chained expressions", async () => {
@@ -278,8 +284,8 @@ test.describe("utilities", async () => {
                         leftIsValue: false,
                         right: "baz",
                         rightIsValue: true,
-                    }
-                }
+                    },
+                },
             });
             expect(getExpressionChain("foo && bar")).toEqual({
                 expression: {
@@ -297,8 +303,8 @@ test.describe("utilities", async () => {
                         leftIsValue: false,
                         right: null,
                         rightIsValue: null,
-                    }
-                }
+                    },
+                },
             });
         });
     });
@@ -401,7 +407,7 @@ test.describe("utilities", async () => {
             expect(paths.has("app.user.profile.settings.theme")).toBe(true);
         });
     });
-    test.describe("resolveWhen - default case truthiness evaluation", async () => {
+    test.describe("getBooleanBinding - default case truthiness evaluation", async () => {
         // Helper to create a basic schema for testing
         const createTestSchema = (rootPropertyName, propertyName) => {
             const schema = new Schema("test-element");
@@ -420,98 +426,98 @@ test.describe("utilities", async () => {
         test("should evaluate boolean true as truthy", async () => {
             const schema = createTestSchema("testData", "boolTrue");
             const expression = getExpressionChain("boolTrue");
-            const resolver = resolveWhen("testData", expression, null, 0, schema);
+            const resolver = getBooleanBinding("testData", expression, null, 0, schema);
             const result = resolver({ boolTrue: true }, null);
             expect(result).toBe(true);
         });
         test("should evaluate boolean false as falsy", async () => {
             const schema = createTestSchema("testData", "boolFalse");
             const expression = getExpressionChain("boolFalse");
-            const resolver = resolveWhen("testData", expression, null, 0, schema);
+            const resolver = getBooleanBinding("testData", expression, null, 0, schema);
             const result = resolver({ boolFalse: false }, null);
             expect(result).toBe(false);
         });
         test("should evaluate number 0 as falsy", async () => {
             const schema = createTestSchema("testData", "numberZero");
             const expression = getExpressionChain("numberZero");
-            const resolver = resolveWhen("testData", expression, null, 0, schema);
+            const resolver = getBooleanBinding("testData", expression, null, 0, schema);
             const result = resolver({ numberZero: 0 }, null);
             expect(result).toBe(false);
         });
         test("should evaluate positive number as truthy", async () => {
             const schema = createTestSchema("testData", "numberPositive");
             const expression = getExpressionChain("numberPositive");
-            const resolver = resolveWhen("testData", expression, null, 0, schema);
+            const resolver = getBooleanBinding("testData", expression, null, 0, schema);
             const result = resolver({ numberPositive: 42 }, null);
             expect(result).toBe(true);
         });
         test("should evaluate negative number as truthy", async () => {
             const schema = createTestSchema("testData", "numberNegative");
             const expression = getExpressionChain("numberNegative");
-            const resolver = resolveWhen("testData", expression, null, 0, schema);
+            const resolver = getBooleanBinding("testData", expression, null, 0, schema);
             const result = resolver({ numberNegative: -5 }, null);
             expect(result).toBe(true);
         });
         test("should evaluate empty string as falsy", async () => {
             const schema = createTestSchema("testData", "stringEmpty");
             const expression = getExpressionChain("stringEmpty");
-            const resolver = resolveWhen("testData", expression, null, 0, schema);
+            const resolver = getBooleanBinding("testData", expression, null, 0, schema);
             const result = resolver({ stringEmpty: "" }, null);
             expect(result).toBe(false);
         });
         test("should evaluate non-empty string as truthy", async () => {
             const schema = createTestSchema("testData", "stringNonEmpty");
             const expression = getExpressionChain("stringNonEmpty");
-            const resolver = resolveWhen("testData", expression, null, 0, schema);
+            const resolver = getBooleanBinding("testData", expression, null, 0, schema);
             const result = resolver({ stringNonEmpty: "hello" }, null);
             expect(result).toBe(true);
         });
         test("should evaluate null as falsy", async () => {
             const schema = createTestSchema("testData", "objectNull");
             const expression = getExpressionChain("objectNull");
-            const resolver = resolveWhen("testData", expression, null, 0, schema);
+            const resolver = getBooleanBinding("testData", expression, null, 0, schema);
             const result = resolver({ objectNull: null }, null);
             expect(result).toBe(false);
         });
         test("should evaluate undefined as falsy", async () => {
             const schema = createTestSchema("testData", "undefinedProp");
             const expression = getExpressionChain("undefinedProp");
-            const resolver = resolveWhen("testData", expression, null, 0, schema);
+            const resolver = getBooleanBinding("testData", expression, null, 0, schema);
             const result = resolver({ undefinedProp: undefined }, null);
             expect(result).toBe(false);
         });
         test("should evaluate non-null object as truthy", async () => {
             const schema = createTestSchema("testData", "objectNonNull");
             const expression = getExpressionChain("objectNonNull");
-            const resolver = resolveWhen("testData", expression, null, 0, schema);
+            const resolver = getBooleanBinding("testData", expression, null, 0, schema);
             const result = resolver({ objectNonNull: { foo: "bar" } }, null);
             expect(result).toBe(true);
         });
         test("should evaluate empty array as truthy", async () => {
             const schema = createTestSchema("testData", "arrayEmpty");
             const expression = getExpressionChain("arrayEmpty");
-            const resolver = resolveWhen("testData", expression, null, 0, schema);
+            const resolver = getBooleanBinding("testData", expression, null, 0, schema);
             const result = resolver({ arrayEmpty: [] }, null);
             expect(result).toBe(true);
         });
         test("should evaluate non-empty array as truthy", async () => {
             const schema = createTestSchema("testData", "arrayNonEmpty");
             const expression = getExpressionChain("arrayNonEmpty");
-            const resolver = resolveWhen("testData", expression, null, 0, schema);
+            const resolver = getBooleanBinding("testData", expression, null, 0, schema);
             const result = resolver({ arrayNonEmpty: [1, 2, 3] }, null);
             expect(result).toBe(true);
         });
         test("should evaluate string with only whitespace as truthy", async () => {
             const schema = createTestSchema("testData", "stringWhitespace");
             const expression = getExpressionChain("stringWhitespace");
-            const resolver = resolveWhen("testData", expression, null, 0, schema);
+            const resolver = getBooleanBinding("testData", expression, null, 0, schema);
             const result = resolver({ stringWhitespace: "   " }, null);
             expect(result).toBe(true);
         });
         test("should evaluate number NaN as truthy", async () => {
             const schema = createTestSchema("testData", "numberNaN");
             const expression = getExpressionChain("numberNaN");
-            const resolver = resolveWhen("testData", expression, null, 0, schema);
+            const resolver = getBooleanBinding("testData", expression, null, 0, schema);
             const result = resolver({ numberNaN: NaN }, null);
             expect(result).toBe(true);
         });
@@ -548,37 +554,37 @@ test.describe("utilities", async () => {
         test.describe("findDef", async () => {
             test("should resolve from the root of a schema", async () => {
                 expect(findDef({
-                    [refPropertyName]: "#/$defs/MyType"
+                    [refPropertyName]: "#/$defs/MyType",
                 })).toEqual("MyType");
             });
             test("should resolve as null from an anyOf array containing a reference to another component", async () => {
                 expect(findDef({
                     anyOf: [
                         {
-                            [refPropertyName]: "https://fast.design/schemas/test-element/c.json"
-                        }
-                    ]
+                            [refPropertyName]: "https://fast.design/schemas/test-element/c.json",
+                        },
+                    ],
                 })).toEqual(null);
             });
             test("should resolve from an anyOf array containing a reference to a $def", async () => {
                 expect(findDef({
                     anyOf: [
                         {
-                            [refPropertyName]: "#/$defs/MyType"
-                        }
-                    ]
+                            [refPropertyName]: "#/$defs/MyType",
+                        },
+                    ],
                 })).toEqual("MyType");
             });
             test("should resolve from an anyOf array containing a reference to another component and a reference to a $def", async () => {
                 expect(findDef({
                     anyOf: [
                         {
-                            [refPropertyName]: "https://fast.design/schemas/test-element/c.json"
+                            [refPropertyName]: "https://fast.design/schemas/test-element/c.json",
                         },
                         {
-                            [refPropertyName]: "#/$defs/MyType"
-                        }
-                    ]
+                            [refPropertyName]: "#/$defs/MyType",
+                        },
+                    ],
                 })).toEqual("MyType");
             });
             test("should resolve as null if not found", async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/fast-html",
-  "version": "1.0.0-alpha.40",
+  "version": "1.0.0-alpha.42",
   "type": "module",
   "author": {
     "name": "Microsoft",
@@ -23,17 +23,15 @@
   "scripts": {
     "build:tsc": "tsc -p ./tsconfig.json",
     "build": "npm run build:tsc && npm run doc",
-    "clean": "rimraf dist temp test-results",
+    "clean": "clean dist temp test-results",
     "dev:full": "concurrently -k -n fast-element,fast-html,server \"npm run dev --workspace=@microsoft/fast-element\" \"npm:watch\" \"npm:test-server\"",
     "dev": "concurrently -k -n tsc,server \"npm run watch\" \"npm run test-server\"",
     "doc:ci": "api-extractor run",
     "doc": "npm run doc:ci -- --local",
-    "eslint:fix": "npm run eslint -- --fix",
-    "eslint": "eslint . --ext .ts",
+    "lint": "biome lint .",
+    "lint:fix": "biome lint --fix .",
     "install-playwright-browsers": "npm run playwright install",
     "prepublishOnly": "npm run clean && npm run build",
-    "prettier:diff": "prettier --config ../../.prettierrc \"**/*.{ts,html}\" --list-different",
-    "prettier": "prettier --config ../../.prettierrc --write \"**/*.{ts,html}\"",
     "test-server": "npx vite test/ --clearScreen false",
     "test:playwright": "playwright test",
     "test:rules": "sg test --skip-snapshot-tests",