@asd20/ui 3.2.955 → 3.2.957

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.955",
+  "version": "3.2.957",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/atoms/Asd20CalendarEventButton/index.vue

@@ -5,6 +5,7 @@
     :href="event.url"
     target="_blank"
     :style="{ '--accent-color': event.calendarColor }"
+    :aria-label="computedAriaLabel"
   >
     <span class="title">
       <span class="dot" :style="{ backgroundColor: event.calendarColor }"></span>
@@ -78,6 +79,27 @@ export default {
       const pattern = /vs\.[^>]*>Multiple Schools/
       return summary.replace(pattern, 'vs. Multiple Schools')
     },
+    computedAriaLabel() {
+      if (!this.event) return ''
+
+      const summary = this.sanitizedSummary || 'Event'
+
+      const startDate = this.formatDate(this.event.originalStart || this.event.start)
+      let endDate = this.event.end ? this.formatDate(this.event.end) : null
+
+      // For all-day or multi-day events, subtract a day from end
+      if ((this.event.allDay || this.event.multiDay) && endDate) {
+        const end = new Date(this.event.end)
+        end.setDate(end.getDate() - 1)
+        endDate = this.formatDate(end)
+      }
+
+      if (!endDate || startDate === endDate) {
+        return `${summary}, ${startDate}`
+      }
+
+      return `${summary}, ${startDate} - ${endDate}`
+    },
   },
 }
 

package/src/components/organisms/Asd20ImageHeader/index.vue

@@ -474,8 +474,24 @@ export default {
         --website-header__button-foreground-color,
         var(--color__accent-t100)
       );
-
-      box-shadow: 2px 2px 2px rgb(50, 50, 50);
+      // box-shadow: 2px 2px 2px rgb(50, 50, 50);
+      position: relative;
+      padding: space(0.5) space(1.5);
+      transition: background-color 0.3s ease;
+      z-index: 2;
+      overflow: hidden;
+      ::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0; /* Align with the button's left edge */
+        width: 20px; /* Default arrow width */
+        height: 100%; /* Match the button's height */
+        clip-path: polygon(0 0, 100% 50%, 0 100%); /* Triangle pointing right */
+        background-color: rgb(255, 255, 255, 0.2); /* Arrow color */
+        transition: width 0.3s ease, background-color 0.3s ease; /* Smooth arrow growth */
+        z-index: 0;
+      }
       &:hover,
       &:focus {
         background-color: var(
@@ -486,6 +502,11 @@ export default {
           --website-header__button-hover-foreground-color,
           var(--color__accent-t100)
         );
+        ::before {
+          width: 25px; /* Arrow grows on hover */
+          background-color: rgba(255, 255, 255, 0.3); /* Darker arrow on hover */
+          z-index: 0;
+        }
       }
 
       &:not(:last-child) {