srcdev-nuxt-components 9.4.4 → 9.4.6

package/app/components/display-tooltip/DisplayTooltip.vue

@@ -1,170 +0,0 @@
-<template>
-  <div class="display-tooltip-core" :class="[elementClasses]" :style="`--anchor-name: ${tooltipAnchorName}`">
-    <div class="display-tooltip-trigger-wrapper body-md">
-      <slot v-if="slots.triggerContent" name="triggerContent"></slot>
-      <button
-        :popovertarget="tooltipId"
-        popovertargetaction="toggle"
-        class="display-tooltip-trigger-button"
-        :class="{ hide: hideTooltipTrigger }"
-        aria-label="Toggle the popover"
-      >
-        <Icon name="fa7-solid:circle-question" class="display-tooltip-trigger-icon" aria-hidden="true" />
-      </button>
-    </div>
-    <div :id="tooltipId" ref="popover1" popover class="display-tooltip-popover">
-      <div class="display-tooltip-popover-content">
-        <slot name="tooltipContent"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  tooltipId: {
-    type: String,
-    default: "",
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-});
-
-const slots = useSlots();
-const tooltipId = computed(() => {
-  return props.tooltipId.length ? props.tooltipId : `nuxt-tooltip-${useId()}`;
-});
-const tooltipAnchorName = `tooltip-anchor-${useId()}`;
-const hideTooltipTrigger = ref(false);
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-</script>
-
-<style lang="css">
-@layer components {
-.display-tooltip-core {
-  padding-block: 8px;
-  position: relative;
-
-  .display-tooltip-trigger-wrapper {
-    display: inline-flex;
-    align-items: flex-start;
-
-    .display-tooltip-trigger-button {
-      margin-left: 8px;
-
-      &.hide {
-        width: 0;
-        overflow: hidden;
-        opacity: 0;
-      }
-
-      .display-tooltip-trigger-icon {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 20px;
-        height: 20px;
-        color: var(--nuxt-text-header);
-        font-size: 18px;
-        line-height: 20px;
-      }
-    }
-  }
-
-  .display-tooltip-trigger-button {
-    all: unset;
-    aspect-ratio: 1 / 1;
-    width: 24px;
-    display: grid;
-    place-items: center;
-
-    outline: 1px solid transparent;
-    anchor-name: var(--anchor-name);
-
-    @supports (corner-shape: squircle) {
-      corner-shape: squircle;
-      border-radius: 50%;
-    }
-
-    &:hover {
-      cursor: pointer;
-      text-decoration: underline;
-    }
-
-    &:hover,
-    &:focus-visible {
-      outline-offset: 2px;
-    }
-  }
-
-  .display-tooltip-popover {
-    display: none;
-    position: absolute;
-    border: none;
-    width: 300px;
-
-    outline: 1px solid light-dark(black, white);
-    color: light-dark(black, white);
-    background-color: light-dark(white, black);
-    border-radius: 8px;
-
-    position-anchor: var(--anchor-name);
-    margin: 0;
-    inset: auto;
-    top: calc(anchor(top) + 0px);
-    left: calc(anchor(right) + 1px);
-    opacity: 0;
-    transition:
-      opacity 200ms,
-      display 200ms,
-      overlay 200ms;
-
-    transition-behavior: allow-discrete;
-    position-try-fallbacks: flip-inline;
-
-    /* .popover-action {
-      display: flex;
-      justify-content: flex-end;
-      padding: 8px;
-      border-bottom: 1px solid var(--nuxt-stroke-border-grey);
-    } */
-
-    .display-tooltip-popover-content {
-      .display-tooltip-close-button {
-        all: unset;
-        cursor: pointer;
-        color: var(--nuxt-text-accessibility-blue);
-        border: 1px solid var(--theme-border);
-        outline: 1px solid var(--theme-ring);
-
-        font-weight: 600;
-        padding: 8px 12px;
-
-        &:hover,
-        &:focus {
-          text-decoration: underline;
-          border: 1px solid var(--theme-surface);
-          outline: 1px solid var(--theme-surface);
-          outline-offset: 2px;
-        }
-      }
-    }
-
-    &:popover-open {
-      display: flex;
-      opacity: 1;
-
-      flex-direction: column;
-
-      @starting-style {
-        display: flex;
-        opacity: 0;
-      }
-    }
-  }
-}
-}
-</style>

package/app/components/display-tooltip/DisplayTooltipDefined.vue

@@ -1,103 +0,0 @@
-<template>
-  <DisplayTooltip :tooltip-id="tooltipId" :style-class-passthrough>
-    <template v-if="slots.triggerContent" #triggerContent>
-      <slot name="triggerContent"></slot>
-    </template>
-    <template #tooltipContent>
-      <div class="popover-content-defined">
-        <component
-          :is="props.contentText.tooltipTitle?.tag"
-          v-if="props.contentText.tooltipTitle"
-          class="tooltip-title subtitle-sm"
-        >
-          {{ props.contentText.tooltipTitle.text }}
-        </component>
-        <component
-          :is="props.contentText.tooltipContent?.tag"
-          v-if="props.contentText.tooltipContent"
-          class="tooltip-body body-sm"
-        >
-          {{ props.contentText.tooltipContent.text }}
-        </component>
-        <component
-          :is="props.contentText.tooltipAction?.tag"
-          v-if="props.contentText.tooltipAction"
-          class="tooltip-action input-value"
-        >
-          {{ props.contentText.tooltipAction.text }}
-        </component>
-        <button
-          :popovertarget="tooltipId"
-          popovertargetaction="hide"
-          class="display-tooltip-close-button"
-          aria-label="Close tool tip"
-        >
-          Close
-        </button>
-      </div>
-    </template>
-  </DisplayTooltip>
-</template>
-
-<script lang="ts">
-export interface TooltipContentText {
-  tooltipTitle?: {
-    tag: string
-    text: string
-  }
-  tooltipContent?: {
-    tag: string
-    text: string
-  }
-  tooltipAction?: {
-    tag: string
-    text: string
-  }
-}
-</script>
-
-<script setup lang="ts">
-const props = defineProps({
-  tooltipId: {
-    type: String,
-    default: "",
-  },
-  contentText: {
-    type: Object as PropType<TooltipContentText>,
-    default: () => ({}),
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-})
-
-const slots = useSlots()
-const tooltipId = computed(() => {
-  return props.tooltipId.length ? `nuxt-tooltip-${props.tooltipId}` : `nuxt-tooltip-${useId()}`
-})
-</script>
-
-<style lang="css">
-@layer components {
-.display-tooltip-core {
-  .popover {
-    .popover-content {
-      .popover-content-defined {
-        .tooltip-title {
-          color: var(--nuxt-text-white-header);
-        }
-
-        .tooltip-body {
-          color: var(--nuxt-text-white-body);
-        }
-
-        .tooltip-action {
-          color: var(--nuxt-text-white-body);
-        }
-      }
-    }
-  }
-}
-}
-</style>

package/app/components/magnetic-navigation/MagneticNavigation.vue

@@ -1,162 +0,0 @@
-<template>
-  <component :is="tag" class="magnetic-navigation" :class="[elementClasses]">
-    <nav>
-      <ul>
-        <li><a href="#">Home</a></li>
-        <li><a href="#">About</a></li>
-        <li><a href="#">Blog</a></li>
-        <li><a href="#">Contact</a></li>
-      </ul>
-    </nav>
-  </component>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  tag: {
-    type: String,
-    default: "div",
-    validator(value: string) {
-      return ["div", "header", "footer", "nav"].includes(value)
-    },
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-})
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough)
-  }
-)
-</script>
-
-<style lang="css">
-@layer components {
-.magnetic-navigation {
-  /*
-  --_background-image: url("/images/rotating-carousel/image-3.webp");
-
-  background-image: var(--_background-image);
-  background-size: cover;
-  background-position: 0 -400px;
-  background-attachment: fixed;
-*/
-  /* padding-block: 200px 2000px; */
-
-  nav {
-    width: fit-content;
-    margin: 3rem auto;
-    background: hsl(0 0% 0% / 0.8);
-
-    padding: 8px;
-    border-radius: 8px;
-
-    isolation: isolate;
-
-    anchor-name: --hovered-link;
-
-    li:hover {
-      anchor-name: --hovered-link;
-    }
-
-    &::before,
-    &::after {
-      content: "";
-      position: absolute;
-      top: calc(anchor(bottom) - 10px);
-      left: calc(anchor(left) + 1rem);
-      right: calc(anchor(right) + 1rem);
-      bottom: calc(anchor(bottom) + 5px);
-      border-radius: 10px;
-
-      position-anchor: --hovered-link;
-
-      transition: 500ms
-        linear(
-          0,
-          0.029 1.6%,
-          0.123 3.5%,
-          0.651 10.6%,
-          0.862 14.1%,
-          1.002 17.7%,
-          1.046 19.6%,
-          1.074 21.6%,
-          1.087 23.9%,
-          1.086 26.6%,
-          1.014 38.5%,
-          0.994 46.3%,
-          1
-        );
-    }
-
-    &::before {
-      z-index: -1;
-      background: rgb(0 0 0 / 0.2);
-      backdrop-filter: blur(2px);
-    }
-
-    &::after {
-      z-index: -2;
-      background-image: var(--_background-image);
-      background-size: cover;
-      background-position: var(--_background-position);
-      background-attachment: fixed;
-    }
-
-    &:has(a:hover)::before,
-    &:has(a:hover)::after {
-      top: anchor(top);
-      left: anchor(left);
-      right: anchor(right);
-      bottom: anchor(bottom);
-
-      @supports (corner-shape: squircle) {
-        corner-shape: squircle;
-        border-radius: 50%;
-      }
-    }
-
-    &:has(li:first-of-type a:hover)::before,
-    &:has(li:first-of-type a:hover)::after {
-      @supports (corner-shape: squircle) {
-        border-radius: 32px 50% 50% 32px;
-      }
-    }
-
-    &:has(li:last-of-type a:hover)::before,
-    &:has(li:last-of-type a:hover)::after {
-      @supports (corner-shape: squircle) {
-        border-radius: 50% 32px 32px 50%;
-      }
-    }
-
-    @supports (corner-shape: squircle) {
-      border-radius: 24px;
-      corner-shape: squircle;
-    }
-
-    > ul {
-      padding: 0;
-      margin: 0;
-      list-style: none;
-      display: flex;
-      gap: 24px;
-
-      a {
-        display: block;
-        padding: 1rem;
-        text-decoration: none;
-        color: white;
-        font-size: var(--step-7);
-      }
-    }
-  }
-}
-}
-</style>

package/app/components/marquee-scroller/MarqueeScroller.vue

@@ -1,289 +0,0 @@
-<template>
-  <div
-    v-if="displayComponent"
-    class="marquee-scroller"
-    :class="{ reverse: reverse, paused: isPaused, 'reduced-motion': prefersReducedMotion }"
-    role="region"
-    :aria-label="ariaLabel || 'Scrolling content'"
-    :aria-live="isPaused ? 'polite' : 'off'"
-    tabindex="0"
-    @keydown="handleKeydown"
-    @focus="handleFocus"
-    @blur="handleBlur"
-  >
-    <!-- Screen reader instructions -->
-    <div class="sr-only">
-      {{ ariaDescription || "Use spacebar to pause/play animation, arrow keys when focused for manual control" }}
-    </div>
-
-    <!-- Pause/Play button -->
-    <button
-      v-if="showControls"
-      class="control-btn"
-      @click="togglePause"
-      :aria-label="isPaused ? 'Play animation' : 'Pause animation'"
-      type="button"
-    >
-      <span aria-hidden="true">{{ isPaused ? "▶" : "⏸" }}</span>
-    </button>
-
-    <div class="marquee-track" :aria-hidden="!isPaused">
-      <div class="marquee-group">
-        <div v-for="item in marqueeData" :key="item.id" class="item">
-          <slot :name="item.id"></slot>
-        </div>
-      </div>
-      <div class="marquee-group" aria-hidden="true">
-        <div v-for="item in marqueeData" :key="`duplicate-${item.id}`" class="item">
-          <slot :name="item.id"></slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  animationRuntime: {
-    type: String,
-    default: "40s",
-  },
-  reverse: {
-    type: Boolean,
-    default: false,
-  },
-  marqueeData: {
-    type: Array as PropType<Array<{ id: number; content: string }>>,
-    default: () => [],
-  },
-  itemConfig: {
-    type: Object,
-    default: () => ({
-      width: "50px",
-      height: "50px",
-      gap: "16px",
-    }),
-    required: true,
-  },
-  // Accessibility props
-  ariaLabel: {
-    type: String,
-    default: null,
-  },
-  ariaDescription: {
-    type: String,
-    default: null,
-  },
-  showControls: {
-    type: Boolean,
-    default: false,
-  },
-  respectReducedMotion: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const displayComponent = ref(false);
-const isPaused = ref(false);
-const isFocused = ref(false);
-const prefersReducedMotion = ref(false);
-
-const height = computed(() => props.itemConfig.height);
-const width = computed(() => props.itemConfig.width);
-const gap = computed(() => props.itemConfig.gap || "16px");
-
-// Check for reduced motion preference
-const checkReducedMotion = () => {
-  if (typeof window !== "undefined" && props.respectReducedMotion) {
-    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    prefersReducedMotion.value = mediaQuery.matches;
-
-    // Listen for changes
-    mediaQuery.addEventListener("change", (e) => {
-      prefersReducedMotion.value = e.matches;
-      if (e.matches) {
-        isPaused.value = true;
-      }
-    });
-  }
-};
-
-const togglePause = () => {
-  isPaused.value = !isPaused.value;
-};
-
-const handleKeydown = (event: KeyboardEvent) => {
-  switch (event.key) {
-    case " ":
-    case "Spacebar":
-      event.preventDefault();
-      togglePause();
-      break;
-    case "ArrowLeft":
-    case "ArrowRight":
-      // Could add manual stepping functionality here
-      event.preventDefault();
-      break;
-  }
-};
-
-const handleFocus = () => {
-  isFocused.value = true;
-  if (props.respectReducedMotion) {
-    isPaused.value = true;
-  }
-};
-
-const handleBlur = () => {
-  isFocused.value = false;
-  if (!prefersReducedMotion.value) {
-    isPaused.value = false;
-  }
-};
-
-onMounted(() => {
-  displayComponent.value = true;
-  checkReducedMotion();
-
-  // Auto-pause if user prefers reduced motion
-  if (prefersReducedMotion.value) {
-    isPaused.value = true;
-  }
-});
-</script>
-
-<style lang="css">
-@layer components {
-.marquee-scroller {
-  width: 100%;
-  height: v-bind(height);
-  overflow: hidden;
-  mask-image: linear-gradient(to right, transparent, #000 10% 90%, transparent);
-  position: relative;
-
-  /* Focus styles */
-  &:focus {
-    outline: 2px solid var(--color-focus, #0066cc);
-    outline-offset: 2px;
-  }
-
-  /* Paused state */
-  &.paused .marquee-track {
-    animation-play-state: paused;
-  }
-
-  /* Reduced motion - disable animation completely */
-  &.reduced-motion .marquee-track {
-    animation: none !important;
-  }
-
-  &:hover .marquee-track {
-    animation-play-state: paused;
-  }
-
-  &:hover .item {
-    filter: grayscale(1);
-  }
-
-  /* Screen reader only text */
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-
-  /* Control button */
-  .control-btn {
-    position: absolute;
-    inset-block-start: 8px;
-    inset-inline-end: 8px;
-    z-index: 10;
-    background: rgba(0, 0, 0, 0.7);
-    color: white;
-    border: none;
-    border-radius: 4px;
-    padding: 8px;
-    cursor: pointer;
-    font-size: 14px;
-    transition: background-color 0.2s;
-
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.9);
-    }
-
-    &:focus {
-      outline: 2px solid var(--color-focus, #0066cc);
-      outline-offset: 2px;
-    }
-  }
-
-  .marquee-track {
-    display: flex;
-    width: fit-content;
-    gap: v-bind(gap);
-    animation: marqueeMove v-bind(animationRuntime) linear infinite;
-  }
-
-  &.reverse .marquee-track {
-    animation-direction: reverse;
-  }
-
-  .marquee-group {
-    display: flex;
-    gap: v-bind(gap);
-    flex-shrink: 0;
-  }
-
-  .item {
-    width: v-bind(width);
-    height: v-bind(height);
-    display: grid;
-    place-items: center;
-    aspect-ratio: 1 / 1;
-    transition: filter 0.5s;
-    flex-shrink: 0;
-
-    border: 1px solid light-dark(var(--slate-10), var(--slate-00));
-    border-radius: 4px;
-
-    &:hover {
-      filter: grayscale(0);
-    }
-  }
-}
-
-@keyframes marqueeMove {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-50%);
-  }
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-  .marquee-scroller {
-    .control-btn {
-      background: ButtonFace;
-      color: ButtonText;
-      border: 1px solid ButtonText;
-    }
-  }
-}
-
-/* Respect user's motion preferences */
-@media (prefers-reduced-motion: reduce) {
-  .marquee-scroller .marquee-track {
-    animation: none !important;
-  }
-}
-}
-</style>