@a2ui/web_core 0.8.0

package/dist/src/v0_8/styles/behavior.d.ts

@@ -0,0 +1,2 @@
+export declare const behavior: string;
+//# sourceMappingURL=behavior.d.ts.map

package/dist/src/v0_8/styles/behavior.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"behavior.d.ts","sourceRoot":"","sources":["../../../../src/v0_8/styles/behavior.ts"],"names":[],"mappings":"AA4BA,eAAO,MAAM,QAAQ,QA0BpB,CAAC"}

package/dist/src/v0_8/styles/behavior.js

@@ -0,0 +1,54 @@
+/*
+ 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;
+  }
+`;
+//# sourceMappingURL=behavior.js.map

package/dist/src/v0_8/styles/behavior.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"behavior.js","sourceRoot":"","sources":["../../../../src/v0_8/styles/behavior.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,MAAM,eAAe,GAAG;;;;;;;;;;IAUpB,CAAC;AAEL,MAAM,CAAC,MAAM,QAAQ,GAAG;IACpB,IAAI,KAAK,CAAC,EAAE,CAAC;KACZ,IAAI,CAAC,CAAC,CAAC;KACP,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;IACd,OAAO,gBAAgB,GAAG,GAAG,CAAC;uBACb,GAAG,GAAG,EAAE;YACnB,eAAe;UACjB,CAAC;AACP,CAAC,CAAC;KACD,IAAI,CAAC,IAAI,CAAC;;;;;;;;;;;;;;;;;CAiBd,CAAC"}

package/dist/src/v0_8/styles/border.d.ts

@@ -0,0 +1,2 @@
+export declare const border: string;
+//# sourceMappingURL=border.d.ts.map

package/dist/src/v0_8/styles/border.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border.d.ts","sourceRoot":"","sources":["../../../../src/v0_8/styles/border.ts"],"names":[],"mappings":"AAkBA,eAAO,MAAM,MAAM,QAuBlB,CAAC"}

package/dist/src/v0_8/styles/border.js

@@ -0,0 +1,41 @@
+/*
+ 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;
+  }
+`;
+//# sourceMappingURL=border.js.map

package/dist/src/v0_8/styles/border.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"border.js","sourceRoot":"","sources":["../../../../src/v0_8/styles/border.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,IAAI,KAAK,CAAC,EAAE,CAAC;KACZ,IAAI,CAAC,CAAC,CAAC;KACP,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;IACd,OAAO;qBACQ,GAAG,oBAAoB,GAAG;sBACzB,GAAG,wBAAwB,GAAG;sBAC9B,GAAG,2BAA2B,GAAG;sBACjC,GAAG,yBAAyB,GAAG;sBAC/B,GAAG,0BAA0B,GAAG;;qBAEjC,GAAG,qBAAqB,GAAG;qBAC3B,GAAG,qBAAqB,GAAG,GAAG,IAAI,wBAAwB,CAAC;AAC5E,CAAC,CAAC;KACD,IAAI,CAAC,IAAI,CAAC;;;;;;;;;CASd,CAAC"}

package/dist/src/v0_8/styles/colors.d.ts

@@ -0,0 +1,2 @@
+export declare const colors: string[];
+//# sourceMappingURL=colors.d.ts.map

package/dist/src/v0_8/styles/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../src/v0_8/styles/colors.ts"],"names":[],"mappings":"AAmFA,eAAO,MAAM,MAAM,UAgBlB,CAAC"}

package/dist/src/v0_8/styles/colors.js

@@ -0,0 +1,80 @@
+/*
+ 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 { shades } from "../types/colors.js";
+import { toProp } from "./utils.js";
+const color = (src) => `
+    ${src
+    .map((key) => {
+    const inverseKey = getInverseKey(key);
+    return `.color-bc-${key} { border-color: light-dark(var(${toProp(key)}), var(${toProp(inverseKey)})); }`;
+})
+    .join("\n")}
+
+    ${src
+    .map((key) => {
+    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) => {
+    const inverseKey = getInverseKey(key);
+    return `.color-c-${key} { color: light-dark(var(${toProp(key)}), var(${toProp(inverseKey)})); }`;
+})
+    .join("\n")}
+  `;
+const getInverseKey = (key) => {
+    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 = (prefix) => {
+    return shades.map((v) => `${prefix}${v}`);
+};
+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);
+    }
+  `,
+];
+//# sourceMappingURL=colors.js.map

package/dist/src/v0_8/styles/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../../src/v0_8/styles/colors.ts"],"names":[],"mappings":"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"}

package/dist/src/v0_8/styles/icons.d.ts

@@ -0,0 +1,11 @@
+/**
+ * CSS classes for Google Symbols.
+ *
+ * Usage:
+ *
+ * ```html
+ * <span class="g-icon">pen_spark</span>
+ * ```
+ */
+export declare const icons = "\n  .g-icon {\n    font-family: \"Material Symbols Outlined\", \"Google Symbols\";\n    font-weight: normal;\n    font-style: normal;\n    font-display: optional;\n    font-size: 20px;\n    width: 1em;\n    height: 1em;\n    user-select: none;\n    line-height: 1;\n    letter-spacing: normal;\n    text-transform: none;\n    display: inline-block;\n    white-space: nowrap;\n    word-wrap: normal;\n    direction: ltr;\n    -webkit-font-feature-settings: \"liga\";\n    -webkit-font-smoothing: antialiased;\n    overflow: hidden;\n\n    font-variation-settings: \"FILL\" 0, \"wght\" 300, \"GRAD\" 0, \"opsz\" 48,\n      \"ROND\" 100;\n\n    &.filled {\n      font-variation-settings: \"FILL\" 1, \"wght\" 300, \"GRAD\" 0, \"opsz\" 48,\n        \"ROND\" 100;\n    }\n\n    &.filled-heavy {\n      font-variation-settings: \"FILL\" 1, \"wght\" 700, \"GRAD\" 0, \"opsz\" 48,\n        \"ROND\" 100;\n    }\n  }\n";
+//# sourceMappingURL=icons.d.ts.map

package/dist/src/v0_8/styles/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../src/v0_8/styles/icons.ts"],"names":[],"mappings":"AAgBA;;;;;;;;GAQG;AACH,eAAO,MAAM,KAAK,k5BAkCjB,CAAC"}

package/dist/src/v0_8/styles/icons.js

@@ -0,0 +1,60 @@
+/*
+ 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;
+    }
+  }
+`;
+//# sourceMappingURL=icons.js.map

package/dist/src/v0_8/styles/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../../src/v0_8/styles/icons.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCpB,CAAC"}

package/dist/src/v0_8/styles/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./utils.js";
+export declare const structuralStyles: string;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/v0_8/styles/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v0_8/styles/index.ts"],"names":[],"mappings":"AAwBA,cAAc,YAAY,CAAC;AAE3B,eAAO,MAAM,gBAAgB,EAAE,MAUlB,CAAC"}

package/dist/src/v0_8/styles/index.js

@@ -0,0 +1,35 @@
+/*
+ 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 = [
+    behavior,
+    border,
+    colors,
+    icons,
+    layout,
+    opacity,
+    type,
+]
+    .flat(Infinity)
+    .join("\n");
+//# sourceMappingURL=index.js.map

package/dist/src/v0_8/styles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/v0_8/styles/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,cAAc,YAAY,CAAC;AAE3B,MAAM,CAAC,MAAM,gBAAgB,GAAW;IACtC,QAAQ;IACR,MAAM;IACN,MAAM;IACN,KAAK;IACL,MAAM;IACN,OAAO;IACP,IAAI;CACL;KACE,IAAI,CAAC,QAAQ,CAAC;KACd,IAAI,CAAC,IAAI,CAAC,CAAC"}

package/dist/src/v0_8/styles/layout.d.ts

@@ -0,0 +1,2 @@
+export declare const layout: string;
+//# sourceMappingURL=layout.d.ts.map

package/dist/src/v0_8/styles/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../src/v0_8/styles/layout.ts"],"names":[],"mappings":"AAkBA,eAAO,MAAM,MAAM,QAwNlB,CAAC"}

package/dist/src/v0_8/styles/layout.js

@@ -0,0 +1,232 @@
+/*
+ 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);
+  }
+`;
+//# sourceMappingURL=layout.js.map

package/dist/src/v0_8/styles/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../../src/v0_8/styles/layout.ts"],"names":[],"mappings":"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"}

package/dist/src/v0_8/styles/opacity.d.ts

@@ -0,0 +1,2 @@
+export declare const opacity: string;
+//# sourceMappingURL=opacity.d.ts.map

package/dist/src/v0_8/styles/opacity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"opacity.d.ts","sourceRoot":"","sources":["../../../../src/v0_8/styles/opacity.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,OAAO,QAOnB,CAAC"}

package/dist/src/v0_8/styles/opacity.js

@@ -0,0 +1,24 @@
+/*
+ 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")}
+`;
+//# sourceMappingURL=opacity.js.map

package/dist/src/v0_8/styles/opacity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"opacity.js","sourceRoot":"","sources":["../../../../src/v0_8/styles/opacity.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG;IACnB,IAAI,KAAK,CAAC,EAAE,CAAC;KACZ,IAAI,CAAC,CAAC,CAAC;KACP,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;IACd,OAAO,eAAe,GAAG,GAAG,CAAC,eAAe,GAAG,GAAG,EAAE,KAAK,CAAC;AAC5D,CAAC,CAAC;KACD,IAAI,CAAC,IAAI,CAAC;CACd,CAAC"}

package/dist/src/v0_8/styles/shared.d.ts

@@ -0,0 +1,2 @@
+export declare const grid = 4;
+//# sourceMappingURL=shared.d.ts.map

package/dist/src/v0_8/styles/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../../src/v0_8/styles/shared.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,IAAI,IAAI,CAAC"}

package/dist/src/v0_8/styles/shared.js

@@ -0,0 +1,17 @@
+/*
+ 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;
+//# sourceMappingURL=shared.js.map

package/dist/src/v0_8/styles/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../../src/v0_8/styles/shared.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,CAAC"}

package/dist/src/v0_8/styles/type.d.ts

@@ -0,0 +1,2 @@
+export declare const type: string;
+//# sourceMappingURL=type.d.ts.map

package/dist/src/v0_8/styles/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/v0_8/styles/type.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,IAAI,QA2IhB,CAAC"}