@ethlete/components 1.0.0-next.80 → 1.0.0-next.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/components",
-  "version": "1.0.0-next.80",
+  "version": "1.0.0-next.81",
   "repository": {
     "type": "git",
     "url": "https://github.com/ethlete-io/ethdk",

package/src/lib/button/window-control-button.component.css

@@ -143,6 +143,33 @@
       }
     }
 
+    &:where([data-shape='caption']) {
+      --_et-window-control-button-border-radius: 0;
+      --_et-window-control-button-icon-size: 10px;
+
+      width: 46px;
+      height: 100%;
+
+      @media (hover: hover) {
+        &:hover {
+          --et-theme-color-primary-opacity: 0.06;
+          --_et-window-control-button-fallback-background: rgba(255, 255, 255, 0.06);
+        }
+      }
+
+      &:focus-visible {
+        --et-theme-color-primary-opacity: 0.06;
+        --_et-window-control-button-fallback-background: rgba(255, 255, 255, 0.06);
+
+        outline-offset: -2px;
+      }
+
+      &:active {
+        --et-theme-color-primary-opacity: 0.04;
+        --_et-window-control-button-fallback-background: rgba(255, 255, 255, 0.04);
+      }
+    }
+
     &:where([data-kind='close']:not([data-shape='round'])):focus-visible {
       background: var(--et-window-control-button-close-background, rgba(232, 17, 35, 0.92));
       color: var(--et-window-control-button-close-color, #ffffff);

package/src/lib/focus-ring/focus-ring-styles.component.css

@@ -1,10 +1,25 @@
 @layer components {
+  @property --et-focus-ring-offset {
+    syntax: '*';
+    inherits: false;
+  }
+
+  @property --et-focus-ring-width {
+    syntax: '*';
+    inherits: false;
+  }
+
+  @property --et-focus-ring-color {
+    syntax: '*';
+    inherits: false;
+  }
+
   .et-focus-ring {
-    --_et-focus-ring-offset: 3px;
-    --_et-focus-ring-width: 2px;
-    --_et-focus-ring-color: light-dark(
-      var(--et-theme-color-ink-solid, currentColor),
-      var(--et-theme-color-primary-solid, currentColor)
+    --_et-focus-ring-offset: var(--et-focus-ring-offset, 3px);
+    --_et-focus-ring-width: var(--et-focus-ring-width, 2px);
+    --_et-focus-ring-color: var(
+      --et-focus-ring-color,
+      light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor))
     );
     outline: var(--_et-focus-ring-width) solid transparent;
     outline-offset: var(--_et-focus-ring-offset);

package/types/ethlete-components.d.ts

@@ -4185,13 +4185,17 @@ export type WindowControlButtonKind = (typeof WINDOW_CONTROL_BUTTON_KINDS)[keyof
 export declare const WINDOW_CONTROL_BUTTON_SHAPES: {
   readonly SQUARE: "square";
   readonly ROUND: "round";
+  readonly CAPTION: "caption";
 };
 export type WindowControlButtonShape = (typeof WINDOW_CONTROL_BUTTON_SHAPES)[keyof typeof WINDOW_CONTROL_BUTTON_SHAPES];
 export declare class WindowControlButtonComponent {
   protected buttonDir: ButtonDirective;
   size: import("@angular/core").InputSignal<WindowControlButtonSize>;
   kind: import("@angular/core").InputSignal<WindowControlButtonKind>;
-  /** `square` is a Windows-style tile with a red close hover; `round` is a GNOME (Adwaita) style circle. */
+  /**
+   * `square` is a Windows-style tile with a red close hover; `round` is a GNOME (Adwaita) style circle;
+   * `caption` is a 46px wide, full-height Windows caption tile with a 10px glyph.
+   */
   shape: import("@angular/core").InputSignal<WindowControlButtonShape>;
   canAnimate: {
     state: import("@angular/core").Signal<boolean>;
@@ -6406,6 +6410,7 @@ export declare class TooltipDirective {
   private overlayManager;
   private focusVisibleTracker;
   private renderer;
+  private hasTouchInput;
   content: import("@angular/core").InputSignal<TooltipContent | null>;
   ariaDescription: import("@angular/core").InputSignal<string | null>;
   /**
@@ -6435,11 +6440,14 @@ export declare class TooltipDirective {
   private appliedDescriptionId;
   private isBrowser;
   private hasContent;
+  private canShow;
+  protected suppressNativeLongPress: import("@angular/core").Signal<boolean>;
   private accessibleDescription;
   constructor();
   show(): void;
   hide(): void;
   private setupHoverBehavior;
+  private setupLongPressBehavior;
   /**
    * A tooltip can outlive the hover that opened it - a `pointercancel`, a scroll that moves the
    * trigger out from under the pointer, or a browser that synthesizes an enter with no matching
@@ -24730,6 +24738,11 @@ export type AnchoredOverlayStrategyOptions = {
   fallbackPlacements?: Placement[];
   offset?: OffsetOptions | null;
   arrowPadding?: Padding | null;
+  /**
+   * The element the arrow points at, when it is not the origin the pane is placed against - e.g. a pane
+   * anchored to a toolbar whose arrow points at the button inside it. A function receives the origin.
+   */
+  arrowAnchor?: Element | ((origin: Element) => Element | null | undefined);
   viewportPadding?: Padding | null;
   shift?: boolean | OverlayRuntimeShiftOptions;
   autoResize?: boolean;
@@ -24754,7 +24767,7 @@ export type CenteredOverlayStrategyOptions = {
   minWidth?: number | string;
   minHeight?: number | string;
 };
-export type AnchoredPositionOptions = Pick<AnchoredOverlayStrategyOptions, 'placement' | 'fallbackPlacements' | 'offset' | 'arrowPadding' | 'viewportPadding' | 'shift' | 'autoResize' | 'minAvailableSpace' | 'autoHide' | 'autoCloseIfReferenceHidden' | 'mirrorWidth'>;
+export type AnchoredPositionOptions = Pick<AnchoredOverlayStrategyOptions, 'placement' | 'fallbackPlacements' | 'offset' | 'arrowPadding' | 'arrowAnchor' | 'viewportPadding' | 'shift' | 'autoResize' | 'minAvailableSpace' | 'autoHide' | 'autoCloseIfReferenceHidden' | 'mirrorWidth'>;
 export declare const buildAnchoredRuntimePositionStrategy: (options?: AnchoredPositionOptions) => (origin?: Element) => OverlayRuntimePositionStrategy;
 export declare const anchoredOverlayStrategy: (options?: AnchoredOverlayStrategyOptions) => (() => OverlayStrategyBreakpoint[]);
 export declare const centeredOverlayStrategy: (options?: CenteredOverlayStrategyOptions) => (() => OverlayStrategyBreakpoint[]);
@@ -25468,7 +25481,7 @@ export declare const injectProgressStepLabels: () => import("@angular/core").Sig
 export declare const PROGRESS_STEP_LABELS: import("@angular/core").InjectionToken<import("@ethlete/core").LabelsSource<ProgressStepLabels>>;
 /**
  * Makes a step written as a `routerLink` the `current` step while its link is active in the router.
- * Opt in per step; a step without it keeps the `state` you set. Set `etProgressStepExact` to match
+ * Opt in per step; a step without it keeps the `stepState` you set. Set `etProgressStepExact` to match
  * the link's URL exactly instead of any URL beneath it.
  *
  * @example
@@ -25502,7 +25515,7 @@ export declare const PROGRESS_STEP_STATES: {
 export type ProgressStepState = (typeof PROGRESS_STEP_STATES)[keyof typeof PROGRESS_STEP_STATES];
 /**
  * One step in an `et-progress-steps` row: a numbered marker that becomes an icon once resolved, plus
- * a label. `state` is yours to set per step - nothing is derived from position, so a skipped or
+ * a label. `stepState` is yours to set per step - nothing is derived from position, so a skipped or
  * out-of-order step is exactly as easy to render as a strictly linear one.
  *
  * `complete` marks a step as done in the surrounding color theme; `success`, `warning` and `error`
@@ -25513,7 +25526,7 @@ export type ProgressStepState = (typeof PROGRESS_STEP_STATES)[keyof typeof PROGR
  * covers, what it produced, why it failed:
  *
  * @example
- * <et-progress-step state="current">
+ * <et-progress-step stepState="current">
  *   Payment
  *   <span etProgressStepDescription>Card ending 4242</span>
  * </et-progress-step>
@@ -25523,14 +25536,14 @@ export type ProgressStepState = (typeof PROGRESS_STEP_STATES)[keyof typeof PROGR
  * belong, and the whole step becomes the target:
  *
  * @example
- * <a [routerLink]="['/checkout/account']" state="complete" et-progress-step>Account</a>
+ * <a [routerLink]="['/checkout/account']" stepState="complete" et-progress-step>Account</a>
  */
 export declare class ProgressStepComponent {
   private provideColor;
   private semanticThemes;
   private labels;
   private elementRef;
-  state: import("@angular/core").InputSignal<ProgressStepState>;
+  stepState: import("@angular/core").InputSignal<ProgressStepState>;
   protected role: string | null;
   private currentSource;
   protected resolvedState: Signal<ProgressStepState>;
@@ -25540,8 +25553,8 @@ export declare class ProgressStepComponent {
   constructor();
   static ɵfac: i0.ɵɵFactoryDeclaration<ProgressStepComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<ProgressStepComponent, "et-progress-step, [et-progress-step]", never, {
-    "state": {
-      "alias": "state";
+    "stepState": {
+      "alias": "stepState";
       "required": false;
       "isSignal": true;
     };
@@ -25563,13 +25576,13 @@ export type ProgressStepsOrientation = (typeof PROGRESS_STEPS_ORIENTATIONS)[keyo
 /**
  * Lays out a row - or, with `orientation="vertical"`, a column - of `et-progress-step`s with automatic
  * step numbering and a connecting line between them. Project the steps in order, each with its own
- * `state`.
+ * `stepState`.
  *
  * @example
  * <et-progress-steps>
- *   <et-progress-step state="complete">Account</et-progress-step>
- *   <et-progress-step state="current">Shipping</et-progress-step>
- *   <et-progress-step state="upcoming">Payment</et-progress-step>
+ *   <et-progress-step stepState="complete">Account</et-progress-step>
+ *   <et-progress-step stepState="current">Shipping</et-progress-step>
+ *   <et-progress-step stepState="upcoming">Payment</et-progress-step>
  * </et-progress-steps>
  */
 export declare class ProgressStepsComponent {
@@ -35807,5 +35820,5 @@ export declare const provideUnsavedChangesLabels: (labels: import("@ethlete/core
 export declare const injectUnsavedChangesLabels: () => import("@angular/core").Signal<UnsavedChangesLabels>;
 export declare const UNSAVED_CHANGES_LABELS: import("@angular/core").InjectionToken<import("@ethlete/core").LabelsSource<UnsavedChangesLabels>>;
 /** The version of `@ethlete/components` this build was cut from. */
-export declare const COMPONENTS_VERSION = "1.0.0-next.80";
+export declare const COMPONENTS_VERSION = "1.0.0-next.81";
 export { type AppointmentTreeNode, BRACKET_DATA_LAYOUT, BRACKET_ERROR_CODES, BRACKET_ROUND_MIRROR_TYPE, BRACKET_SWISS_GROUP_COLOR_TYPE, type Bracket, type BracketByeSlotSource, type BracketComponents, type BracketContinueComponent, type BracketDataLayout, type BracketDataSource, type BracketDrawing, type BracketEdge, type BracketExternalSlotSource, type BracketGradient, type BracketGradientStop, BracketMap, type BracketMatch, type BracketMatchComponent, type BracketMatchFactor, type BracketMatchId, type BracketMatchOutcomeSlotSource, type BracketMatchParticipant, type BracketMatchPosition, type BracketMatchRelation, type BracketMatchRelationNone, type BracketMatchRelationNothingToOne, type BracketMatchRelationOneToNothing, type BracketMatchRelationOneToOne, type BracketMatchRelationTwoToNothing, type BracketMatchRelationTwoToOne, type BracketMatchShortId, type BracketMatchSlot, type BracketMatchSource, type BracketMatchStatus, type BracketParticipant, type BracketParticipantMatch, type BracketPickMigration, type BracketPickMigrationOptions, type BracketPickSet, type BracketRect, type BracketRound, type BracketRoundHeaderComponent, type BracketRoundId, type BracketRoundMapWithSwissData, type BracketRoundMirrorType, type BracketRoundPosition, type BracketRoundRelation, type BracketRoundRelationNone, type BracketRoundRelationNothingToOne, type BracketRoundRelationOneToNothing, type BracketRoundRelationOneToOne, type BracketRoundRelationTwoToNothing, type BracketRoundRelationTwoToOne, type BracketRoundShortId, type BracketRoundSource, type BracketRoundSwissData, type BracketRoundSwissGroup, type BracketRoundSwissGroupId, type BracketRoundSwissGroupMap, type BracketRoundType, BracketRuntimeError, type BracketSeedSlotSource, type BracketSlotResolutionPolicy, type BracketSlotSource, type BracketSlotSourceKind, type BracketStandingRankSide, type BracketStandingRankSlotSource, type BracketSwissBucketSlotSource, type BracketSwissColors, type BracketSwissGroupColorType, type BracketWarning, COMMON_BRACKET_ROUND_TYPE, type CalendarBandPosition, type CalendarInterval, type CalendarPrecision, type CalendarSelectionFlags, type CalendarView, type CalendarWeekStartsOn, type CascaderCompareWith, type CascaderDataSource, type CascaderNode, type CommonBracketRoundType, type ComputedBracketGrid, type CreateBracketGridConfig, type CreateBracketOptions, type CreateGridAdapterOptions, DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE, type DateRangeSide, type DateRangeSide as TimeRangeInputSide, type DateRangeValue, type DateRangeValue as DateTimeRangeValue, type DateRangeValue as TimeRangeValue, type DoubleEliminationBracketRoundType, type DurationFormatSpec, type DurationSegment, type DurationUnit, GROUP_BRACKET_ROUND_TYPE, type GridAdapter, type GridAdapterBreakpoints, type GridConfig, type GroupBracketRoundType, type MatchParticipantId, type MatchParticipantShortId, type MatchParticipantSide, type ParticipantMatchResult, type PlaceholderBracketShape, type RichTextEditorHeadingLevel, type RichTextEditorImageFailure, type RichTextEditorImageFailureReason, type RichTextEditorImageUpload, type RichTextEditorImageUploadContext, type RichTextEditorImageUploadFn, type RichTextEditorTokenChip, type RichTextEditorTokenCodec, SINGLE_ELIMINATION_BRACKET_ROUND_TYPE, SWISS_BRACKET_ROUND_TYPE, type SchedulerAgendaDay, type SchedulerMonthDayCell, type SchedulerTimeGridAllDayEntry, type SchedulerTimeGridBlock, type SchedulerTimeGridDay, type SchedulerTimeGridSegment, type ScrollableActiveChildRef, type ScrollableButtonPosition, type ScrollableButtonsConfig, type ScrollableChrome, type ScrollableChromeSlot, type ScrollableDirection, type ScrollableIntersectionChange, type ScrollableItemSize, type ScrollableLoadingTemplatePosition, type ScrollableLoadingTemplateRef, type ScrollableMaskVariant, type ScrollableNavigation, type ScrollableNavigationConfig, type ScrollableNavigationItem, type ScrollableScrollMode, type ScrollableScrollOrigin, type ScrollableScrollState, type ScrollbarGeometry, type ScrollbarOrientation, type ScrollbarTarget, type SerializeOptions, type SingleEliminationBracketRoundType, type StandingPick, type StandingPickOutcome, type SwissBracketRoundType, TOURNAMENT_MODE, type TournamentMode, bracketSlot, createBracket, createPlaceholderBracketSource, injectRichTextEditorTools, isBracketSlotPredictable, migrateBracketPicks, resolveBracketSlot, standingRankSides, swapStandingRank, validateBracketSource };