@ethlete/components 1.0.0-next.78 → 1.0.0-next.79

package/src/lib/tabs/tabs/tab-group.component.css

@@ -0,0 +1,111 @@
+@layer components {
+  @property --et-tab-group-gap {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+  }
+
+  @property --et-tab-group-header-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+  }
+
+  @property --et-tab-group-trigger-padding-inline {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  @property --et-tab-group-trigger-padding-block {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-tab-group-underline-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 2px;
+  }
+
+  @property --et-tab-group-underline-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 1px;
+  }
+
+  .et-tab-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--et-tab-group-gap);
+
+    --et-tab-group-trigger-padding-inline: var(--et-tab-padding-inline);
+    --et-tab-group-trigger-padding-block: var(--et-tab-padding-block);
+    --et-tab-group-underline-size: var(--et-tab-underline-size);
+    --et-tab-group-underline-radius: var(--et-tab-underline-radius);
+    --et-tab-group-font-size: var(--et-tab-font-size);
+    --et-tab-bar-underline-size: var(--et-tab-group-underline-size);
+    --et-tab-bar-underline-radius: var(--et-tab-group-underline-radius);
+
+    &[data-orientation='vertical'] {
+      flex-direction: row;
+    }
+
+    &:where([data-variant='primary'][data-size='sm']),
+    &:where([data-variant='primary'][data-size='md']) {
+      --et-tab-group-underline-size: 3px;
+    }
+
+    &:where([data-variant='primary'][data-size='lg']) {
+      --et-tab-group-underline-size: 4px;
+    }
+  }
+
+  .et-tab-group__header-shell {
+    min-inline-size: 0;
+  }
+
+  .et-tab-group__header-scrollable {
+    min-inline-size: 0;
+  }
+
+  .et-tab-group__header {
+    position: relative;
+    gap: var(--et-tab-group-header-gap);
+
+    [data-orientation='vertical'] & {
+      justify-items: start;
+    }
+  }
+
+  .et-tab-group__trigger {
+    padding-inline: var(--et-tab-group-trigger-padding-inline);
+    padding-block: var(--et-tab-group-trigger-padding-block);
+    border: none;
+    background: none;
+    font: inherit;
+    font-size: var(--et-tab-group-font-size);
+
+    .et-tab-group__trigger-content {
+      display: flex;
+      gap: 8px;
+    }
+  }
+
+  .et-tab-group {
+    --et-tab-baseline-opacity: 1;
+  }
+
+  .et-tab-group__body {
+    display: grid;
+  }
+
+  .et-tab-group__panel {
+    grid-area: 1 / 1;
+
+    &[hidden] {
+      display: none;
+    }
+  }
+}

package/src/lib/time-picker/time-picker.component.css

@@ -166,7 +166,8 @@
       }
 
       &:focus-visible:not([data-pointer-focused]) {
-        outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+        outline: 2px solid
+          light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
         outline-offset: 2px;
       }
     }

package/src/lib/timeline/timeline-item.component.css

@@ -72,7 +72,10 @@
       block-size: var(--et-timeline-marker-size);
       border-radius: 50%;
       background: var(--et-surface-background-solid, Canvas);
-      color: var(--et-timeline-marker-color, var(--et-theme-color-primary-solid, currentColor));
+      color: var(
+        --et-timeline-marker-color,
+        light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid))
+      );
       font-size: calc(var(--et-timeline-marker-size) * 0.7);
       line-height: 1;
 
@@ -94,6 +97,7 @@
     .et-timeline-item-content {
       flex: 1;
       min-inline-size: 0;
+      overflow-wrap: anywhere;
       /* The gap lives on the content, not the item: the rail stretches over the item's full height,
          so paying for the gap inside it is what lets the line run unbroken into the next marker. */
       padding-block-end: var(--et-timeline-gap);

package/src/lib/toolbar/toolbar.component.css

@@ -37,4 +37,8 @@
       align-items: stretch;
     }
   }
+
+  .et-toolbar .et-icon-button:where([data-pressed='true']) {
+    box-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
+  }
 }

package/src/lib/tooltip/tooltip.component.css

@@ -61,4 +61,18 @@
   .et-tooltip__content {
     gap: 6px;
   }
+
+  .et-tooltip-panel {
+    --et-overlay-arrow-border: light-dark(
+      var(--et-surface-border-solid, rgb(255 255 255 / 0.1)),
+      color-mix(in srgb, var(--et-surface-color-solid) 24%, var(--et-surface-background-solid))
+    );
+  }
+
+  .et-tooltip {
+    --_et-floating-tip-border: light-dark(
+      var(--et-surface-border-solid, rgb(255 255 255 / 0.1)),
+      color-mix(in srgb, var(--et-surface-color-solid) 24%, var(--et-surface-background-solid))
+    );
+  }
 }

package/types/ethlete-components.d.ts

@@ -18364,6 +18364,7 @@ export declare class OtpInputDirective extends FieldStateControlDirective implem
   describedBy: import("@angular/core").WritableSignal<string | null>;
   controlType: import("@angular/core").WritableSignal<"otp-input">;
   focused: import("@angular/core").WritableSignal<boolean>;
+  showsCaret: import("@angular/core").Signal<boolean>;
   /**
    * The native input this directive controls. Auto-initialized when the directive sits on
    * an `<input>` (headless usage); otherwise set by the hosting component (`et-otp-input`).
@@ -28193,7 +28194,8 @@ export type StatTileSentiment = 'good' | 'bad' | 'neutral';
  * </et-stat-tile>
  */
 export declare class StatTileComponent {
-  private semanticThemes;
+  private successTheme;
+  private errorTheme;
   private locale;
   protected labels: import("@angular/core").Signal<import("@ethlete/components").StatTileLabels>;
   label: import("@angular/core").InputSignal<string>;
@@ -28213,6 +28215,7 @@ export declare class StatTileComponent {
   caption: import("@angular/core").InputSignal<string | null>;
   /** Replaces the value and delta with a skeleton. The label stays. */
   loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  private hasWarnedMissingTheme;
   protected formattedValue: import("@angular/core").Signal<string | null>;
   protected deltaView: import("@angular/core").Signal<{
     direction: import("@ethlete/components").StatTileDirection;
@@ -34541,6 +34544,7 @@ export declare class TabComponent {
   private hostElement;
   label: import("@angular/core").InputSignal<string>;
   icon: import("@angular/core").InputSignal<string | null>;
+  ariaLabel: import("@angular/core").InputSignal<string | null>;
   disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   customLabel: import("@angular/core").Signal<TabLabelDirective | undefined>;
   constructor();
@@ -34556,6 +34560,11 @@ export declare class TabComponent {
       "required": false;
       "isSignal": true;
     };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
     "disabled": {
       "alias": "disabled";
       "required": false;
@@ -35779,5 +35788,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.78";
+export declare const COMPONENTS_VERSION = "1.0.0-next.79";
 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 };