mtrl 0.0.0

package/src/components/list/styles/_list-item.scss

@@ -0,0 +1,142 @@
+// src/components/list/styles/_list-item.scss
+
+@use '../../../styles/abstract/config' as c;
+@use 'variables' as v;
+
+.#{c.$prefix}-list-item {
+  display: flex;
+  align-items: center;
+  min-height: v.$list-item-height;
+  padding: v.$list-padding v.$list-item-padding;
+  position: relative;
+  gap: 16px;
+  cursor: pointer;
+  color: var(--mtrl-sys-color-on-surface);
+  @include c.motion-transition(background-color);
+
+  &:hover {
+    @include c.state-layer(v.$list-hover-state-layer-color, 'hover');
+  }
+
+  &:focus-visible {
+    @include c.state-layer(v.$list-hover-state-layer-color, 'focus');
+    outline: none;
+  }
+
+  &:active {
+    @include c.state-layer(v.$list-hover-state-layer-color, 'pressed');
+  }
+
+  // Content layout
+  &-content {
+    flex: 1;
+    min-width: 0; // Enable text truncation
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  // Text elements
+  &-text {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &-overline {
+    @include c.typography('label-small');
+    color: var(--mtrl-sys-color-on-surface-variant);
+  }
+
+  &-headline {
+    @include c.typography('body-large');
+    color: var(--mtrl-sys-color-on-surface);
+  }
+
+  &-supporting {
+    @include c.typography('body-medium');
+    color: var(--mtrl-sys-color-on-surface-variant);
+  }
+
+  &-meta {
+    @include c.typography('label-small');
+    color: var(--mtrl-sys-color-on-surface-variant);
+    margin-top: 4px;
+  }
+
+  // Leading/trailing elements
+  &-leading,
+  &-trailing {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  &-leading {
+    width: 24px;
+    height: 24px;
+    color: var(--mtrl-sys-color-on-surface-variant);
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &-trailing {
+    color: var(--mtrl-sys-color-on-surface-variant);
+  }
+
+  // Vertical layout variant
+  &.vertical {
+    min-height: 72px;
+    padding: 12px v.$list-item-padding;
+
+    .#{c.$prefix}-list-item {
+      &-content {
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      &-meta {
+        margin-top: v.$list-padding;
+      }
+    }
+  }
+
+  // States
+  &--selected {
+    background-color: var(--mtrl-sys-color-secondary-container);
+    color: var(--mtrl-sys-color-on-secondary-container);
+
+    .#{c.$prefix}-list-item {
+      &-leading,
+      &-trailing {
+        color: var(--mtrl-sys-color-on-secondary-container);
+      }
+    }
+  }
+
+  &--disabled {
+    opacity: 0.38;
+    pointer-events: none;
+  }
+
+  // RTL Support
+  @include c.rtl {
+    .#{c.$prefix}-list-item {
+      &-text {
+        text-align: right;
+      }
+    }
+  }
+
+  // High contrast mode
+  @include c.high-contrast {
+    &--selected {
+      outline: 2px solid currentColor;
+      outline-offset: -2px;
+    }
+  }
+}

package/src/components/list/styles/_list.scss

@@ -0,0 +1,89 @@
+// src/components/list/styles/_list.scss
+
+@use '../../../styles/abstract/config' as c;
+@use 'variables' as v;
+
+.#{c.$prefix}-list {
+  display: flex;
+  flex-direction: column;
+  padding: v.$list-padding 0;
+  min-width: 200px;
+  background-color: var(--mtrl-sys-color-surface);
+
+  // Sections
+  &-section {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    &:not(:last-child) {
+      margin-bottom: v.$list-padding;
+    }
+  }
+
+  &-section-title {
+    @include c.typography('label-large');
+    color: v.$list-section-title-color;
+    padding: v.$list-section-padding v.$list-item-padding 8px;
+  }
+
+  // Dividers
+  &-divider {
+    height: 1px;
+    margin: v.$list-padding 0;
+    background-color: v.$list-divider-color;
+  }
+
+  // Selection states
+  &[data-type="single"],
+  &[data-type="multi"],
+  &[data-type="radio"] {
+    .#{c.$prefix}-list-item {
+      cursor: pointer;
+
+      &--selected {
+        background-color: var(--mtrl-sys-color-secondary-container);
+        color: var(--mtrl-sys-color-on-secondary-container);
+
+        &:hover {
+          background-color: var(--mtrl-sys-color-secondary-container);
+          @include c.state-layer(var(--mtrl-sys-color-on-secondary-container), 'hover');
+        }
+
+        .#{c.$prefix}-list-item-supporting {
+          color: var(--mtrl-sys-color-on-secondary-container);
+        }
+      }
+    }
+  }
+
+  // Dense variant
+  &--dense {
+    .#{c.$prefix}-list-item {
+      min-height: v.$list-item-dense-height;
+    }
+  }
+
+  // Disabled state
+  &--disabled {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  // RTL Support
+  @include c.rtl {
+    .#{c.$prefix}-list-section-title {
+      text-align: right;
+    }
+  }
+
+  // High contrast mode
+  @include c.high-contrast {
+    border: 1px solid currentColor;
+
+    &-divider {
+      border-top: 1px solid currentColor;
+      background: none;
+    }
+  }
+}

package/src/components/list/styles/_variables.scss

@@ -0,0 +1,13 @@
+// src/components/list/styles/_variables.scss
+
+// Component variables
+$list-item-height: 48px !default;
+$list-item-dense-height: 40px !default;
+$list-padding: 8px !default;
+$list-item-padding: 16px !default;
+$list-section-padding: 16px !default;
+
+// Color variables - can be overridden
+$list-divider-color: var(--mtrl-sys-color-outline-variant) !default;
+$list-section-title-color: var(--mtrl-sys-color-primary) !default;
+$list-hover-state-layer-color: var(--mtrl-sys-color-on-surface) !default;

package/src/components/list/styles.scss

@@ -0,0 +1,19 @@
+// src/components/list/styles.scss
+
+// Import core configuration and utilities
+@use '../../styles/abstract/config' as c;
+@use '../../styles/abstract/mixins' as m;
+@use './styles/variables' as v;
+@use './styles/list';
+@use './styles/list-item';
+
+// Component-specific mixins
+@mixin list-item-hover {
+  @include c.state-layer(v.$list-hover-state-layer-color, 'hover');
+}
+
+@mixin list-section-title {
+  @include c.typography('label-large');
+  color: v.$list-section-title-color;
+  padding: v.$list-section-padding v.$list-item-padding 8px;
+}

package/src/components/navigation/api.js

@@ -0,0 +1,43 @@
+// src/components/navigation/api.js
+
+/**
+ * Enhances navigation component with API methods
+ * @param {Object} options - API configuration
+ * @param {Object} options.disabled - Disabled state handlers
+ * @param {Object} options.lifecycle - Lifecycle handlers
+ */
+export const withAPI = ({ disabled, lifecycle }) => (component) => ({
+  ...component,
+  element: component.element,
+
+  // Item management
+  addItem (config) {
+    component.addItem?.(config)
+    return this
+  },
+  removeItem (id) {
+    component.removeItem?.(id)
+    return this
+  },
+  getItem (id) {
+    return component.getItem?.(id)
+  },
+
+  // Active state management
+  setActive (id) {
+    component.setActive?.(id)
+    return this
+  },
+  getActive () {
+    return component.getActive?.()
+  },
+
+  // Event handling
+  on: component.on,
+  off: component.off,
+
+  // State management
+  enable: disabled.enable,
+  disable: disabled.disable,
+  destroy: lifecycle.destroy
+})

package/src/components/navigation/constants.js

@@ -0,0 +1,235 @@
+// src/components/navigation/constants.js
+
+/**
+ * Navigation variants following Material Design 3
+ */
+export const NAV_VARIANTS = {
+  RAIL: 'rail', // Vertical slim navigation
+  DRAWER: 'drawer', // Expandable side navigation
+  BAR: 'bar', // Bottom or top navigation bar
+  DRAWER_MODAL: 'modal', // Modal drawer overlay
+  DRAWER_STANDARD: 'standard' // Standard permanent drawer
+}
+
+/**
+ * Navigation positions
+ */
+export const NAV_POSITIONS = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  TOP: 'top',
+  BOTTOM: 'bottom'
+}
+
+/**
+ * Navigation behaviors
+ */
+export const NAV_BEHAVIORS = {
+  FIXED: 'fixed', // Always visible
+  DISMISSIBLE: 'dismissible', // Can be dismissed/hidden
+  MODAL: 'modal' // Overlays content with scrim
+}
+
+/**
+ * Navigation state classes
+ */
+export const NAV_STATES = {
+  ACTIVE: 'active', // Currently selected item
+  DISABLED: 'disabled', // Disabled state
+  EXPANDED: 'expanded', // Drawer expanded state
+  COLLAPSED: 'collapsed', // Drawer collapsed state
+  HOVERED: 'hovered', // Hover state
+  FOCUSED: 'focused', // Keyboard focus state
+  PRESSED: 'pressed' // Press/click state
+}
+
+/**
+ * Navigation element classes
+ */
+export const NAV_CLASSES = {
+  ROOT: 'nav',
+  ITEM: 'nav-item',
+  ITEM_CONTAINER: 'nav-item-container',
+  ICON: 'nav-item-icon',
+  LABEL: 'nav-item-label',
+  BADGE: 'nav-item-badge',
+  DIVIDER: 'nav-divider',
+  SCRIM: 'nav-scrim',
+  GROUP: 'nav-group',
+  GROUP_TITLE: 'nav-group-title',
+  SUBTITLE: 'nav-subtitle',
+  NESTED_CONTAINER: 'nav-nested-container',
+  NESTED_ITEM: 'nav-nested-item',
+  EXPAND_ICON: 'nav-expand-icon'
+}
+
+/**
+ * Validation schema for navigation configuration
+ */
+export const NAV_SCHEMA = {
+  type: 'object',
+  properties: {
+    variant: {
+      type: 'string',
+      enum: Object.values(NAV_VARIANTS),
+      optional: true,
+      default: NAV_VARIANTS.RAIL
+    },
+    position: {
+      type: 'string',
+      enum: Object.values(NAV_POSITIONS),
+      optional: true,
+      default: NAV_POSITIONS.LEFT
+    },
+    behavior: {
+      type: 'string',
+      enum: Object.values(NAV_BEHAVIORS),
+      optional: true,
+      default: NAV_BEHAVIORS.FIXED
+    },
+    items: {
+      type: 'array',
+      optional: true,
+      default: []
+    },
+    groups: {
+      type: 'array',
+      optional: true
+    },
+    disabled: {
+      type: 'boolean',
+      optional: true
+    },
+    expanded: {
+      type: 'boolean',
+      optional: true
+    },
+    showLabels: {
+      type: 'boolean',
+      optional: true,
+      default: true
+    },
+    scrimEnabled: {
+      type: 'boolean',
+      optional: true,
+      default: false
+    },
+    class: {
+      type: 'string',
+      optional: true
+    }
+  }
+}
+
+/**
+ * Navigation item schema
+ */
+export const NAV_ITEM_SCHEMA = {
+  type: 'object',
+  properties: {
+    id: {
+      type: 'string',
+      required: true
+    },
+    icon: {
+      type: 'string',
+      required: true
+    },
+    label: {
+      type: 'string',
+      required: true
+    },
+    badge: {
+      type: 'string',
+      optional: true
+    },
+    disabled: {
+      type: 'boolean',
+      optional: true
+    },
+    subtitle: {
+      type: 'string',
+      optional: true
+    },
+    groupId: {
+      type: 'string',
+      optional: true
+    }
+  }
+}
+
+/**
+ * Navigation group schema
+ */
+export const NAV_GROUP_SCHEMA = {
+  type: 'object',
+  properties: {
+    id: {
+      type: 'string',
+      required: true
+    },
+    title: {
+      type: 'string',
+      required: true
+    },
+    expanded: {
+      type: 'boolean',
+      optional: true,
+      default: true
+    }
+  }
+}
+
+/**
+ * Navigation item states
+ */
+export const NAV_ITEM_STATES = {
+  EXPANDED: 'expanded',
+  COLLAPSED: 'collapsed'
+}
+
+
+// Update NAV_ITEM_SCHEMA to support nested items
+export const NAV_ITEM_SCHEMA = {
+  type: 'object',
+  properties: {
+    id: {
+      type: 'string',
+      required: true
+    },
+    icon: {
+      type: 'string',
+      required: true
+    },
+    label: {
+      type: 'string',
+      required: true
+    },
+    badge: {
+      type: 'string',
+      optional: true
+    },
+    disabled: {
+      type: 'boolean',
+      optional: true
+    },
+    subtitle: {
+      type: 'string',
+      optional: true
+    },
+    groupId: {
+      type: 'string',
+      optional: true
+    },
+    items: {
+      type: 'array',
+      optional: true,
+      description: 'Nested navigation items'
+    },
+    expanded: {
+      type: 'boolean',
+      optional: true,
+      default: false
+    }
+  }
+}