@a2ui/web_core 0.8.0 → 0.9.1-alpha.0

package/src/v0_8/events/validation-event.ts

@@ -1,66 +0,0 @@
-/**
- * Copyright 2025 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { BaseEventDetail } from "./base.js";
-
-/**
- * Detailed payload for the `a2ui-validation-input` event.
- */
-export interface ValidationEventDetail
-  extends BaseEventDetail<"a2ui-validation-input"> {
-  /**
-   * The ID of the component that is being validated.
-   */
-  readonly componentId: string;
-
-  /**
-   * The current value of the input component.
-   */
-  readonly value: string;
-
-  /**
-   * Whether the current value matches the validation constraints.
-   */
-  readonly valid: boolean;
-}
-
-/**
- * Event dispatched when an input component's validation state is updated.
- */
-export class A2UIValidationEvent extends CustomEvent<ValidationEventDetail> {
-  static readonly EVENT_NAME = "a2ui-validation-input";
-
-  constructor(
-    detail: Omit<ValidationEventDetail, "eventType">,
-    eventInitDict?: EventInit
-  ) {
-    super(A2UIValidationEvent.EVENT_NAME, {
-      bubbles: true,
-      composed: true,
-      ...eventInitDict,
-      detail: {
-        ...detail,
-        eventType: A2UIValidationEvent.EVENT_NAME,
-      },
-    });
-  }
-}
-
-declare global {
-  interface HTMLElementEventMap {
-    "a2ui-validation-input": A2UIValidationEvent;
-  }
-}

package/src/v0_8/index.ts

@@ -1,12 +0,0 @@
-export * from "./data/model-processor.js";
-export * from "./data/guards.js";
-export * from "./types/primitives.js";
-export * from "./types/types.js";
-export * from "./types/colors.js";
-export * from "./styles/index.js";
-export * as Events from "./events/index.js";
-import A2UIClientEventMessage from "./schemas/server_to_client_with_standard_catalog.json" with { type: "json" };
-
-export const Schemas = {
-  A2UIClientEventMessage,
-};

package/src/v0_8/styles/behavior.ts

@@ -1,55 +0,0 @@
-/*
- Copyright 2025 Google LLC
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
-      https://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
- */
-
-const opacityBehavior = `
-  &:not([disabled]) {
-    cursor: pointer;
-    opacity: var(--opacity, 0);
-    transition: opacity var(--speed, 0.2s) cubic-bezier(0, 0, 0.3, 1);
-
-    &:hover,
-    &:focus {
-      opacity: 1;
-    }
-  }`;
-
-export const behavior = `
-  ${new Array(21)
-    .fill(0)
-    .map((_, idx) => {
-      return `.behavior-ho-${idx * 5} {
-          --opacity: ${idx / 20};
-          ${opacityBehavior}
-        }`;
-    })
-    .join("\n")}
-
-  .behavior-o-s {
-    overflow: scroll;
-  }
-
-  .behavior-o-a {
-    overflow: auto;
-  }
-
-  .behavior-o-h {
-    overflow: hidden;
-  }
-
-  .behavior-sw-n {
-    scrollbar-width: none;
-  }
-`;

package/src/v0_8/styles/border.ts

@@ -1,42 +0,0 @@
-/*
- Copyright 2025 Google LLC
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
-      https://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
- */
-
-import { grid } from "./shared.js";
-
-export const border = `
-  ${new Array(25)
-    .fill(0)
-    .map((_, idx) => {
-      return `
-        .border-bw-${idx} { border-width: ${idx}px; }
-        .border-btw-${idx} { border-top-width: ${idx}px; }
-        .border-bbw-${idx} { border-bottom-width: ${idx}px; }
-        .border-blw-${idx} { border-left-width: ${idx}px; }
-        .border-brw-${idx} { border-right-width: ${idx}px; }
-
-        .border-ow-${idx} { outline-width: ${idx}px; }
-        .border-br-${idx} { border-radius: ${idx * grid}px; overflow: hidden;}`;
-    })
-    .join("\n")}
-
-  .border-br-50pc {
-    border-radius: 50%;
-  }
-
-  .border-bs-s {
-    border-style: solid;
-  }
-`;

package/src/v0_8/styles/colors.ts

@@ -1,100 +0,0 @@
-/*
- Copyright 2025 Google LLC
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
-      https://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
- */
-
-import { PaletteKey, PaletteKeyVals, shades } from "../types/colors.js";
-import { toProp } from "./utils.js";
-
-const color = <C extends PaletteKeyVals>(src: PaletteKey<C>) =>
-  `
-    ${src
-      .map((key: string) => {
-        const inverseKey = getInverseKey(key);
-        return `.color-bc-${key} { border-color: light-dark(var(${toProp(
-          key
-        )}), var(${toProp(inverseKey)})); }`;
-      })
-      .join("\n")}
-
-    ${src
-      .map((key: string) => {
-        const inverseKey = getInverseKey(key);
-        const vals = [
-          `.color-bgc-${key} { background-color: light-dark(var(${toProp(
-            key
-          )}), var(${toProp(inverseKey)})); }`,
-          `.color-bbgc-${key}::backdrop { background-color: light-dark(var(${toProp(
-            key
-          )}), var(${toProp(inverseKey)})); }`,
-        ];
-
-        for (let o = 0.1; o < 1; o += 0.1) {
-          vals.push(`.color-bbgc-${key}_${(o * 100).toFixed(0)}::backdrop {
-            background-color: light-dark(oklch(from var(${toProp(
-              key
-            )}) l c h / calc(alpha * ${o.toFixed(1)})), oklch(from var(${toProp(
-            inverseKey
-          )}) l c h / calc(alpha * ${o.toFixed(1)})) );
-          }
-        `);
-        }
-
-        return vals.join("\n");
-      })
-      .join("\n")}
-
-  ${src
-    .map((key: string) => {
-      const inverseKey = getInverseKey(key);
-      return `.color-c-${key} { color: light-dark(var(${toProp(
-        key
-      )}), var(${toProp(inverseKey)})); }`;
-    })
-    .join("\n")}
-  `;
-
-const getInverseKey = (key: string): string => {
-  const match = key.match(/^([a-z]+)(\d+)$/);
-  if (!match) return key;
-  const [, prefix, shadeStr] = match;
-  const shade = parseInt(shadeStr, 10);
-  const target = 100 - shade;
-  const inverseShade = shades.reduce((prev, curr) =>
-    Math.abs(curr - target) < Math.abs(prev - target) ? curr : prev
-  );
-  return `${prefix}${inverseShade}`;
-};
-
-const keyFactory = <K extends PaletteKeyVals>(prefix: K) => {
-  return shades.map((v) => `${prefix}${v}`) as PaletteKey<K>;
-};
-
-export const colors = [
-  color(keyFactory("p")),
-  color(keyFactory("s")),
-  color(keyFactory("t")),
-  color(keyFactory("n")),
-  color(keyFactory("nv")),
-  color(keyFactory("e")),
-  `
-    .color-bgc-transparent {
-      background-color: transparent;
-    }
-
-    :host {
-      color-scheme: var(--color-scheme);
-    }
-  `,
-];

package/src/v0_8/styles/icons.ts

@@ -1,60 +0,0 @@
-/*
- Copyright 2025 Google LLC
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
-      https://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
- */
-
-/**
- * CSS classes for Google Symbols.
- *
- * Usage:
- *
- * ```html
- * <span class="g-icon">pen_spark</span>
- * ```
- */
-export const icons = `
-  .g-icon {
-    font-family: "Material Symbols Outlined", "Google Symbols";
-    font-weight: normal;
-    font-style: normal;
-    font-display: optional;
-    font-size: 20px;
-    width: 1em;
-    height: 1em;
-    user-select: none;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -webkit-font-feature-settings: "liga";
-    -webkit-font-smoothing: antialiased;
-    overflow: hidden;
-
-    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 48,
-      "ROND" 100;
-
-    &.filled {
-      font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 48,
-        "ROND" 100;
-    }
-
-    &.filled-heavy {
-      font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 48,
-        "ROND" 100;
-    }
-  }
-`;

package/src/v0_8/styles/index.ts

@@ -1,37 +0,0 @@
-/*
- Copyright 2025 Google LLC
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
-      https://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
- */
-
-import { behavior } from "./behavior.js";
-import { border } from "./border.js";
-import { colors } from "./colors.js";
-import { icons } from "./icons.js";
-import { layout } from "./layout.js";
-import { opacity } from "./opacity.js";
-import { type } from "./type.js";
-
-export * from "./utils.js";
-
-export const structuralStyles: string = [
-  behavior,
-  border,
-  colors,
-  icons,
-  layout,
-  opacity,
-  type,
-]
-  .flat(Infinity)
-  .join("\n");

package/src/v0_8/styles/layout.ts

@@ -1,235 +0,0 @@
-/*
- Copyright 2025 Google LLC
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
-      https://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
- */
-
-import { grid } from "./shared.js";
-
-export const layout = `
-  :host {
-    ${new Array(16)
-      .fill(0)
-      .map((_, idx) => {
-        return `--g-${idx + 1}: ${(idx + 1) * grid}px;`;
-      })
-      .join("\n")}
-  }
-
-  ${new Array(49)
-    .fill(0)
-    .map((_, index) => {
-      const idx = index - 24;
-      const lbl = idx < 0 ? `n${Math.abs(idx)}` : idx.toString();
-      return `
-        .layout-p-${lbl} { --padding: ${
-        idx * grid
-      }px; padding: var(--padding); }
-        .layout-pt-${lbl} { padding-top: ${idx * grid}px; }
-        .layout-pr-${lbl} { padding-right: ${idx * grid}px; }
-        .layout-pb-${lbl} { padding-bottom: ${idx * grid}px; }
-        .layout-pl-${lbl} { padding-left: ${idx * grid}px; }
-
-        .layout-m-${lbl} { --margin: ${idx * grid}px; margin: var(--margin); }
-        .layout-mt-${lbl} { margin-top: ${idx * grid}px; }
-        .layout-mr-${lbl} { margin-right: ${idx * grid}px; }
-        .layout-mb-${lbl} { margin-bottom: ${idx * grid}px; }
-        .layout-ml-${lbl} { margin-left: ${idx * grid}px; }
-
-        .layout-t-${lbl} { top: ${idx * grid}px; }
-        .layout-r-${lbl} { right: ${idx * grid}px; }
-        .layout-b-${lbl} { bottom: ${idx * grid}px; }
-        .layout-l-${lbl} { left: ${idx * grid}px; }`;
-    })
-    .join("\n")}
-
-  ${new Array(25)
-    .fill(0)
-    .map((_, idx) => {
-      return `
-        .layout-g-${idx} { gap: ${idx * grid}px; }`;
-    })
-    .join("\n")}
-
-  ${new Array(8)
-    .fill(0)
-    .map((_, idx) => {
-      return `
-        .layout-grd-col${idx + 1} { grid-template-columns: ${"1fr "
-        .repeat(idx + 1)
-        .trim()}; }`;
-    })
-    .join("\n")}
-
-  .layout-pos-a {
-    position: absolute;
-  }
-
-  .layout-pos-rel {
-    position: relative;
-  }
-
-  .layout-dsp-none {
-    display: none;
-  }
-
-  .layout-dsp-block {
-    display: block;
-  }
-
-  .layout-dsp-grid {
-    display: grid;
-  }
-
-  .layout-dsp-iflex {
-    display: inline-flex;
-  }
-
-  .layout-dsp-flexvert {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .layout-dsp-flexhor {
-    display: flex;
-    flex-direction: row;
-  }
-
-  .layout-fw-w {
-    flex-wrap: wrap;
-  }
-
-  .layout-al-fs {
-    align-items: start;
-  }
-
-  .layout-al-fe {
-    align-items: end;
-  }
-
-  .layout-al-c {
-    align-items: center;
-  }
-
-  .layout-as-n {
-    align-self: normal;
-  }
-
-  .layout-js-c {
-    justify-self: center;
-  }
-
-  .layout-sp-c {
-    justify-content: center;
-  }
-
-  .layout-sp-ev {
-    justify-content: space-evenly;
-  }
-
-  .layout-sp-bt {
-    justify-content: space-between;
-  }
-
-  .layout-sp-s {
-    justify-content: start;
-  }
-
-  .layout-sp-e {
-    justify-content: end;
-  }
-
-  .layout-ji-e {
-    justify-items: end;
-  }
-
-  .layout-r-none {
-    resize: none;
-  }
-
-  .layout-fs-c {
-    field-sizing: content;
-  }
-
-  .layout-fs-n {
-    field-sizing: none;
-  }
-
-  .layout-flx-0 {
-    flex: 0 0 auto;
-  }
-
-  .layout-flx-1 {
-    flex: 1 0 auto;
-  }
-
-  .layout-c-s {
-    contain: strict;
-  }
-
-  /** Widths **/
-
-  ${new Array(10)
-    .fill(0)
-    .map((_, idx) => {
-      const weight = (idx + 1) * 10;
-      return `.layout-w-${weight} { width: ${weight}%; max-width: ${weight}%; }`;
-    })
-    .join("\n")}
-
-  ${new Array(16)
-    .fill(0)
-    .map((_, idx) => {
-      const weight = idx * grid;
-      return `.layout-wp-${idx} { width: ${weight}px; }`;
-    })
-    .join("\n")}
-
-  /** Heights **/
-
-  ${new Array(10)
-    .fill(0)
-    .map((_, idx) => {
-      const height = (idx + 1) * 10;
-      return `.layout-h-${height} { height: ${height}%; }`;
-    })
-    .join("\n")}
-
-  ${new Array(16)
-    .fill(0)
-    .map((_, idx) => {
-      const height = idx * grid;
-      return `.layout-hp-${idx} { height: ${height}px; }`;
-    })
-    .join("\n")}
-
-  .layout-el-cv {
-    & img,
-    & video {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      margin: 0;
-    }
-  }
-
-  .layout-ar-sq {
-    aspect-ratio: 1 / 1;
-  }
-
-  .layout-ex-fb {
-    margin: calc(var(--padding) * -1) 0 0 calc(var(--padding) * -1);
-    width: calc(100% + var(--padding) * 2);
-    height: calc(100% + var(--padding) * 2);
-  }
-`;

package/src/v0_8/styles/opacity.ts

@@ -1,24 +0,0 @@
-/*
- Copyright 2025 Google LLC
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
-      https://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
- */
-
-export const opacity = `
-  ${new Array(21)
-    .fill(0)
-    .map((_, idx) => {
-      return `.opacity-el-${idx * 5} { opacity: ${idx / 20}; }`;
-    })
-    .join("\n")}
-`;

package/src/v0_8/styles/shared.ts

@@ -1,17 +0,0 @@
-/*
- Copyright 2025 Google LLC
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
-      https://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
- */
-
-export const grid = 4;