kmaterialize 2.3.3-1.0.10 → 2.3.3-1.0.12

package/components/button/_buttons.scss

@@ -256,6 +256,22 @@ button.btn-floating {
     }
   }
 
+  // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+  // Anchors the FAB (and its expanded menu) to the top of the viewport
+  // instead of the bottom, for layouts where the bottom edge is already
+  // occupied (e.g. a footer or bottom nav).
+  &.top {
+    top: 23px;
+    bottom: unset;
+    padding-bottom: 15px;
+    padding-top: 0;
+
+    > ul {
+      top: 64px;
+      bottom: unset;
+    }
+  }
+
   &.toolbar {
     padding: 0;
     height: 56px;

package/components/card/_cards.scss

@@ -168,6 +168,12 @@
 
       i {
         line-height: 32px;
+
+        // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+        // Sits on the title's baseline with a small gap before the text,
+        // instead of floating flush against it mid-line.
+        vertical-align: text-bottom;
+        margin-right: 6px;
       }
 
       &.activator {

package/components/collapsible/_collapsible.scss

@@ -9,7 +9,19 @@
   border-right: 1px solid var(--md-sys-color-outline-variant);
   border-left: 1px solid var(--md-sys-color-outline-variant);
   margin: $element-top-margin 0 $element-bottom-margin 0;
+  // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+  // Matches the 12px corner radius used across cards, dropdowns and
+  // collections instead of square corners.
+  border-radius: 12px;
   @extend .z-depth-1;
+
+  // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+  // Only clip to the rounded corners while every item is closed - an open
+  // last item's body needs to be able to grow past the list's own bottom
+  // edge instead of being cut off by it.
+  &:not(:has(li:last-child.active)) {
+    overflow: hidden;
+  }
 }
 
 .collapsible-header {
@@ -62,6 +74,43 @@
   overflow: hidden;
 }
 
+// @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+// Round the corners of the first/last item's own header/body so they
+// follow the list's rounded outline instead of showing a square edge
+// inside it. Longhand corners (not the `border-radius` shorthand) so that
+// a single-item accordion - where the same <li> is both first and last -
+// gets all 4 corners rounded instead of the last-child rule's shorthand
+// wiping out the top corners the first-child rule just set.
+.collapsible > li:first-child .collapsible-header {
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+
+.collapsible > li:last-child {
+  &:not(.active) .collapsible-header {
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+    transition-delay: 250ms;
+    transition-property: border-radius;
+  }
+
+  &.active .collapsible-body {
+    border-radius: 0 0 12px 12px;
+  }
+}
+
+// CSS resolves border-radius per-corner, not per-rule: once the
+// :not(.active) rule above stops matching, nothing here fixes the bottom
+// corners back to square, so a more specific rule elsewhere (e.g. the
+// sidenav's `li > a { border-radius: 100px; }` pill styling, which also
+// matches .collapsible-header since it's an <a> inside a sidenav <li>)
+// is free to fill that gap and leave the header rounded on all 4 corners
+// while expanded. Force it explicitly instead of leaving it implicit.
+.collapsible > li.active .collapsible-header {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 // Popout Collapsible
 
 .collapsible.popout {

package/components/list/_collection.scss

@@ -6,7 +6,10 @@
   background-color: var(--md-sys-color-surface);
   margin: $element-top-margin 0 $element-bottom-margin 0;
   border: 1px solid var(--md-sys-color-outline-variant);
-  border-radius: 2px;
+  // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+  // Matches the 12px corner radius used across cards, dropdowns and
+  // collapsibles instead of the near-square 2px default.
+  border-radius: 12px;
   overflow: hidden;
   position: relative;
 
@@ -90,7 +93,11 @@
 
   &.with-header {
     .collection-header {
-      background-color: transparent;
+      // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+      // A tinted header reads as its own row instead of blending into the
+      // list; it also isn't text, so it shouldn't be selectable.
+      background-color: var(--md-sys-color-surface-variant);
+      user-select: none;
       border-bottom: 1px solid var(--md-sys-color-outline-variant);
       padding: 10px 20px;
     }

package/components/switch/_switches.scss

@@ -23,6 +23,11 @@
   opacity: 0;
   width: 0;
   height: 0;
+  // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+  // Without this, an inherited padding can push the (invisible, 0x0)
+  // checkbox out of alignment with the lever it's meant to sit under.
+  box-sizing: border-box;
+  padding: 0 !important;
 
   // CHECKED
   // Track

package/components/toolbar/_toolbar.scss

@@ -0,0 +1,176 @@
+@use '../../sass/variables' as *;
+
+// @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/partial/_planning_toolbar.scss
+// A rounded "pill" action bar: a full-width flex row split into groups
+// (buttons, a segmented "track" control, an expandable search field) laid
+// out with space-between, sitting inline above the content it controls -
+// not fixed/sticky, just a normal flex row like the source component.
+//
+// :not(.fixed-action-btn) - "toolbar" is already a FAB display mode
+// (.fixed-action-btn.toolbar, see components/button/_buttons.scss); this
+// guards against also painting pill styles onto that unrelated element.
+.toolbar:not(.fixed-action-btn) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 8px;
+  padding: 5px 8px;
+  margin: $element-top-margin 0 $element-bottom-margin 0;
+  border-radius: 27px;
+  background-color: var(--md-sys-color-surface-variant);
+}
+
+// A cluster of controls inside the toolbar (buttons, a track, a search
+// field, ...) kept together and spaced from the next group.
+.toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+/// Track (segmented control)
+///////////////////////////////////////////////////////
+///
+
+// A pill-shaped segmented control - e.g. "Today / Previous / Next" or a
+// "Week / Month / Year" range picker - with a sliding highlight behind
+// whichever item is active.
+.toolbar-track {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: 34px;
+  padding: 3px;
+  border-radius: 999px;
+  background-color: var(--md-sys-color-surface);
+  border: 1px solid var(--md-sys-color-outline-variant);
+}
+
+// A track with no background/border of its own - just for spacing a group
+// of items that don't need the pill-within-a-pill look.
+.toolbar-track.toolbar-track-bare {
+  padding: 3px 0;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+// Positioned/sized by Toolbar's JS (offsetLeft/offsetWidth of the active
+// .toolbar-track-item), not by CSS - the transition below is what makes
+// that JS-driven move/resize animate instead of jumping.
+.toolbar-track-indicator {
+  position: absolute;
+  top: 3px;
+  bottom: 3px;
+  left: 0;
+  z-index: 0;
+  width: 0;
+  border-radius: 999px;
+  background-color: var(--md-sys-color-primary);
+  opacity: 0;
+  pointer-events: none;
+  transition: transform .22s cubic-bezier(.2, .7, .3, 1), width .22s cubic-bezier(.2, .7, .3, 1), opacity .14s ease;
+
+  // Only fade in once Toolbar's JS has measured and placed it for the
+  // first time - otherwise it flashes at 0 width in the top-left corner
+  // for a frame before the first real position is set.
+  .toolbar-track.is-armed & {
+    opacity: 1;
+  }
+}
+
+.toolbar-track-item {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 13px;
+  border: 0;
+  border-radius: 999px;
+  background-color: transparent;
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 12.5px;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color .16s ease;
+
+  &:hover {
+    color: var(--md-sys-color-on-surface);
+  }
+  &.is-active {
+    font-weight: 600;
+    color: var(--md-sys-color-on-primary);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--md-sys-color-primary);
+    outline-offset: 2px;
+  }
+}
+
+/// Expandable search
+///////////////////////////////////////////////////////
+///
+
+// A search field that starts as just an icon button and expands into a
+// full text input once focused (or once it has a value) - Toolbar's JS
+// toggles the .is-expanded class.
+.toolbar-search {
+  display: inline-flex;
+  align-items: center;
+  width: 34px;
+  height: 34px;
+  padding: 2px;
+  overflow: hidden;
+  border-radius: 999px;
+  background-color: var(--md-sys-color-surface);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  transition: width .2s cubic-bezier(.2, .7, .3, 1);
+
+  &.is-expanded {
+    width: 190px;
+  }
+
+  .toolbar-search-toggle {
+    display: inline-flex;
+    flex: 0 0 28px;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background-color: transparent;
+    color: var(--md-sys-color-on-surface-variant);
+    cursor: pointer;
+  }
+
+  .toolbar-search-input {
+    width: 0;
+    min-width: 0;
+    height: 28px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    background-color: transparent;
+    color: var(--md-sys-color-on-surface);
+    font-size: 12px;
+    opacity: 0;
+    transition: opacity .12s ease;
+  }
+
+  &.is-expanded .toolbar-search-input {
+    width: 150px;
+    padding-right: 5px;
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toolbar-track-indicator {
+    transition: opacity .14s ease;
+  }
+}

package/components/toolbar/toolbar.ts

@@ -0,0 +1,137 @@
+import { Component, BaseOptions, InitElements, MElement } from '../../src/component';
+
+export interface ToolbarOptions extends BaseOptions {}
+
+const _defaults: ToolbarOptions = {};
+
+// @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Environment/Partials/PlanningToolbar.ts
+// Generic version of that file's track-indicator sliding and expandable
+// search behavior, decoupled from the page-specific filter/state-binding
+// system (UtilityFilter) the source used - here it's just plain DOM state.
+export class Toolbar extends Component<ToolbarOptions> {
+  _tracks: HTMLElement[];
+
+  constructor(el: HTMLElement, options: Partial<ToolbarOptions>) {
+    super(el, options, Toolbar);
+    (this.el as any).M_Toolbar = this;
+
+    this.options = {
+      ...Toolbar.defaults,
+      ...options
+    };
+
+    this._tracks = Array.from(this.el.querySelectorAll<HTMLElement>('.toolbar-track'));
+    this._setupEventHandlers();
+    this._tracks.forEach((track) => this._moveIndicator(track, false));
+  }
+
+  static get defaults(): ToolbarOptions {
+    return _defaults;
+  }
+
+  static init(el: HTMLElement, options?: Partial<ToolbarOptions>): Toolbar;
+  static init(els: InitElements<MElement>, options?: Partial<ToolbarOptions>): Toolbar[];
+  static init(
+    els: HTMLElement | InitElements<MElement>,
+    options: Partial<ToolbarOptions> = {}
+  ): Toolbar | Toolbar[] {
+    return super.init(els, options, Toolbar);
+  }
+
+  static getInstance(el: HTMLElement): Toolbar {
+    return (el as any).M_Toolbar;
+  }
+
+  destroy() {
+    this._removeEventHandlers();
+    (this.el as any).M_Toolbar = undefined;
+  }
+
+  /**
+   * Re-measure and reposition every track's sliding indicator - call this
+   * after changing which .toolbar-track-item is active from your own code,
+   * or after anything that could have changed the toolbar's layout/width.
+   */
+  updateIndicators() {
+    this._tracks.forEach((track) => this._moveIndicator(track, true));
+  }
+
+  _setupEventHandlers() {
+    this.el.addEventListener('click', this._handleTrackClick);
+    this.el.addEventListener('focusin', this._handleSearchFocusIn);
+    this.el.addEventListener('focusout', this._handleSearchFocusOut);
+    this.el.addEventListener('input', this._handleSearchInput);
+    this.el.addEventListener('keydown', this._handleSearchKeydown);
+    window.addEventListener('resize', this._handleWindowResize);
+  }
+
+  _removeEventHandlers() {
+    this.el.removeEventListener('click', this._handleTrackClick);
+    this.el.removeEventListener('focusin', this._handleSearchFocusIn);
+    this.el.removeEventListener('focusout', this._handleSearchFocusOut);
+    this.el.removeEventListener('input', this._handleSearchInput);
+    this.el.removeEventListener('keydown', this._handleSearchKeydown);
+    window.removeEventListener('resize', this._handleWindowResize);
+  }
+
+  _handleTrackClick = (e: MouseEvent) => {
+    const item = (e.target as HTMLElement).closest('.toolbar-track-item') as HTMLElement;
+    if (!item) return;
+    const track = item.closest('.toolbar-track') as HTMLElement;
+    if (!track || !this._tracks.includes(track)) return;
+
+    track.querySelectorAll('.toolbar-track-item.is-active').forEach((el) => el.classList.remove('is-active'));
+    item.classList.add('is-active');
+    this._moveIndicator(track, true);
+  };
+
+  _handleSearchFocusIn = (e: FocusEvent) => {
+    const search = (e.target as HTMLElement).closest('.toolbar-search');
+    if (search) search.classList.add('is-expanded');
+  };
+
+  _handleSearchFocusOut = (e: FocusEvent) => {
+    const search = (e.target as HTMLElement).closest('.toolbar-search');
+    if (!search) return;
+    const input = search.querySelector<HTMLInputElement>('.toolbar-search-input');
+    if (input && input.value === '') search.classList.remove('is-expanded');
+  };
+
+  _handleSearchInput = (e: Event) => {
+    const input = e.target as HTMLInputElement;
+    if (!input.classList.contains('toolbar-search-input')) return;
+    const search = input.closest('.toolbar-search');
+    if (search) search.classList.toggle('is-expanded', input.value !== '' || document.activeElement === input);
+  };
+
+  _handleSearchKeydown = (e: KeyboardEvent) => {
+    if (e.key !== 'Escape') return;
+    const input = (e.target as HTMLElement).closest('.toolbar-search')?.querySelector<HTMLInputElement>('.toolbar-search-input');
+    if (!input) return;
+    input.value = '';
+    input.blur();
+  };
+
+  _handleWindowResize = () => {
+    this._tracks.forEach((track) => this._moveIndicator(track, false));
+  };
+
+  _moveIndicator(track: HTMLElement, animate: boolean) {
+    const indicator = track.querySelector<HTMLElement>('.toolbar-track-indicator');
+    const active = track.querySelector<HTMLElement>('.toolbar-track-item.is-active');
+    if (!indicator || !active) return;
+
+    if (!animate) indicator.style.transition = 'none';
+    indicator.style.transform = `translateX(${active.offsetLeft - track.clientLeft}px)`;
+    indicator.style.width = `${active.offsetWidth}px`;
+    track.classList.add('is-armed');
+    if (!animate) {
+      // Force layout so the transition-less move above actually applies
+      // before re-enabling transitions on the next frame.
+      void indicator.offsetWidth;
+      requestAnimationFrame(() => {
+        indicator.style.transition = '';
+      });
+    }
+  }
+}