@spfx-fast/sharepoint-ui 0.4.0 → 0.4.2

package/components.json

@@ -1413,6 +1413,7 @@
       "note": "React Field composes a single native or custom form control. createFormField returns a light-DOM wrapper for framework-neutral consumers.",
       "api": {
         "reactSignature": "{ children, label, hint, validationMessage, validationMessageIcon, validationState, required, disabled, orientation = \"vertical\", size = \"medium\", className, style, ...props }: FieldProps",
+        "reactRefType": "HTMLDivElement",
         "callbackProps": [],
         "slots": [
           "label",
@@ -1817,6 +1818,7 @@
       "note": "Uses a native HTML label to preserve browser label association and click-to-focus behavior; createLabel returns an HTMLLabelElement for non-React consumers.",
       "api": {
         "reactSignature": "{ htmlFor, size = \"medium\", weight = \"regular\", required = false, disabled = false, children, style, ...props }: React.LabelHTMLAttributes<HTMLLabelElement> & { size?: LabelSize; weight?: LabelWeight; required?: LabelRequired; disabled?: boolean }",
+        "reactRefType": "HTMLLabelElement",
         "callbackProps": [],
         "slots": [
           "default"
@@ -2673,7 +2675,8 @@
       "category": "feedback",
       "reactOnly": true,
       "api": {
-        "reactSignature": "{ children, ...props }: ElementProps & { children?: React.ReactNode }",
+        "reactSignature": "{ children, ...props }: DrawerFooterProps",
+        "reactRefType": "HTMLDivElement",
         "callbackProps": [],
         "slots": [
           "actions"
@@ -2693,7 +2696,8 @@
       "category": "feedback",
       "reactOnly": true,
       "api": {
-        "reactSignature": "{ children, ...props }: ElementProps & { children?: React.ReactNode }",
+        "reactSignature": "{ children, ...props }: DrawerBodyProps",
+        "reactRefType": "HTMLDivElement",
         "callbackProps": [],
         "slots": [
           "default"
@@ -2708,7 +2712,7 @@
     },
     {
       "react": "DrawerHeaderTitle",
-      "tag": "span",
+      "tag": "fragment",
       "module": "drawer",
       "category": "feedback",
       "reactOnly": true,
@@ -2735,7 +2739,8 @@
       "category": "feedback",
       "reactOnly": true,
       "api": {
-        "reactSignature": "{ children, label, ...props }: ElementProps & { children?: React.ReactNode; label?: string }",
+        "reactSignature": "{ children, label, ...props }: DrawerHeaderNavigationProps",
+        "reactRefType": "HTMLElement",
         "callbackProps": [],
         "slots": [
           "default"
@@ -3550,7 +3555,8 @@
       "reactOnly": true,
       "category": "form-trigger",
       "api": {
-        "reactSignature": "{ children, appearance = \"outline\", size = \"medium\", disabled = false, ...props }: ElementProps & { children?: React.ReactNode; appearance?: \"filled-darker\" | \"filled-lighter\" | \"outline\" | \"underline\"; size?: \"small\" | \"medium\" | \"large\"; disabled?: boolean }",
+        "reactSignature": "{ children, appearance = \"outline\", size = \"medium\", disabled = false, ...props }: TagPickerButtonProps",
+        "reactRefType": "HTMLButtonElement",
         "callbackProps": [],
         "slots": [
           "button"

package/dist/elements/persona.js

@@ -69,8 +69,9 @@ export function definePersona() {
             const style = document.createElement("style");
             style.textContent = `${base}:host{--spui-persona-avatar-size:32px;--spui-persona-gap:10px;display:inline-flex;max-width:100%;min-width:0;color:var(--spui-ui-text,var(--spui-semantic-body-text,var(--colorNeutralForeground1,#242424)));font:inherit;vertical-align:middle}.layout{display:flex;align-items:center;gap:var(--spui-persona-gap);min-width:0;max-width:100%}.avatar-wrap{position:relative;display:grid;place-items:center;flex:none;width:var(--spui-persona-avatar-size);height:var(--spui-persona-avatar-size)}.avatar-fallback{display:grid;width:100%;height:100%}.presence{position:absolute;inset-inline-end:-1px;bottom:-1px;box-sizing:border-box;width:12px;height:12px;border:2px solid var(--spui-base-surface,var(--spui-ui-surface,var(--colorNeutralBackground1,#fff)));border-radius:50%;background:var(--spui-persona-presence-color,#808080)}.presence[data-presence=available]{--spui-persona-presence-color:var(--spui-persona-presence-available,var(--spui-presence-available,var(--spui-semantic-success-text,var(--colorPaletteGreenForeground1,var(--spui-ui-success,#13a10e)))))}.presence[data-presence=busy],.presence[data-presence=do-not-disturb]{--spui-persona-presence-color:var(--spui-persona-presence-busy,var(--spui-presence-busy,var(--spui-semantic-error-text,var(--colorPaletteRedForeground1,var(--spui-ui-danger,#c50f1f)))))}.presence[data-presence=away]{--spui-persona-presence-color:var(--spui-persona-presence-away,var(--spui-presence-away,var(--spui-semantic-warning-text,var(--colorPaletteMarigoldForeground1,var(--spui-ui-warning,#835b00)))))}.presence[data-presence=offline],.presence[data-presence=unknown]{--spui-persona-presence-color:var(--spui-persona-presence-offline,var(--spui-presence-offline,var(--spui-semantic-body-subtext,var(--colorNeutralForeground3,var(--spui-ui-muted,#8a8886)))))}.presence[data-presence=do-not-disturb]{box-shadow:inset 0 0 0 2px var(--spui-base-surface,var(--spui-ui-surface,#fff))}.details{display:flex;flex-direction:column;justify-content:flex-start;min-width:0;max-width:100%;line-height:1.3}.primary,.secondary,.tertiary{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.primary{font-size:14px;font-weight:600;color:var(--spui-ui-text,var(--colorNeutralForeground1,#242424))}.secondary,.tertiary{font-size:12px;color:var(--spui-ui-muted,var(--colorNeutralForeground2,#616161))}.tertiary{font-size:11px}:host([size=extra-small]){--spui-persona-avatar-size:20px;--spui-persona-gap:6px}:host([size=small]){--spui-persona-avatar-size:28px;--spui-persona-gap:8px}:host([size=large]){--spui-persona-avatar-size:36px}:host([size=extra-large]){--spui-persona-avatar-size:40px;--spui-persona-gap:12px}:host([size=huge]){--spui-persona-avatar-size:56px;--spui-persona-gap:14px}:host([size=huge]) .primary{font-size:var(--spui-persona-huge-primary-size,20px)}:host([size=huge]) .secondary{font-size:var(--spui-persona-huge-secondary-size,16px)}:host([text-position=before]) .layout{flex-direction:row-reverse}:host([text-position=below]) .layout{flex-direction:column;align-items:center;text-align:center}:host([text-position=below]) .details{align-items:center}:host([text-position=below]){max-width:12rem}:host([text-alignment=center]) .details{justify-content:center}:host([presence-only]) .avatar-wrap{width:auto;height:auto}:host([presence-only]) .avatar-fallback, :host([presence-only]) slot[name=avatar]{display:none}:host([presence-only]) .presence{position:static;inset:auto;width:16px;height:16px;border-width:0}::slotted([slot=avatar]){display:block;max-width:100%;max-height:100%}::slotted([slot=details]){min-width:0}@media(forced-colors:active){.presence{border-color:Canvas;background:Highlight}.presence[data-presence=offline],.presence[data-presence=unknown]{background:GrayText}}`;
             style.textContent += `::slotted([slot=primary-text]),::slotted([slot=secondary-text]),::slotted([slot=tertiary-text]),::slotted([slot=quaternary-text]){display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::slotted([slot=primary-text]){font-size:14px;font-weight:600;color:var(--spui-ui-text,var(--colorNeutralForeground1,#242424))}::slotted([slot=secondary-text]),::slotted([slot=quaternary-text]){font-size:12px;color:var(--spui-ui-muted,var(--colorNeutralForeground2,#616161))}::slotted([slot=tertiary-text]){font-size:11px;color:var(--spui-ui-muted,var(--colorNeutralForeground2,#616161))}:host([size=huge])::slotted([slot=primary-text]){font-size:var(--spui-persona-huge-primary-size,20px)}`;
-            const layout = document.createElement("span");
+            const layout = document.createElement("div");
             layout.className = "layout";
+            layout.part.add("root");
             const avatarWrap = document.createElement("span");
             avatarWrap.className = "avatar-wrap";
             avatarWrap.part.add("avatar-wrap");

package/dist/elements/text.d.ts

@@ -2,4 +2,8 @@ export type TextSize = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 100
 export type TextWeight = "regular" | "medium" | "semibold" | "bold";
 export type TextFont = "base" | "monospace" | "numeric";
 export type TextTag = "span" | "p" | "div" | "strong" | "b" | "em" | "i" | "small" | "code" | "pre" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export declare function getTextSizeStyles(size: TextSize | string): {
+    fontSize: string;
+    lineHeight: string;
+};
 export declare function defineText(): void;

package/dist/elements/text.js

@@ -14,6 +14,15 @@ const extendedSizeTokens = {
     "1200": ["--spui-text-font-size-1200", "--spui-text-line-height-1200"],
 };
 const tags = new Set(["span", "p", "div", "strong", "b", "em", "i", "small", "code", "pre", "blockquote", "h1", "h2", "h3", "h4", "h5", "h6"]);
+export function getTextSizeStyles(size) {
+    const [fallbackSize, fallbackLine] = sizes[size] ?? sizes["300"];
+    const fluentTokens = fluentSizeTokens[size];
+    const [fontToken, lineToken] = extendedSizeTokens[size] ?? (fluentTokens ? [`--${fluentTokens[0]}`, `--${fluentTokens[1]}`] : [`--${fluentSizeTokens["300"][0]}`, `--${fluentSizeTokens["300"][1]}`]);
+    return {
+        fontSize: `var(--spui-text-font-size,var(${fontToken},${fallbackSize}))`,
+        lineHeight: `var(--spui-text-line-height,var(${lineToken},${fallbackLine}))`,
+    };
+}
 export function defineText() {
     if (customElements.get("spui-text"))
         return;
@@ -57,12 +66,9 @@ export function defineText() {
             const content = this.shadowRoot?.querySelector(".text");
             if (!content)
                 return;
-            const size = this.getAttribute("size") ?? "300";
-            const [fallbackSize, fallbackLine] = sizes[size] ?? sizes["300"];
-            const fluentTokens = fluentSizeTokens[size];
-            const [fontToken, lineToken] = extendedSizeTokens[size] ?? (fluentTokens ? [`--${fluentTokens[0]}`, `--${fluentTokens[1]}`] : [`--${fluentSizeTokens["300"][0]}`, `--${fluentSizeTokens["300"][1]}`]);
-            content.style.fontSize = `var(--spui-text-font-size,var(${fontToken},${fallbackSize}))`;
-            content.style.lineHeight = `var(--spui-text-line-height,var(${lineToken},${fallbackLine}))`;
+            const sizeStyles = getTextSizeStyles(this.getAttribute("size") ?? "300");
+            content.style.fontSize = sizeStyles.fontSize;
+            content.style.lineHeight = sizeStyles.lineHeight;
         }
     }
     customElements.define("spui-text", SpuiText);