@warp-ds/elements 2.10.0-next.2 → 2.10.0-next.20

package/dist/packages/affix/affix-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Affix component styles using the internal token pattern with a public styling API.
+ *
+ * Public API tokens (customizable):
+ * - Wrapper: --w-c-affix-*
+ * - Label: --w-c-affix-label-*
+ */
+export declare const affixStyles: import("lit").CSSResult;

package/dist/packages/affix/affix-styles.js

@@ -0,0 +1,108 @@
+import { css } from "lit";
+/**
+ * Affix component styles using the internal token pattern with a public styling API.
+ *
+ * Public API tokens (customizable):
+ * - Wrapper: --w-c-affix-*
+ * - Label: --w-c-affix-label-*
+ */
+export const affixStyles = css `
+	/* Wrapper component tokens with semantic fallbacks */
+	:host {
+		/* Internal tokens - not part of public API */
+		--_wrapper-bg: var(--w-c-affix-wrapper-bg, transparent);
+		--_wrapper-border-radius: var(--w-c-affix-wrapper-border-radius, 0.4rem);
+		--_wrapper-padding-left: var(--w-c-affix-wrapper-padding-left, 1.2rem);
+		--_wrapper-padding-right: var(--w-c-affix-wrapper-padding-right, 1.2rem);
+		--_wrapper-width-with-label: var(
+			--w-c-affix-wrapper-width-with-label,
+			max-content
+		);
+		--_wrapper-width-with-icon: var(--w-c-affix-wrapper-width-with-icon, 4rem);
+
+		/* Label tokens */
+		--_label-color: var(--w-c-affix-label-color, var(--w-s-color-text));
+		--_label-font-size: var(--w-c-affix-label-font-size, var(--w-font-size-xs));
+		--_label-line-height: var(
+			--w-c-affix-label-line-height,
+			var(--w-line-height-xs)
+		);
+		--_label-font-weight: var(--w-c-affix-label-font-weight, 700);
+		--_label-cursor: var(--w-c-affix-label-cursor, default);
+	}
+
+	/* Base wrapper styles (applied to all variants) */
+	[part="wrapper"] {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: var(--_wrapper-bg);
+		border-radius: var(--_wrapper-border-radius);
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+
+	/* Prefix positioning */
+	:host([slot="prefix"]) [part="wrapper"] {
+		left: 0;
+	}
+
+	/* Suffix positioning */
+	:host([slot="suffix"]) [part="wrapper"] {
+		right: 0;
+	}
+
+	/* Width variants */
+	[part="wrapper"].has-label {
+		width: var(--_wrapper-width-with-label);
+	}
+
+	:host([slot="prefix"]) [part="wrapper"].has-label {
+		padding-left: var(--_wrapper-padding-left);
+	}
+
+	:host([slot="suffix"]) [part="wrapper"].has-label {
+		padding-right: var(--_wrapper-padding-right);
+	}
+
+	[part="wrapper"].has-icon {
+		width: var(--_wrapper-width-with-icon);
+	}
+
+	/* Label styling */
+	[part="label"] {
+		display: block;
+		position: relative;
+		font-size: var(--_label-font-size);
+		line-height: var(--_label-line-height);
+		font-weight: var(--_label-font-weight);
+		color: var(--_label-color);
+		cursor: var(--_label-cursor);
+		padding-bottom: 0;
+	}
+
+	/* Button wrapper for interactive variants */
+	button[part="wrapper"] {
+		border: none;
+		outline: none;
+		cursor: pointer;
+	}
+
+	/* Focus styles for interactive variants */
+	button[part="wrapper"]:focus {
+		outline: 2px solid var(--w-s-color-border-focus);
+		outline-offset: var(--w-outline-offset, -2px);
+	}
+
+	button[part="wrapper"]:focus-visible {
+		outline: 2px solid var(--w-s-color-border-focus);
+		outline-offset: var(--w-outline-offset, -2px);
+	}
+
+	button[part="wrapper"]:not(:focus-visible) {
+		outline: none;
+	}
+`;

package/dist/packages/affix/affix.d.ts

@@ -1,9 +1,19 @@
-import { LitElement } from 'lit';
-import '../icon/icon.js';
+import { LitElement } from "lit";
+import "../icon/icon.js";
 declare const WarpAffix_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
 /**
  * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
  *
+ * ## Accessibility Note
+ * Due to shadow DOM encapsulation, ARIA attributes (like `aria-describedby`, `aria-labelledby`)
+ * cannot reference elements across shadow boundaries. This means:
+ * - Non-interactive affixes (text labels, icons) cannot be connected to the parent input via ARIA
+ * - Interactive affixes (buttons) must have their own `aria-label` (already implemented)
+ * - Do NOT attempt to reference affix content from parent components via ARIA ID references - it won't work
+ *
+ * For non-interactive labels (e.g., currency symbols), consider including the information in the
+ * main label or placeholder instead of relying on ARIA to announce affix content.
+ *
  * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)
  */
 declare class WarpAffix extends WarpAffix_base {
@@ -19,14 +29,14 @@ declare class WarpAffix extends WarpAffix_base {
      *
      * @summary Renders a clear icon button.
      * @description Shows a clickable close icon meant for reset/clear actions, typically in a suffix slot.
-    */
+     */
     clear: boolean;
     /**
      * Add this property to render a clickable Warp search icon.
      *
      * @summary Renders a search icon button.
      * @description Shows a clickable search icon, typically in a prefix slot for search fields.
-    */
+     */
     search: boolean;
     /**
      * @summary Text label shown as prefix/suffix content.
@@ -40,14 +50,7 @@ declare class WarpAffix extends WarpAffix_base {
     icon: string | null;
     static styles: import("lit").CSSResult[];
     /** @internal */
-    get _classBase(): {
-        wrapper: string;
-        wrapperWithLabel: string;
-        wrapperWithIcon: string;
-        label: string;
-    };
-    /** @internal */
-    get _classes(): string;
+    get _wrapperClasses(): string;
     /** @internal */
     resetContainingTextField(e: Event): void;
     /** @internal */
@@ -60,7 +63,7 @@ declare class WarpAffix extends WarpAffix_base {
     /** @internal */
     get _text(): import("lit").TemplateResult<1>;
     /** @internal */
-    get _markup(): "" | import("lit").TemplateResult<1>;
+    get _markup(): "" | import("lit").TemplateResult<1> | undefined;
     render(): import("lit").TemplateResult<1>;
 }
 export { WarpAffix };

package/dist/packages/affix/affix.hydration.test.d.ts

@@ -1 +1 @@
-import './affix.js';
+import "./affix.js";

package/dist/packages/affix/affix.hydration.test.js

@@ -1,32 +1,32 @@
-import { describe, expect, test, beforeEach, afterEach } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import './affix.js';
-describe('w-affix React SSR hydration', () => {
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "./affix.js";
+describe("w-affix React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-affix', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-affix", {});
         expect(warnings).toEqual([]);
     });
-    test('with label hydrates without warnings', async () => {
-        const warnings = await testHydration('w-affix', {
-            label: 'kr',
+    test("with label hydrates without warnings", async () => {
+        const warnings = await testHydration("w-affix", {
+            label: "kr",
         });
         expect(warnings).toEqual([]);
     });
-    test('with search hydrates without warnings', async () => {
-        const warnings = await testHydration('w-affix', {
+    test("with search hydrates without warnings", async () => {
+        const warnings = await testHydration("w-affix", {
             search: true,
-            'aria-label': 'Search',
+            "aria-label": "Search",
         });
         expect(warnings).toEqual([]);
     });
-    test('with clear hydrates without warnings', async () => {
-        const warnings = await testHydration('w-affix', {
+    test("with clear hydrates without warnings", async () => {
+        const warnings = await testHydration("w-affix", {
             clear: true,
-            'aria-label': 'Clear',
+            "aria-label": "Clear",
         });
         expect(warnings).toEqual([]);
     });