agnosticui-core 2.0.0-alpha.2 → 2.0.0-alpha.21

package/src/components/Drawer/v1/dialog.hbs

@@ -0,0 +1,48 @@
+<div class="dialog"
+     id="dialog-example"
+     aria-hidden="true"
+     aria-labelledby="dialog-example-title"
+     aria-describedby="dialog-example-description">
+  <div class="dialog-overlay"
+       data-a11y-dialog-hide></div>
+  <div class="dialog-content"
+       role="document">
+    <div class="mbs16 mbe24 mis16 mie16">
+      <button data-a11y-dialog-hide
+              class="close-button close-button-large dialog-close"
+              aria-label="Close this dialog window">
+        <svg class="close"
+             viewBox="0 0 24 24"
+             aria-hidden="true">
+          <path fill="currentColor"
+                d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z" />
+        </svg>
+      </button>
+
+      <h1 id="dialog-example-title">Subscribe to our newsletter</h1>
+      <p id="dialog-example-description">
+        Fill in the form below to receive our newsletter!
+      </p>
+      <form class="dialog-form-demo">
+        <label class="label"
+               for="email">Email (required)</label>
+        <input class="input input-rounded"
+               type="email"
+               name="EMAIL"
+               id="email"
+               placeholder="john.doe@gmail.com"
+               required />
+        <button class="btn btn-primary btn-rounded btn-block"
+                type="submit"
+                name="button">Sign up</button>
+      </form>
+    </div>
+  </div>
+</div>
+
+<button type="button"
+        class="btn btn-primary btn-bordered"
+        data-a11y-dialog-show="dialog-example">
+  Open the dialog
+</button>
+

package/src/components/Drawer/v1/drawer-animations.css

@@ -0,0 +1,52 @@
+/**
+ * Place these alongside the content like:
+ * <div class="dialog-content drawer-content drawer-slide-start"...
+ */
+.drawer-slide-start {
+  animation: slide-start var(--agnostic-timing-fast) ease-in-out;
+}
+
+.drawer-slide-end {
+  animation: slide-end var(--agnostic-timing-fast) ease-in-out;
+}
+
+.drawer-slide-bottom {
+  animation: slide-bottom var(--agnostic-timing-fast) ease-in-out;
+}
+
+.drawer-slide-top {
+  animation: slide-top var(--agnostic-timing-fast) ease-in-out;
+}
+
+@keyframes slide-top {
+  from {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes slide-bottom {
+  from {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes slide-start {
+  from {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes slide-end {
+  from {
+    transform: translateX(100%);
+  }
+}
+
+@media (prefers-reduced-motion), (update: slow) {
+  .drawer-slide-top,
+  .drawer-slide-bottom,
+  .drawer-slide-start,
+  .drawer-slide-end {
+    transition-duration: 0.001ms !important;
+  }
+}

package/src/components/Drawer/v1/drawer.css

@@ -0,0 +1,50 @@
+.drawer-start {
+  right: initial;
+}
+
+.drawer-start[aria-hidden] {
+  transform: none;
+}
+
+.drawer-end {
+  left: initial;
+}
+
+.drawer-end[aria-hidden] {
+  transform: none;
+}
+
+.drawer-top {
+  bottom: initial;
+  transform: none;
+}
+
+.drawer-top[aria-hidden] {
+  transform: none;
+}
+
+.drawer-bottom {
+  top: initial;
+  transform: none;
+}
+
+.drawer-bottom[aria-hidden] {
+  transform: none;
+}
+
+.drawer-content {
+  margin: initial;
+  max-width: initial;
+  border-radius: initial;
+}
+
+.drawer-start .drawer-content,
+.drawer-end .drawer-content {
+  width: 25rem;
+}
+
+.drawer-top .drawer-content,
+.drawer-bottom .drawer-content {
+  height: 25vh;
+  width: 100%;
+}

package/src/components/Icon/vue/VueIcon.vue

@@ -1,6 +1,5 @@
 <template>
   <ag-icon
-    ref="agComponent"
     .size="size"
     .type="type"
     .noFill="noFill"
@@ -11,13 +10,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import type { IconProps, AgIcon } from "../core/Icon";
+import type { IconProps } from "../core/Icon";
 import "../core/Icon"; // Registers <ag-icon> on wrapper load
 
-const props = withDefaults(defineProps<IconProps>(), {
+withDefaults(defineProps<IconProps>(), {
   size: "16" as const,
   type: "" as const,
 });
-const agComponent = ref<InstanceType<typeof AgIcon> | null>(null);
 </script>

package/src/components/Image/vue/VueImage.vue

@@ -1,6 +1,6 @@
 <template>
   <ag-image
-    ref="imageRef"
+    ref="agImageRef"
     :src="src"
     :alt="alt"
     :width="width"
@@ -29,13 +29,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import type {
-  AgImageProps,
-  AgImageSource,
-  ImageLoadEvent,
-  ImageErrorEvent,
-} from "../core/Image";
+import { ref, watchEffect, onMounted } from "vue";
+import type { AgImage, AgImageProps, AgImageSource } from "../core/Image";
 import "../core/Image"; // Registers the ag-image web component
 
 // Define props interface (omit function props since wrapper uses emits)
@@ -54,21 +49,30 @@ const props = withDefaults(defineProps<VueImageProps>(), {
   duration: 200,
 });
 
+// Template ref for ag-image element
+const agImageRef = ref<AgImage | null>(null);
+
+// Sync sources array prop to web component (arrays can't be passed via attributes)
+onMounted(() => {
+  watchEffect(() => {
+    if (agImageRef.value && props.sources) {
+      agImageRef.value.sources = props.sources;
+    }
+  });
+});
+
 // Define emits
 const emit = defineEmits<{
   "ag-load": [];
   "ag-error": [];
 }>();
 
-// Template ref
-const imageRef = ref<HTMLElement>();
-
 // Event handlers
-const handleLoad = (event: Event) => {
+const handleLoad = (_event: Event) => {
   emit("ag-load");
 };
 
-const handleError = (event: Event) => {
+const handleError = (_event: Event) => {
   emit("ag-error");
 };
 </script>

package/src/components/Input/core/_Input.ts

@@ -16,6 +16,7 @@ import {
   isHorizontalLabel,
   type LabelPosition,
 } from '../../../shared/form-control-utils';
+import { FaceMixin, syncInnerInputValidity } from '../../../shared/face-mixin';
 
 export type InputType =
   | 'text'
@@ -43,6 +44,7 @@ export interface InputProps {
   labelPosition?: LabelPosition;
   noLabel?: boolean;
   ariaLabel?: string;
+  name?: string;
   type?: InputType;
   value?: string;
   placeholder?: string;
@@ -67,7 +69,7 @@ export interface InputProps {
   onBlur?: (event: FocusEvent) => void;
 }
 
-export class AgInput extends LitElement implements InputProps {
+export class AgInput extends FaceMixin(LitElement) implements InputProps {
   static styles = [
     formControlStyles,
     css`
@@ -110,7 +112,7 @@ export class AgInput extends LitElement implements InputProps {
         box-sizing: border-box;
         width: 100%;
         padding: var(--ag-space-2) var(--ag-space-3);
-        font-size: var(--ag-font-size-base);
+        font-size: var(--ag-font-size-sm);
         line-height: var(--ag-line-height-base);
         color: var(--ag-text-primary);
         background-color: var(--ag-background-primary);
@@ -121,6 +123,7 @@ export class AgInput extends LitElement implements InputProps {
 
       .ag-input__input::placeholder,
       .ag-input__textarea::placeholder {
+        font-size: var(--ag-font-size-sm);
         color: var(--ag-text-muted);
         opacity: 1;
       }
@@ -210,6 +213,13 @@ export class AgInput extends LitElement implements InputProps {
         border: 1px solid var(--ag-border-subtle);
       }
 
+      /* Ensure nested content (icons, svgs) is also centered */
+      .ag-input__addon ::slotted(*) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
       .ag-input__addon--left {
         border-inline-end: 0;
         border-radius: var(--ag-radius-md) 0 0 var(--ag-radius-md);
@@ -473,6 +483,33 @@ export class AgInput extends LitElement implements InputProps {
     this._inputElement?.select();
   }
 
+  // ─── FACE: AgInput-specific overrides ────────────────────────────────────
+  // Common boilerplate (formAssociated, _internals, name, form/validity
+  // getters, checkValidity, reportValidity, formDisabledCallback) lives in
+  // FaceMixin (shared/face-mixin.ts).
+
+  /**
+   * FACE lifecycle: called when the parent form is reset.
+   * Restores value to empty and clears validity state.
+   */
+  override formResetCallback(): void {
+    this.value = '';
+    this._internals.setFormValue('');
+    this._internals.setValidity({});
+  }
+
+  /**
+   * Sync the inner input's native validity state to ElementInternals.
+   * Delegates constraint validation (required, minlength, type=email, etc.)
+   * to the inner <input> rather than reimplementing it from scratch.
+   * Uses the shared syncInnerInputValidity() helper from face-mixin.ts.
+   */
+  private _syncValidity(): void {
+    syncInnerInputValidity(this._internals, this._inputElement);
+  }
+
+  // ─── End FACE ─────────────────────────────────────────────────────────────
+
   /**
    * Handle slot changes to detect addons
    */
@@ -495,6 +532,10 @@ export class AgInput extends LitElement implements InputProps {
   private _handleInput(e: Event) {
     const target = e.target as HTMLInputElement | HTMLTextAreaElement;
     this.value = target.value;
+    // FACE: keep form submission value in sync
+    this._internals.setFormValue(this.value);
+    // FACE: mirror native constraint validity (required, minlength, type, etc.)
+    this._syncValidity();
 
     if (this.onInput) {
       this.onInput(e as InputEvent);
@@ -507,6 +548,10 @@ export class AgInput extends LitElement implements InputProps {
   private _handleChange(e: Event) {
     const target = e.target as HTMLInputElement | HTMLTextAreaElement;
     this.value = target.value;
+    // FACE: keep form submission value in sync
+    this._internals.setFormValue(this.value);
+    // FACE: mirror native constraint validity (required, minlength, type, etc.)
+    this._syncValidity();
 
     if (this.onChange) {
       this.onChange(e);
@@ -634,6 +679,10 @@ export class AgInput extends LitElement implements InputProps {
   }
 
   override firstUpdated() {
+    // FACE: set initial form value and sync validity after first render
+    this._internals.setFormValue(this.value ?? '');
+    this._syncValidity();
+
     // Initial check for slot content
     setTimeout(() => {
       const leftAddonSlot = this.shadowRoot?.querySelector('slot[name="addon-left"]') as HTMLSlotElement;
@@ -705,7 +754,11 @@ export class AgInput extends LitElement implements InputProps {
   }
 
   /**
-   * Render custom error message for Input
+   * Render custom error message for Input.
+   * role="alert" + aria-atomic="true" ensures screen readers announce the
+   * message immediately when it becomes visible (e.g. after blur or submit).
+   * The live region is always in the DOM so ATs register it on page load;
+   * content is populated only when invalid so announcements fire on change.
    */
   private _renderError() {
     return html`
@@ -713,6 +766,8 @@ export class AgInput extends LitElement implements InputProps {
         id="${this._ids.errorId}"
         class="ag-form-control__error ag-input__error"
         part="ag-input-error"
+        role="alert"
+        aria-atomic="true"
         ?hidden="${!this.invalid || !this.errorMessage}"
       >
         ${this.errorMessage || ''}

package/src/components/Input/vue/VueInput.vue

@@ -1,6 +1,6 @@
 <template>
   <ag-input
-    ref="inputRef"
+    :name="name"
     .value="value"
     .labelHidden="labelHidden"
     .noLabel="noLabel"
@@ -43,7 +43,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
 import type { InputProps } from "../core/Input";
 import "../core/Input"; // Registers the ag-input web component
 
@@ -59,7 +58,7 @@ export interface VueInputProps
     "onClick" | "onInput" | "onChange" | "onFocus" | "onBlur"
   > {}
 // Define props with defaults
-const props = withDefaults(defineProps<VueInputProps>(), {
+withDefaults(defineProps<VueInputProps>(), {
   value: "",
   label: "",
   labelHidden: false,
@@ -93,9 +92,6 @@ const emit = defineEmits<{
   "update:value": [value: string];
 }>();
 
-// Template ref
-const inputRef = ref<HTMLElement>();
-
 // Event handlers - native events emit full event object
 const handleClick = (event: MouseEvent) => {
   emit("click", event);

package/src/components/Link/core/_Link.ts

@@ -52,6 +52,7 @@ export class AgLink extends LitElement implements LinkProps {
 
     a {
       /* Base link styles */
+      font-size: var(--ag-font-size-sm);
       color: var(--ag-primary-text);
       text-decoration: underline;
       cursor: pointer;

package/src/components/Link/vue/VueLink.vue

@@ -7,6 +7,7 @@
 <script lang="ts">
 import { defineComponent, onMounted, ref, watchEffect } from "vue";
 import type { LinkProps } from "../core/_Link";
+import "../core/Link"; // Register the ag-link web component
 
 export default defineComponent({
   name: "VueLink",

package/src/components/Pagination/core/_Pagination.ts

@@ -139,24 +139,6 @@ export class Pagination extends LitElement implements PaginationProps {
     return this._generatePages();
   }
 
-  updated(changedProperties: Map<string, unknown>) {
-    if (
-      changedProperties.has('current') ||
-      changedProperties.has('totalPages') ||
-      changedProperties.has('offset')
-    ) {
-      // Focus current page button after update using querySelector
-      this.updateComplete.then(() => {
-        const currentButton = this.shadowRoot?.querySelector(
-          `button[data-page="${this.current}"]`
-        ) as HTMLButtonElement;
-        if (currentButton) {
-          currentButton.focus();
-        }
-      });
-    }
-  }
-
   private _generatePages(): PageArrayItem[] {
     if (this.totalPages <= 1) {
       return [1];
@@ -258,6 +240,16 @@ export class Pagination extends LitElement implements PaginationProps {
     if (this.onPageChange) {
       this.onPageChange(pageChangeEvent);
     }
+
+    // Focus the new current page button after re-render (only when user clicked)
+    this.updateComplete.then(() => {
+      const currentButton = this.shadowRoot?.querySelector(
+        `button[data-page="${this.current}"]`
+      ) as HTMLButtonElement;
+      if (currentButton) {
+        currentButton.focus();
+      }
+    });
   }
 
   private _getJustifyClass(): string {