@vonage/vivid 3.51.0 → 3.53.0

package/shared/presentationDate.js

@@ -1,9 +1,10 @@
 import { B as Button } from './definition11.js';
-import { P as Popup } from './definition60.js';
-import { T as TextField } from './definition53.js';
-import { D as Divider } from './definition21.js';
+import { P as Popup } from './definition63.js';
+import { T as TextField } from './definition55.js';
+import { D as Divider } from './definition22.js';
 import { h as html, F as FoundationElement, a as attr, o as observable, v as volatile, D as DOM } from './index.js';
 import { r as ref } from './ref.js';
+import { s as slotted } from './slotted.js';
 import { r as repeat } from './repeat.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
@@ -11,10 +12,10 @@ import './affix.js';
 import { a as FormElementHelperText } from './index2.js';
 import { L as Localized } from './localized.js';
 import { T as TrappedFocus } from './trapped-focus.js';
+import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { F as FormAssociated } from './form-associated.js';
-import { a as applyMixins } from './apply-mixins.js';
 
-const styles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column;padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.segments{display:flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{block-size:24px;border-radius:8px;font:var(--vvd-typography-base-extended);padding-inline:6px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;aspect-ratio:1/1;block-size:28px;border-radius:50%;font:var(--vvd-typography-base);margin-inline:6px;--focus-inset: -2px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;aspect-ratio:1/1;block-size:48px;border-radius:50%;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.button:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.button:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.button:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.button:where(.selected,[aria-current]):where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));color:var(--vvd-color-canvas-text)}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button:disabled{cursor:not-allowed}\n";
+const styles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column;padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.segments{display:flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:6px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px;--focus-inset: -2px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.button:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));color:var(--vvd-color-canvas-text)}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button:disabled{cursor:not-allowed}\n";
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -5277,26 +5278,32 @@ function renderDialogHeader(context) {
 		`
   )}
 		<div class="title">
-			${when((x) => x.titleClickable, html`
-			<button
-				tabindex="1"
-				id="${(x) => `grid-label-${x.id}`}"
-				class="title-action button"
-				aria-live="polite"
-				@click="${(_, c) => c.parent._onTitleActionClick()}"
-			>
-				${(x) => x.title}
-			</button>
-			`)}
-			${when((x) => !x.titleClickable, html`
-			<div
-				id="${(x) => `grid-label-${x.id}`}"
-				class="title-action"
-				aria-live="polite"
-			>
-				${(x) => x.title}
-			</div>
-			`)}
+			${when(
+    (x) => x.titleClickable,
+    html`
+					<button
+						tabindex="1"
+						id="${(x) => `grid-label-${x.id}`}"
+						class="title-action button"
+						aria-live="polite"
+						@click="${(_, c) => c.parent._onTitleActionClick()}"
+					>
+						${(x) => x.title}
+					</button>
+				`
+  )}
+			${when(
+    (x) => !x.titleClickable,
+    html`
+					<div
+						id="${(x) => `grid-label-${x.id}`}"
+						class="title-action"
+						aria-live="polite"
+					>
+						${(x) => x.title}
+					</div>
+				`
+  )}
 		</div>
 
 		${when(
@@ -5353,9 +5360,8 @@ function renderCalendarGrid(context) {
 		<${dividerTag} class="calendar-separator" role="presentation"></${dividerTag}>
 		${repeat(
     (x) => x.calendar.grid,
-    html`
-				<div class="calendar-week" role="row">
-					${repeat(
+    html` <div class="calendar-week" role="row">
+				${repeat(
       (x) => x,
       html`
 			${when(
@@ -5364,40 +5370,60 @@ function renderCalendarGrid(context) {
       )}
 			${when(
         (x, c) => !c.parentContext.parentContext.parent._hideDatesOutsideMonth || !x.isOutsideMonth,
-        html`
-		<span role="gridcell">
-			<button
-							class="${(x, c) => classNames(
+        html` <span role="gridcell">
+					<button
+						class="${(x, c) => classNames(
           "calendar-day",
           "button",
-          ["current", x.date === c.parentContext.parentContext.parent._currentDate],
-          ["selected", c.parentContext.parentContext.parent._isDateSelected(x.date)],
-          ["range", c.parentContext.parentContext.parent._isDateInSelectedRange(x.date)],
-          ["start", c.parentContext.parentContext.parent._isDateRangeStart(x.date)],
-          ["end", c.parentContext.parentContext.parent._isDateRangeEnd(x.date)],
+          [
+            "current",
+            x.date === c.parentContext.parentContext.parent._currentDate
+          ],
+          [
+            "selected",
+            c.parentContext.parentContext.parent._isDateSelected(x.date)
+          ],
+          [
+            "range",
+            c.parentContext.parentContext.parent._isDateInSelectedRange(
+              x.date
+            )
+          ],
+          [
+            "start",
+            c.parentContext.parentContext.parent._isDateRangeStart(
+              x.date
+            )
+          ],
+          [
+            "end",
+            c.parentContext.parentContext.parent._isDateRangeEnd(x.date)
+          ],
           ["outside-month", x.isOutsideMonth]
         )}"
-							?disabled="${(x, c) => !c.parentContext.parentContext.parent._isDateInValidRange(x.date)}"
-							tabindex="${(x, c) => x.date === c.parentContext.parentContext.parent._tabbableDate ? 2 : -1}"
-							aria-selected="${(x, c) => c.parentContext.parentContext.parent._isDateAriaSelected(x.date)}"
-							data-date="${(x) => x.date}"
-							@click="${(x, c) => c.parentContext.parentContext.parent._onDateClick(x.date)}"
-							@focus="${(x, c) => c.parentContext.parentContext.parent._onDateFocus(x.date)}"
-							@mouseenter="${(x, c) => c.parentContext.parentContext.parent._onDateMouseEnter(x.date)}"
-							@mouseleave="${(x, c) => c.parentContext.parentContext.parent._onDateMouseLeave(x.date)}"
-							@keydown="${(x, c) => c.parentContext.parentContext.parent._onDateKeydown(
+						?disabled="${(x, c) => !c.parentContext.parentContext.parent._isDateInValidRange(
+          x.date
+        )}"
+						tabindex="${(x, c) => x.date === c.parentContext.parentContext.parent._tabbableDate ? 2 : -1}"
+						aria-selected="${(x, c) => c.parentContext.parentContext.parent._isDateAriaSelected(x.date)}"
+						data-date="${(x) => x.date}"
+						@click="${(x, c) => c.parentContext.parentContext.parent._onDateClick(x.date)}"
+						@focus="${(x, c) => c.parentContext.parentContext.parent._onDateFocus(x.date)}"
+						@mouseenter="${(x, c) => c.parentContext.parentContext.parent._onDateMouseEnter(x.date)}"
+						@mouseleave="${(x, c) => c.parentContext.parentContext.parent._onDateMouseLeave(x.date)}"
+						@keydown="${(x, c) => c.parentContext.parentContext.parent._onDateKeydown(
           x.date,
           c.event
         )}"
-						>
-							${(x) => x.label}
-						</button>
-		</span>`
+					>
+						${(x) => x.label}
+					</button>
+				</span>`
       )}
 				</div>
 			`
     )}
-	</div>`
+			</div>`
   )}`;
 }
 function renderMonthPickerGrid(context) {
@@ -5419,9 +5445,9 @@ function renderMonthPickerGrid(context) {
 					${repeat(
       (x) => x,
       html`
-			<span role="gridcell">
-							<button
-								class="${(x, c) => classNames(
+							<span role="gridcell">
+								<button
+									class="${(x, c) => classNames(
         "month",
         "button",
         [
@@ -5439,24 +5465,33 @@ function renderMonthPickerGrid(context) {
           )
         ]
       )}"
-								tabindex="${(x, c) => c.parentContext.parentContext.parent._tabbableMonth && areMonthsEqual(x.month, c.parentContext.parentContext.parent._tabbableMonth) ? 2 : -1}"
-								aria-label="${(x) => x.monthName}"
-								aria-selected="${(x, c) => areMonthsEqual(
+									tabindex="${(x, c) => c.parentContext.parentContext.parent._tabbableMonth && areMonthsEqual(
+        x.month,
+        c.parentContext.parentContext.parent._tabbableMonth
+      ) ? 2 : -1}"
+									aria-label="${(x) => x.monthName}"
+									aria-selected="${(x, c) => areMonthsEqual(
         x.month,
         c.parentContext.parentContext.parent._selectedMonth
       )}"
-								data-month="${(x) => monthToStr(x.month)}"
-								?disabled="${(x, c) => !c.parentContext.parentContext.parent._isMonthInValidRange(x.month)}"
-								@click="${(x, c) => c.parentContext.parentContext.parent._onMonthClick(x.month)}"
-								@focus="${(x, c) => c.parentContext.parentContext.parent._onMonthFocus(x.month)}"
-								@keydown="${(x, c) => c.parentContext.parentContext.parent._onMonthKeydown(
+									data-month="${(x) => monthToStr(x.month)}"
+									?disabled="${(x, c) => !c.parentContext.parentContext.parent._isMonthInValidRange(
+        x.month
+      )}"
+									@click="${(x, c) => c.parentContext.parentContext.parent._onMonthClick(
+        x.month
+      )}"
+									@focus="${(x, c) => c.parentContext.parentContext.parent._onMonthFocus(
+        x.month
+      )}"
+									@keydown="${(x, c) => c.parentContext.parentContext.parent._onMonthKeydown(
         x.month,
         c.event
       )}"
-							>
-								${(x) => x.label}
-							</button>
-				</span>
+								>
+									${(x) => x.label}
+								</button>
+							</span>
 						`
     )}
 				</div>
@@ -5483,6 +5518,11 @@ const DatePickerBaseTemplate = (context, _) => {
 										 @input="${(x, c) => x._onTextFieldInput(c.event)}"
 										 @change="${(x) => x._onTextFieldChange()}"
 		>
+			<slot
+				slot="${(x) => x._helperTextSlottedContent?.length ? "helper-text" : void 0}"
+				name="helper-text"
+				${slotted("_helperTextSlottedContent")}
+			></slot>
 			<${buttonTag}
 				id="calendar-button"
 				${ref("_calendarButtonEl")}
@@ -5506,18 +5546,17 @@ const DatePickerBaseTemplate = (context, _) => {
 				<div class="segments">
 					${repeat(
     (x) => x._segments,
-    html`
-					<div class="segment">
-				${renderDialogHeader(context)}
-				${when(
+    html` <div class="segment">
+							${renderDialogHeader(context)}
+							${when(
       (x) => x.type === "month-picker",
       html`${renderMonthPickerGrid(context)}`
     )}
-				${when(
+							${when(
       (x) => x.type === "calendar",
       html`${renderCalendarGrid(context)}`
     )}
-					</div>`
+						</div>`
   )}
 				</div>
 				<div class="footer">
@@ -5574,7 +5613,12 @@ const buildDateGrid = ({ month, year }, getDay) => {
   let week = [];
   for (let i = 0; i < totalDaysInCalendar; i++) {
     const dayIndexInMonth = i - firstDayInWeek;
-    week.push(gridDate(addDays$1(firstDay, dayIndexInMonth), isOutsideMonth(dayIndexInMonth, daysInMonth)));
+    week.push(
+      gridDate(
+        addDays$1(firstDay, dayIndexInMonth),
+        isOutsideMonth(dayIndexInMonth, daysInMonth)
+      )
+    );
     if (week.length === 7) {
       grid.push(week);
       week = [];
@@ -5617,7 +5661,9 @@ const yearOfDate = (dateStr) => {
 
 class _DatePickerBase extends FoundationElement {
 }
-class FormAssociatedDatePickerBase extends FormAssociated(_DatePickerBase) {
+class FormAssociatedDatePickerBase extends FormAssociated(
+  _DatePickerBase
+) {
   constructor() {
     super(...arguments);
     this.proxy = document.createElement("input");
@@ -5722,7 +5768,10 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
   _adjustSelectedMonthToEnsureVisibilityOf(date) {
     const month = monthOfDate(date);
     const firstDisplayedMonth = this._selectedMonth;
-    const lastDisplayedMonth = addMonths(this._selectedMonth, this._numCalendars - 1);
+    const lastDisplayedMonth = addMonths(
+      this._selectedMonth,
+      this._numCalendars - 1
+    );
     if (compareMonths(month, firstDisplayedMonth) < 0) {
       this._selectedMonth = month;
       return true;
@@ -5832,7 +5881,9 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     } else {
       this.#openPopupIfPossible();
       DOM.processUpdates();
-      const tabbableDate = this.shadowRoot.querySelector(`[data-date="${this._tabbableDate}"]`);
+      const tabbableDate = this.shadowRoot.querySelector(
+        `[data-date="${this._tabbableDate}"]`
+      );
       tabbableDate.focus();
     }
   }
@@ -6013,9 +6064,9 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     this._lastFocussedDate = date;
   }
   get _tabbableDate() {
-    const datesInSegments = this._segments.filter((segment) => segment.type === "calendar").flatMap(
-      (segment) => segment.calendar.grid.flat().map((d) => d.date)
-    );
+    const datesInSegments = this._segments.filter(
+      (segment) => segment.type === "calendar"
+    ).flatMap((segment) => segment.calendar.grid.flat().map((d) => d.date));
     const candidates = [
       this._lastFocussedDate,
       ...this._getSelectedDates(),
@@ -6023,7 +6074,10 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
       ...datesInSegments
     ];
     const firstVisibleMonth = this._selectedMonth;
-    const lastVisibleMonth = addMonths(this._selectedMonth, this._numCalendars - 1);
+    const lastVisibleMonth = addMonths(
+      this._selectedMonth,
+      this._numCalendars - 1
+    );
     return candidates.find(
       (date) => date && compareMonths(monthOfDate(date), firstVisibleMonth) >= 0 && compareMonths(monthOfDate(date), lastVisibleMonth) <= 0 && this._isDateInValidRange(date)
     ) ?? null;
@@ -6151,7 +6205,12 @@ __decorateClass([
 __decorateClass([
   volatile
 ], DatePickerBase.prototype, "_tabbableMonth", 1);
-applyMixins(DatePickerBase, Localized, FormElementHelperText, TrappedFocus);
+applyMixinsWithObservables(
+  DatePickerBase,
+  Localized,
+  FormElementHelperText,
+  TrappedFocus
+);
 
 const formatPresentationDate = (dateStr, locale) => {
   const date = parseDateStr(dateStr);

package/shared/slider.template.cjs

@@ -0,0 +1,71 @@
+'use strict';
+
+const aria = require('./aria2.cjs');
+const index = require('./index.cjs');
+const ref = require('./ref.cjs');
+const classNames = require('./class-names.cjs');
+
+/**
+ * This method keeps a given value within the bounds of a min and max value. If the value
+ * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
+ * the maximum will be returned. Otherwise, the value is returned un-changed.
+ */
+/**
+ * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
+ * If value is greater than max, max will be returned.
+ */
+function limit(min, max, value) {
+    return Math.min(Math.max(value, min), max);
+}
+
+const getClasses = ({ disabled, connotation }) => classNames.classNames(
+  "control",
+  ["disabled", Boolean(disabled)],
+  [`connotation-${connotation}`, Boolean(connotation)]
+);
+const getMarkersTemplate = (isHorizontal, numMarkers) => {
+  const placeholder = isHorizontal ? ["right", "center", "", "100% repeat-x"] : ["bottom", "top", "100%", "repeat-y"];
+  return index.html` <div
+		class="mark"
+		style="
+	background: linear-gradient(to ${placeholder[0]}, currentcolor 3px, transparent 0px)
+	0px ${placeholder[1]} / ${placeholder[2]} calc((100% - 3px) / ${numMarkers}) ${placeholder[3]}
+	"
+	></div>`;
+};
+const SliderTemplate = () => {
+  return index.html`<template
+		role="${(x) => x.ariaLabel ? "presentation" : null}"
+	>
+		<div
+			role="slider"
+			tabindex="${(x) => x.disabled ? null : 0}"
+			aria-label="${(x) => x.ariaLabel}"
+			aria-valuetext="${(x) => x.ariaValuetext || x.valueTextFormatter(x.value)}"
+			aria-valuenow="${(x) => x.value}"
+			aria-valuemin="${(x) => x.min}"
+			aria-valuemax="${(x) => x.max}"
+			aria-disabled="${(x) => x.disabled ? true : void 0}"
+			aria-orientation="${(x) => x.orientation}"
+			class="${getClasses} ${(x) => x.orientation}"
+		>
+			<div class="positioning-region">
+				<div ${ref.ref("track")} class="track">
+					<div class="track-start" style="${(x) => x.position}"></div>
+					${(x) => x.markers ? getMarkersTemplate(
+    x.orientation === aria.Orientation.horizontal,
+    Math.floor((x.max - x.min) / x.step)
+  ) : void 0}
+				</div>
+				<div
+					${ref.ref("thumb")}
+					class="thumb-container"
+					style="${(x) => x.position}"
+				></div>
+			</div></div
+	></template>`;
+};
+
+exports.SliderTemplate = SliderTemplate;
+exports.getMarkersTemplate = getMarkersTemplate;
+exports.limit = limit;

package/shared/slider.template.js

@@ -0,0 +1,67 @@
+import { O as Orientation } from './aria2.js';
+import { h as html } from './index.js';
+import { r as ref } from './ref.js';
+import { c as classNames } from './class-names.js';
+
+/**
+ * This method keeps a given value within the bounds of a min and max value. If the value
+ * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
+ * the maximum will be returned. Otherwise, the value is returned un-changed.
+ */
+/**
+ * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
+ * If value is greater than max, max will be returned.
+ */
+function limit(min, max, value) {
+    return Math.min(Math.max(value, min), max);
+}
+
+const getClasses = ({ disabled, connotation }) => classNames(
+  "control",
+  ["disabled", Boolean(disabled)],
+  [`connotation-${connotation}`, Boolean(connotation)]
+);
+const getMarkersTemplate = (isHorizontal, numMarkers) => {
+  const placeholder = isHorizontal ? ["right", "center", "", "100% repeat-x"] : ["bottom", "top", "100%", "repeat-y"];
+  return html` <div
+		class="mark"
+		style="
+	background: linear-gradient(to ${placeholder[0]}, currentcolor 3px, transparent 0px)
+	0px ${placeholder[1]} / ${placeholder[2]} calc((100% - 3px) / ${numMarkers}) ${placeholder[3]}
+	"
+	></div>`;
+};
+const SliderTemplate = () => {
+  return html`<template
+		role="${(x) => x.ariaLabel ? "presentation" : null}"
+	>
+		<div
+			role="slider"
+			tabindex="${(x) => x.disabled ? null : 0}"
+			aria-label="${(x) => x.ariaLabel}"
+			aria-valuetext="${(x) => x.ariaValuetext || x.valueTextFormatter(x.value)}"
+			aria-valuenow="${(x) => x.value}"
+			aria-valuemin="${(x) => x.min}"
+			aria-valuemax="${(x) => x.max}"
+			aria-disabled="${(x) => x.disabled ? true : void 0}"
+			aria-orientation="${(x) => x.orientation}"
+			class="${getClasses} ${(x) => x.orientation}"
+		>
+			<div class="positioning-region">
+				<div ${ref("track")} class="track">
+					<div class="track-start" style="${(x) => x.position}"></div>
+					${(x) => x.markers ? getMarkersTemplate(
+    x.orientation === Orientation.horizontal,
+    Math.floor((x.max - x.min) / x.step)
+  ) : void 0}
+				</div>
+				<div
+					${ref("thumb")}
+					class="thumb-container"
+					style="${(x) => x.position}"
+				></div>
+			</div></div
+	></template>`;
+};
+
+export { SliderTemplate as S, getMarkersTemplate as g, limit as l };

package/shared/text-anchor.cjs

@@ -28,6 +28,12 @@ class TextAnchor extends anchor.Anchor {
 __decorateClass([
   index.attr
 ], TextAnchor.prototype, "text", 2);
+__decorateClass([
+  index.attr
+], TextAnchor.prototype, "connotation", 2);
+__decorateClass([
+  index.attr
+], TextAnchor.prototype, "appearance", 2);
 applyMixins.applyMixins(TextAnchor, affix.AffixIcon);
 
 exports.TextAnchor = TextAnchor;

package/shared/text-anchor.js

@@ -26,6 +26,12 @@ class TextAnchor extends Anchor {
 __decorateClass([
   attr
 ], TextAnchor.prototype, "text", 2);
+__decorateClass([
+  attr
+], TextAnchor.prototype, "connotation", 2);
+__decorateClass([
+  attr
+], TextAnchor.prototype, "appearance", 2);
 applyMixins(TextAnchor, AffixIcon);
 
 export { TextAnchor as T };

package/shared/text-anchor.template.cjs

@@ -5,44 +5,44 @@ const index = require('./index.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
-const getClasses = ({ text }) => classNames.classNames(
+const getClasses = ({ text, connotation, appearance }) => classNames.classNames(
   "control",
-  ["icon-only", !text]
+  ["icon-only", !text],
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`appearance-${appearance}`, Boolean(appearance)]
 );
 const textAnchorTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
   return index.html`<a
-        class="${getClasses}"
-        download="${(x) => x.download}"
-        href="${(x) => x.href}"
-        hreflang="${(x) => x.hreflang}"
-        ping="${(x) => x.ping}"
-        referrerpolicy="${(x) => x.referrerpolicy}"
-        rel="${(x) => x.rel}"
-        target="${(x) => x.target}"
-        type="${(x) => x.type}"
-        aria-atomic="${(x) => x.ariaAtomic}"
-        aria-busy="${(x) => x.ariaBusy}"
-        aria-current="${(x) => x.ariaCurrent}"
-        aria-details="${(x) => x.ariaDetails}"
-        aria-disabled="${(x) => x.ariaDisabled}"
-        aria-errormessage="${(x) => x.ariaErrormessage}"
-        aria-expanded="${(x) => x.ariaExpanded}"
-        aria-haspopup="${(x) => x.ariaHaspopup}"
-        aria-hidden="${(x) => x.ariaHidden}"
-        aria-invalid="${(x) => x.ariaInvalid}"
-        aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
-        aria-label="${(x) => x.ariaLabel}"
-        aria-live="${(x) => x.ariaLive}"
-        aria-relevant="${(x) => x.ariaRelevant}"
-        aria-roledescription="${(x) => x.ariaRoledescription}"
-        ${ref.ref("control")}
-    >
-      ${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
-      ${(x) => x.text}
-			${(x) => x.getBodyTemplate?.() ?? ""}
-    </a>
-`;
+		class="${getClasses}"
+		download="${(x) => x.download}"
+		href="${(x) => x.href}"
+		hreflang="${(x) => x.hreflang}"
+		ping="${(x) => x.ping}"
+		referrerpolicy="${(x) => x.referrerpolicy}"
+		rel="${(x) => x.rel}"
+		target="${(x) => x.target}"
+		type="${(x) => x.type}"
+		aria-atomic="${(x) => x.ariaAtomic}"
+		aria-busy="${(x) => x.ariaBusy}"
+		aria-current="${(x) => x.ariaCurrent}"
+		aria-details="${(x) => x.ariaDetails}"
+		aria-disabled="${(x) => x.ariaDisabled}"
+		aria-errormessage="${(x) => x.ariaErrormessage}"
+		aria-expanded="${(x) => x.ariaExpanded}"
+		aria-haspopup="${(x) => x.ariaHaspopup}"
+		aria-hidden="${(x) => x.ariaHidden}"
+		aria-invalid="${(x) => x.ariaInvalid}"
+		aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+		aria-label="${(x) => x.ariaLabel}"
+		aria-live="${(x) => x.ariaLive}"
+		aria-relevant="${(x) => x.ariaRelevant}"
+		aria-roledescription="${(x) => x.ariaRoledescription}"
+		${ref.ref("control")}
+	>
+		${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)} ${(x) => x.text}
+		${(x) => x.getBodyTemplate?.() ?? ""}
+	</a> `;
 };
 
 exports.textAnchorTemplate = textAnchorTemplate;