@useinsider/guido 3.18.2-beta.9be830c → 3.18.2-beta.a39b494

package/dist/composables/useAccessibilityApi.js

@@ -1,35 +0,0 @@
-import { useEditorStore as r } from "../stores/editor.js";
-const A = () => {
-  const e = r(), i = () => window.StripoEditorApi.accessibilityApi, s = () => {
-    i().openAccessibilityTestingMode(), e.isAccessibilityTestingOpen = !0;
-  }, o = () => {
-    try {
-      i().closeAccessibilityTestingMode();
-    } finally {
-      e.isAccessibilityTestingOpen = !1, e.imagesHidden = !1, e.colorVisionDeficiency = "";
-    }
-  }, l = () => e.isAccessibilityTestingOpen ? o() : s(), g = () => i().isAccessibilityTestingModeOpen(), t = () => {
-    i().showImages(), e.imagesHidden = !1;
-  }, c = () => {
-    i().hideImages(), e.imagesHidden = !0;
-  };
-  return {
-    openAccessibilityTestingMode: s,
-    closeAccessibilityTestingMode: o,
-    toggleAccessibilityTestingMode: l,
-    isAccessibilityTestingModeOpen: g,
-    showImages: t,
-    hideImages: c,
-    toggleImages: () => e.imagesHidden ? t() : c(),
-    setColorVisionDeficiency: (n) => {
-      i().setColorVisionDeficiency(n), e.colorVisionDeficiency = n;
-    },
-    getColorVisionDeficiency: () => i().getColorVisionDeficiency(),
-    switchToDesktopPreview: () => i().switchToDesktopPreview(),
-    switchToMobilePreview: () => i().switchToMobilePreview(),
-    toggleCodeEditor: () => i().emitToggleCodeEditor()
-  };
-};
-export {
-  A as useAccessibilityApi
-};

package/dist/node_modules/@vueuse/core/index.js

@@ -1,102 +0,0 @@
-import { noop as b, isIOS as F, isClient as O, toValue as h, isObject as T, tryOnScopeDispose as C } from "../shared/index.js";
-import { createFilterWrapper as x, debounceFilter as D, useDebounceFn as j } from "../shared/index.js";
-import "../../vue-demi/lib/index.js";
-import { watch as I } from "vue";
-const P = O ? window : void 0;
-function p(n) {
-  var i;
-  const o = h(n);
-  return (i = o == null ? void 0 : o.$el) != null ? i : o;
-}
-function k(...n) {
-  let i, o, r, d;
-  if (typeof n[0] == "string" || Array.isArray(n[0]) ? ([o, r, d] = n, i = P) : [i, o, r, d] = n, !i)
-    return b;
-  Array.isArray(o) || (o = [o]), Array.isArray(r) || (r = [r]);
-  const m = [], y = () => {
-    m.forEach((c) => c()), m.length = 0;
-  }, a = (c, l, u, f) => (c.addEventListener(l, u, f), () => c.removeEventListener(l, u, f)), E = I(
-    () => [p(i), h(d)],
-    ([c, l]) => {
-      if (y(), !c)
-        return;
-      const u = T(l) ? { ...l } : l;
-      m.push(
-        ...o.flatMap((f) => r.map((w) => a(c, f, w, u)))
-      );
-    },
-    { immediate: !0, flush: "post" }
-  ), A = () => {
-    E(), y();
-  };
-  return C(A), A;
-}
-let L = !1;
-function $(n, i, o = {}) {
-  const { window: r = P, ignore: d = [], capture: m = !0, detectIframe: y = !1 } = o;
-  if (!r)
-    return b;
-  F && !L && (L = !0, Array.from(r.document.body.children).forEach((e) => e.addEventListener("click", b)), r.document.documentElement.addEventListener("click", b));
-  let a = !0;
-  const E = (e) => h(d).some((t) => {
-    if (typeof t == "string")
-      return Array.from(r.document.querySelectorAll(t)).some((s) => s === e.target || e.composedPath().includes(s));
-    {
-      const s = p(t);
-      return s && (e.target === s || e.composedPath().includes(s));
-    }
-  });
-  function A(e) {
-    const t = h(e);
-    return t && t.$.subTree.shapeFlag === 16;
-  }
-  function c(e, t) {
-    const s = h(e), v = s.$.subTree && s.$.subTree.children;
-    return v == null || !Array.isArray(v) ? !1 : v.some((g) => g.el === t.target || t.composedPath().includes(g.el));
-  }
-  const l = (e) => {
-    const t = p(n);
-    if (e.target != null && !(!(t instanceof Element) && A(n) && c(n, e)) && !(!t || t === e.target || e.composedPath().includes(t))) {
-      if (e.detail === 0 && (a = !E(e)), !a) {
-        a = !0;
-        return;
-      }
-      i(e);
-    }
-  };
-  let u = !1;
-  const f = [
-    k(r, "click", (e) => {
-      u || (u = !0, setTimeout(() => {
-        u = !1;
-      }, 0), l(e));
-    }, { passive: !0, capture: m }),
-    k(r, "pointerdown", (e) => {
-      const t = p(n);
-      a = !E(e) && !!(t && !e.composedPath().includes(t));
-    }, { passive: !0 }),
-    y && k(r, "blur", (e) => {
-      setTimeout(() => {
-        var t;
-        const s = p(n);
-        ((t = r.document.activeElement) == null ? void 0 : t.tagName) === "IFRAME" && !(s != null && s.contains(r.document.activeElement)) && i(e);
-      }, 0);
-    })
-  ].filter(Boolean);
-  return () => f.forEach((e) => e());
-}
-export {
-  x as createFilterWrapper,
-  D as debounceFilter,
-  P as defaultWindow,
-  O as isClient,
-  F as isIOS,
-  T as isObject,
-  b as noop,
-  $ as onClickOutside,
-  h as toValue,
-  C as tryOnScopeDispose,
-  p as unrefElement,
-  j as useDebounceFn,
-  k as useEventListener
-};

package/dist/src/components/organisms/header/EditorActionsMenu.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _default;

package/dist/src/components/organisms/header/accessibility/AccessibilityToolbar.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _default;

package/dist/src/components/organisms/header/accessibility/ColorVisionSelect.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _default;

package/dist/src/components/organisms/onboarding/EditorTabBarOnboarding.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _default;

package/dist/src/composables/useAccessibilityApi.d.ts

@@ -1,15 +0,0 @@
-import type { ColorVisionDeficiency } from '@@/Types/api/accessibility-api';
-export declare const useAccessibilityApi: () => {
-    openAccessibilityTestingMode: () => void;
-    closeAccessibilityTestingMode: () => void;
-    toggleAccessibilityTestingMode: () => void;
-    isAccessibilityTestingModeOpen: () => boolean;
-    showImages: () => void;
-    hideImages: () => void;
-    toggleImages: () => void;
-    setColorVisionDeficiency: (type: ColorVisionDeficiency) => void;
-    getColorVisionDeficiency: () => ColorVisionDeficiency;
-    switchToDesktopPreview: () => void;
-    switchToMobilePreview: () => void;
-    toggleCodeEditor: () => void;
-};

package/dist/static/styles/components/accessibility.css.js

@@ -1,282 +0,0 @@
-const e = `/* Stripo Accessibility Checker panel (ue-accessibility-panel).
-   Stripo's defaults derive icon/button/outline colors from --ue-primary-color,
-   whose stock hue is green (129) — Figma DT-33912 wants Insider blue. */
-
-/* Stripo sizes the panel to its content (max-height: 100%), so short tabs (Ignored, empty
-   states) end mid-page; the design keeps it full height in every state. */
-ue-ui-simple-panel.accessibility-panel,
-ue-accessibility-panel {
-    height: 100%;
-}
-
-/* The refresh button only renders once results land; reserve its 50x50 slot so the
-   header keeps the same height and title width while the check is loading. */
-ue-accessibility-panel .header-control-panel-right {
-    min-width: 50px;
-    min-height: 50px;
-}
-
-/* Failed / Passed / Ignored count chips. Stripo paints them as filled
-   red/green/blue pills via .accent.error / .accent.success. */
-ue-accessibility-panel .tabs-header .accent {
-    min-width: 21px;
-    margin-left: 8px;
-    padding: 3px 5px;
-    border: 1px solid var(--guido-color-gray-300);
-    border-radius: 4px;
-    background-color: var(--guido-color-white);
-    color: var(--guido-color-gray-800);
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 16px;
-}
-
-ue-accessibility-panel .tabs-header button.checked .accent {
-    border-color: var(--guido-color-primary-500);
-    color: var(--guido-color-primary-500);
-}
-
-/* Issue card */
-ue-accessibility-panel .issue-card-surface {
-    border-radius: 8px;
-    outline: 1px solid var(--guido-color-gray-300);
-    outline-offset: -1px;
-}
-
-ue-accessibility-panel .issue-card-surface--active {
-    outline-color: var(--guido-color-primary-500);
-}
-
-ue-accessibility-panel .issue-card-title {
-    color: var(--guido-color-gray-800);
-}
-
-/* Per-issue help "?" icon: 14x14 glyph centered in a 24x24 hit area. Stripo
-   renders the ue-icon svg at width/height 100%, so it fills the whole box —
-   pin the svg to 14px and center it. */
-ue-accessibility-panel .issue-card-header-row .icon-help {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    color: var(--guido-color-gray-600);
-}
-
-ue-accessibility-panel .issue-card-header-row .icon-help svg {
-    width: 14px;
-    height: 14px;
-}
-
-/* Severity icons: Critical (cross-circle), Serious (warning), Moderate (info) */
-ue-accessibility-panel .issue-card-header-row ue-icon-component.danger {
-    color: var(--guido-color-danger-500);
-}
-
-ue-accessibility-panel .issue-card-header-row ue-icon-component.warning {
-    color: var(--guido-color-warning-500);
-}
-
-ue-accessibility-panel .issue-card-header-row ue-icon-component.info {
-    color: var(--guido-color-primary-500);
-}
-
-/* Passed tab is read-only. Stripo already blocks pointer events on these controls but only
-   styles the alt-text input as disabled; give the selects and color inputs the same look. */
-ue-accessibility-passed-tab input,
-ue-accessibility-passed-tab ue-select .toggle-select-button {
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
-/* Contrast card rows (Figma 4522:11243): a 10px section inset holding 50px rows with 16px
-   side padding, so labels and swatches sit 26px in while the action buttons stay at 10px. */
-ue-accessibility-panel .controls-separator-line:has(.fit-to-color) {
-    padding: 10px;
-}
-
-/* Passed cards pin a 24px instance-count badge 8px off the bottom-right corner, where the
-   right-aligned ratio now ends; keep the last row clear of it. */
-ue-accessibility-passed-tab .controls-separator-line:has(.fit-to-color) {
-    padding-bottom: 34px;
-}
-
-ue-accessibility-panel .controls-separator-line:has(.fit-to-color) .sub-container.two-columns {
-    box-sizing: border-box;
-    min-height: 50px;
-    padding: 5px 16px;
-    align-items: center;
-}
-
-/* Ratio value: Stripo left-aligns it in a swatch-wide box; the design ends it at the
-   swatches' right edge, behind a 16px glyph in a 24px icon box. */
-ue-accessibility-panel .controls-list.fit-to-color {
-    justify-content: flex-end;
-    align-items: center;
-    gap: 0;
-    font-size: 13px;
-    line-height: 16px;
-}
-
-ue-accessibility-panel .controls-list.fit-to-color ue-icon-component {
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    margin: 0;
-}
-
-ue-accessibility-panel .controls-list.fit-to-color ue-icon-component svg {
-    width: 16px;
-    height: 16px;
-}
-
-ue-accessibility-panel .controls-list.fit-to-color ue-icon-component.warning {
-    color: var(--guido-color-warning-500);
-}
-
-/* Empty states (Figma 5122:17577, DS InNoData): the DS "no-personalization" art above a
-   title and description, centered in the tab. Failed/Ignored text comes from localePatch as
-   "Title\\nDescription" and ::first-line styles the title; Passed renders nothing when empty,
-   so it gets the same box from generated content. */
-ue-accessibility-panel {
-    --ue-accessibility-image-width: 240px;
-    --ue-accessibility-image-height: 240px;
-}
-
-/* The scroll area only grows to its content (max-height: 100%); stretch it to the panel
-   bottom so the empty state can center in the space below the tabs. */
-ue-accessibility-panel ue-scrollable-container:has(.accessibility-list-empty, ue-accessibility-passed-tab:empty) {
-    flex-grow: 1;
-}
-
-ue-accessibility-panel ue-scrollable-container:has(.accessibility-list-empty, ue-accessibility-passed-tab:empty) .ue-scrollable {
-    height: 100%;
-}
-
-ue-accessibility-panel .ue-scrollable-content:has(.accessibility-list-empty, ue-accessibility-passed-tab:empty) {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    min-height: 100%;
-}
-
-ue-accessibility-panel .accessibility-list-empty.light-theme.failed-list,
-ue-accessibility-panel .accessibility-list-empty.light-theme.ignored-list,
-ue-accessibility-passed-tab:empty::before {
-    display: block;
-    height: auto;
-    margin: 0;
-    padding: 248px 16px 0;
-    background: url("https://image.useinsider.com/insider-design-system/img/speacial/no-personalization.svg") no-repeat center top / 240px 240px;
-    color: var(--guido-color-neutral-500);
-    font-size: 15px;
-    line-height: 24px;
-    text-align: center;
-    white-space: pre-line;
-}
-
-/* Stripo renders nothing at all for an empty Passed tab, so this copy cannot come from the
-   localePatch like its Failed/Ignored siblings in src/config/i18n/en/labels.json — keep the
-   three wordings in step by hand. \`display: block\` makes the host a block container so
-   ::first-line below can reach the title inside the generated content. */
-ue-accessibility-passed-tab:empty {
-    display: block;
-}
-
-ue-accessibility-passed-tab:empty::before {
-    content: "No Passed Items\\A You have no passed items.";
-}
-
-/* Title is 18/24 with InNoData's 8px gap below it; a 40px line box gives both, and its
-   extra 8px on top is why the padding above is 248px, not 240 + 16. */
-ue-accessibility-panel .accessibility-list-empty::first-line,
-ue-accessibility-passed-tab:empty::first-line {
-    color: var(--guido-color-neutral-700);
-    font-size: 18px;
-    line-height: 40px;
-}
-
-/* Card actions: Ignore / Un-ignore / Auto-tune are neutral, Apply is primary */
-ue-accessibility-panel .e2e-ignore-button > .button,
-ue-accessibility-panel .e2e-unignore-button > .button,
-ue-accessibility-panel .e2e-auto-tune-button > .button {
-    border: none;
-    background-color: var(--guido-color-neutral-200);
-    color: var(--guido-color-neutral-800);
-}
-
-ue-accessibility-panel .e2e-ignore-button > .button .icon-button,
-ue-accessibility-panel .e2e-unignore-button > .button .icon-button,
-ue-accessibility-panel .e2e-auto-tune-button > .button .icon-button {
-    color: var(--guido-color-neutral-800);
-}
-
-ue-accessibility-panel .e2e-ignore-button > .button:hover:not(:disabled,.disabled),
-ue-accessibility-panel .e2e-unignore-button > .button:hover:not(:disabled,.disabled),
-ue-accessibility-panel .e2e-auto-tune-button > .button:hover:not(:disabled,.disabled) {
-    background-color: var(--guido-color-neutral-100);
-}
-
-ue-accessibility-panel .e2e-apply-button > .button {
-    border: none;
-    background-color: var(--guido-color-primary-100);
-    color: var(--guido-color-primary-500);
-}
-
-ue-accessibility-panel .e2e-apply-button > .button .icon-button {
-    color: var(--guido-color-primary-500);
-}
-
-ue-accessibility-panel .e2e-apply-button > .button:hover:not(:disabled,.disabled) {
-    background-color: var(--guido-color-primary-0);
-}
-
-/* Re-run check button (header control). Stripo tints the rotate icon with
-   --ue-primary-color; Figma DT-33912 wants Insider primary. Not inside
-   ue-accessibility-panel, so scoped by its own e2e class. */
-.e2e-accessibility-refresh .icon-button {
-    color: var(--guido-color-primary-500);
-}
-
-/* Help-icon hint. The popover is portalled outside the panel, so it cannot be
-   scoped to ue-accessibility-panel. Stripo tints the link with --ue-primary-color. */
-.ue-popover.dark,
-.ue-popover.dark-tiny {
-    border-radius: 4px;
-    background: var(--guido-color-gray-800);
-    box-shadow: 0 15px 17.5px rgb(0 0 0 / 10%), 0 8px 5px rgb(0 0 0 / 10%);
-    color: var(--guido-color-white);
-    font-size: 13px;
-    line-height: 16px;
-}
-
-.ue-popover.dark .popup-pointer ue-icon-component svg,
-.ue-popover.dark-tiny .popup-pointer ue-icon-component svg {
-    fill: var(--guido-color-gray-800);
-}
-
-/* Any anchor in the hint, not just the ue-description wrapper: the accessibility
-   checker's "Read more … ACT Rules Community Group forum." link renders outside it
-   and would otherwise keep Stripo's primary tint, unreadable on the dark surface.
-   The ue-description forms match Stripo's own \`.ue-popover.dark-tiny ue-description a\`
-   specificity; this file is appended last, so the tie goes to Figma's white link. */
-.ue-popover.dark a,
-.ue-popover.dark-tiny a,
-.ue-popover.dark ue-description a,
-.ue-popover.dark-tiny ue-description a {
-    color: var(--guido-color-white);
-    text-decoration: underline;
-}
-
-/* Stripo ships \`ue-description a { display: none }\`, which hides the per-rule "Read more"
-   link even though it already carries the right ACT/Deque URL. Re-show only those links,
-   keyed by host, so no other editor hint starts showing links Stripo meant to hide. */
-.ue-popover ue-description a[href^="https://act-rules.github.io/"],
-.ue-popover ue-description a[href^="https://dequeuniversity.com/"] {
-    display: inline;
-}
-`;
-export {
-  e as default
-};