mtrl 0.0.0

package/src/components/snackbar/styles.scss

@@ -0,0 +1,182 @@
+// src/components/snackbar/styles.scss
+@use 'sass:map';
+@use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/variables' as v;
+
+.#{v.$prefix}-snackbar {
+  // Base styles following modern minimal design
+  @include m.typography('body-medium');
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 280px;
+  max-width: 480px;
+  padding: 12px 16px;
+  gap: 12px;
+  
+  // Updated colors and appearance
+  background-color: rgba(32, 33, 36, 0.9);
+  color: rgb(255, 255, 255);
+  border-radius: 4px;
+  backdrop-filter: blur(8px);
+  
+  // Animation setup - separated properties for better transitions
+  opacity: 0;
+  transform: translateY(20px);
+  transition: 
+    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  
+  z-index: var(--mtrl-sys-z-index-snackbar);
+  pointer-events: none;
+  will-change: transform, opacity;
+  
+  // Message text styles
+  &-text {
+    @include m.truncate(1);
+    flex: 1;
+    font-size: 14px;
+    line-height: 20px;
+  }
+  
+  // Action button styles
+  &-action {
+    @include m.typography('label-large');
+    padding: 8px 12px;
+    margin: -8px -12px;
+    color: rgb(138, 180, 248);
+    background: none;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: 500;
+    font-size: 14px;
+    text-transform: capitalize;
+    white-space: nowrap;
+    transition: background-color 150ms ease;
+    
+    &:hover {
+      background-color: rgba(138, 180, 248, 0.08);
+    }
+    
+    &:focus-visible {
+      outline: 2px solid rgb(138, 180, 248);
+      outline-offset: 0px;
+    }
+    
+    &:active {
+      background-color: rgba(138, 180, 248, 0.12);
+    }
+  }
+  
+  // Positioning variants with corrected transforms
+  &--start {
+    bottom: 24px;
+    left: 24px;
+    transform: translateY(20px);
+    
+    @include m.rtl {
+      left: auto;
+      right: 24px;
+    }
+    
+    @include m.breakpoint-down('sm') {
+      left: 16px;
+      bottom: 16px;
+      
+      @include m.rtl {
+        left: auto;
+        right: 16px;
+      }
+    }
+  }
+  
+  &--center {
+    bottom: 24px;
+    left: 50%;
+    transform: translate(-50%, 20px);
+    
+    @include m.breakpoint-down('sm') {
+      bottom: 16px;
+      width: calc(100% - 32px);
+    }
+  }
+  
+  &--end {
+    bottom: 24px;
+    right: 24px;
+    transform: translateY(20px);
+    
+    @include m.rtl {
+      right: auto;
+      left: 24px;
+    }
+    
+    @include m.breakpoint-down('sm') {
+      right: 16px;
+      bottom: 16px;
+      
+      @include m.rtl {
+        right: auto;
+        left: 16px;
+      }
+    }
+  }
+  
+  // Visible state with corrected transforms
+  &--visible {
+    opacity: 1;
+    pointer-events: auto;
+    
+    &.#{v.$prefix}-snackbar--start,
+    &.#{v.$prefix}-snackbar--end {
+      transform: translateY(0);
+    }
+    
+    &.#{v.$prefix}-snackbar--center {
+      transform: translate(-50%, 0);
+    }
+  }
+  
+  // Multiple line variant
+  &--multiline {
+    padding-top: 14px;
+    padding-bottom: 14px;
+    
+    .#{v.$prefix}-snackbar-text {
+      @include m.truncate(2);
+    }
+  }
+  
+  // Accessibility
+  @include m.reduced-motion {
+    transition: none;
+    transform: none;
+    
+    &--visible {
+      transform: none;
+      
+      &.#{v.$prefix}-snackbar--center {
+        transform: translateX(-50%);
+      }
+    }
+  }
+  
+  @include m.high-contrast {
+    outline: 2px solid currentColor;
+    background-color: black;
+  }
+  
+  // Mobile optimizations
+  @include m.breakpoint-down('sm') {
+    min-width: auto;
+    max-width: none;
+    margin: 0 16px;
+  }
+
+  // Print styles
+  @include m.print {
+    display: none;
+  }
+}

package/src/components/switch/api.js

@@ -0,0 +1,44 @@
+// src/components/switch/api.js
+
+/**
+ * Enhances switch component with API methods
+ * @param {Object} options - API configuration
+ * @param {Object} options.disabled - Disabled state handlers
+ * @param {Object} options.lifecycle - Lifecycle handlers
+ * @param {Object} options.checkable - Checked state handlers
+ */
+export const withAPI = ({ disabled, lifecycle, checkable }) => (component) => ({
+  ...component,
+  element: component.element,
+
+  // Value management
+  getValue: component.getValue,
+  setValue (value) {
+    component.setValue(value)
+    return this
+  },
+
+  // State management
+  check: checkable.check,
+  uncheck: checkable.uncheck,
+  toggle: checkable.toggle,
+  isChecked: checkable.isChecked,
+
+  // Label management
+  setLabel (text) {
+    component.text?.setText(text)
+    return this
+  },
+  getLabel () {
+    return component.text?.getText() || ''
+  },
+
+  // Event handling
+  on: component.on,
+  off: component.off,
+
+  // State management
+  enable: disabled.enable,
+  disable: disabled.disable,
+  destroy: lifecycle.destroy
+})

package/src/components/switch/constants.js

@@ -0,0 +1,80 @@
+// src/components/switch/constants.js
+
+/**
+ * Label position options
+ */
+export const SWITCH_LABEL_POSITION = {
+  START: 'start',
+  END: 'end'
+}
+
+/**
+ * Validation schema for switch configuration
+ */
+export const SWITCH_SCHEMA = {
+  type: 'object',
+  properties: {
+    name: {
+      type: 'string',
+      optional: true
+    },
+    checked: {
+      type: 'boolean',
+      optional: true
+    },
+    required: {
+      type: 'boolean',
+      optional: true
+    },
+    disabled: {
+      type: 'boolean',
+      optional: true
+    },
+    value: {
+      type: 'string',
+      optional: true
+    },
+    label: {
+      type: 'string',
+      optional: true
+    },
+    labelPosition: {
+      type: 'string',
+      enum: Object.values(SWITCH_LABEL_POSITION),
+      optional: true
+    },
+    icon: {
+      type: 'string',
+      optional: true
+    },
+    ariaLabel: {
+      type: 'string',
+      optional: true
+    },
+    class: {
+      type: 'string',
+      optional: true
+    }
+  }
+}
+
+/**
+ * Switch state classes
+ */
+export const SWITCH_STATES = {
+  CHECKED: 'checked',
+  DISABLED: 'disabled',
+  FOCUSED: 'focused'
+}
+
+/**
+ * Switch element classes
+ */
+export const SWITCH_CLASSES = {
+  ROOT: 'switch',
+  INPUT: 'switch-input',
+  TRACK: 'switch-track',
+  THUMB: 'thumb',
+  THUMB_ICON: 'thumb-icon',
+  LABEL: 'switch-label'
+}

package/src/components/switch/index.js

@@ -0,0 +1,2 @@
+// src/components/switch/index.js
+export { default } from './switch.js'

package/src/components/switch/styles.scss

@@ -0,0 +1,172 @@
+// src/components/switch/styles.scss
+@use 'sass:map';
+@use '../../styles/abstract/config' as c;
+
+.#{c.$prefix}-switch {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  min-height: 32px;
+  padding: 4px 0;
+  user-select: none;
+
+  &-input {
+    position: absolute;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    cursor: pointer;
+    z-index: 1;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    // New focus style that's more visible
+    &:focus-visible ~ .#{c.$prefix}-switch-track {
+      outline: 2px solid var(--mtrl-sys-color-primary);
+      outline-offset: 2px;
+    }
+  }
+
+  &-track {
+    position: relative;
+    min-width: 52px;
+    height: 32px;
+    border-radius: 16px;
+    background-color: var(--mtrl-sys-color-surface-container-highest);
+    border: 2px solid var(--mtrl-sys-color-outline);
+    transition: background-color map.get(c.$motion, 'duration-short4') map.get(c.$motion, 'easing-standard'),
+                border-color map.get(c.$motion, 'duration-short4') map.get(c.$motion, 'easing-standard'),
+                outline map.get(c.$motion, 'duration-short4') map.get(c.$motion, 'easing-standard');
+  }
+
+  &-thumb {
+    position: absolute;
+    top: 6px;
+    left: 6px;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: var(--mtrl-sys-color-outline);
+    transform: translateX(0);
+    transition: all map.get(c.$motion, 'duration-short4') map.get(c.$motion, 'easing-emphasized');
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      transform: scale(0);
+      transition: all map.get(c.$motion, 'duration-short4') map.get(c.$motion, 'easing-emphasized');
+      color: var(--mtrl-sys-color-primary);
+      
+      svg {
+        width: 14px;
+        height: 14px;
+      }
+    }
+  }
+
+  &-label {
+    @include c.typography('body-large');
+    margin-left: 12px;
+    color: var(--mtrl-sys-color-on-surface);
+  }
+
+  // Label position variants
+  &--label-start {
+    flex-direction: row-reverse;
+
+    .#{c.$prefix}-switch-label {
+      margin-left: 0;
+      margin-right: 12px;
+    }
+  }
+
+  &--label-end {
+    flex-direction: row;
+
+    .#{c.$prefix}-switch-label {
+      margin-left: 12px;
+      margin-right: 0;
+    }
+  }
+
+  @include c.rtl {
+    &--label-start {
+      .#{c.$prefix}-switch-label {
+        margin-left: 12px;
+        margin-right: 0;
+      }
+    }
+
+    &--label-end {
+      .#{c.$prefix}-switch-label {
+        margin-left: 0;
+        margin-right: 12px;
+      }
+    }
+  }
+
+  // States
+  &--checked {
+    .#{c.$prefix}-switch-track {
+      background-color: var(--mtrl-sys-color-primary);
+      border-color: var(--mtrl-sys-color-primary);
+    }
+
+    .#{c.$prefix}-switch-thumb {
+      background-color: var(--mtrl-sys-color-on-primary);
+      transform: translateX(20px);
+      width: 24px;
+      height: 24px;
+      top: 2px;
+      left: 2px;
+
+      &-icon {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+  }
+
+  &--disabled {
+    opacity: .5;
+  }
+
+  // Hover effects
+  &:not(&--disabled) {
+    .#{c.$prefix}-switch-input:hover + .#{c.$prefix}-switch-track {
+      &::before {
+        content: '';
+        position: absolute;
+        top: -8px;
+        left: -8px;
+        right: -8px;
+        bottom: -8px;
+        background-color: var(--mtrl-sys-color-on-surface);
+        opacity: 0.08;
+        border-radius: 20px;
+      }
+    }
+  }
+
+  @include c.reduced-motion {
+    .#{c.$prefix}-switch-track,
+    .#{c.$prefix}-switch-thumb,
+    .#{c.$prefix}-switch-thumb-icon {
+      transition: none;
+    }
+  }
+
+  @include c.high-contrast {
+    .#{c.$prefix}-switch-track {
+      border-width: 2px;
+    }
+  }
+}

package/src/components/switch/switch.js

@@ -0,0 +1,71 @@
+// src/components/switch/switch.js
+import { PREFIX } from '../../core/config'
+import { pipe } from '../../core/compose'
+import { createBase, withElement } from '../../core/compose/component'
+import {
+  withEvents,
+  withTextLabel,
+  withDisabled,
+  withLifecycle,
+  withInput,
+  withTrack,
+  withCheckable
+} from '../../core/compose/features'
+import { withAPI } from './api'
+
+/**
+ * Adds label position handling to switch
+ */
+const withLabelPosition = (config) => (component) => {
+  if (!config.label) return component
+
+  const position = config.labelPosition || 'end'
+  component.element.classList.add(`${PREFIX}-switch--label-${position}`)
+
+  return component
+}
+
+/**
+ * Creates a new Switch component
+ * @param {Object} config - Switch configuration
+ * @param {string} [config.name] - Input name
+ * @param {boolean} [config.checked] - Initial checked state
+ * @param {boolean} [config.required] - Is input required
+ * @param {boolean} [config.disabled] - Is switch disabled
+ * @param {string} [config.value] - Input value
+ * @param {string} [config.label] - Label text
+ * @param {string} [config.labelPosition='end'] - Label position (start/end)
+ * @param {string} [config.class] - Additional CSS classes
+ */
+const createSwitch = (config = {}) => {
+  const baseConfig = {
+    ...config,
+    componentName: 'switch',
+    prefix: PREFIX
+  }
+
+  return pipe(
+    createBase,
+    withEvents(), // Move events first to ensure system is available
+    withElement({
+      tag: 'div',
+      componentName: 'switch',
+      className: config.class,
+      interactive: true
+    }),
+    withInput(baseConfig),
+    withTrack(baseConfig),
+    withTextLabel(baseConfig),
+    withLabelPosition(baseConfig),
+    withCheckable(baseConfig),
+    withDisabled(),
+    withLifecycle(),
+    comp => withAPI({
+      disabled: comp.disabled,
+      lifecycle: comp.lifecycle,
+      checkable: comp.checkable
+    })(comp)
+  )(baseConfig)
+}
+
+export default createSwitch

package/src/components/textfield/api.js

@@ -0,0 +1,49 @@
+// src/components/textfield/api.js
+
+/**
+ * Enhances textfield 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,
+  // Core element reference
+  element: component.element,
+
+  // Value management
+  getValue: () => component.getValue(),
+  setValue (value) {
+    component.setValue(value)
+    return this
+  },
+
+  // Attributes API
+  setAttribute (name, value) {
+    component.setAttribute(name, value)
+    return this
+  },
+  getAttribute: component.getAttribute,
+  removeAttribute (name) {
+    component.removeAttribute(name)
+    return this
+  },
+
+  // Label management
+  setLabel (text) {
+    component.label?.setText(text)
+    return this
+  },
+  getLabel () {
+    return component.label?.getText() || ''
+  },
+
+  // Event handling
+  on: component.on,
+  off: component.off,
+
+  // State management
+  enable: disabled.enable,
+  disable: disabled.disable,
+  destroy: lifecycle.destroy
+})

package/src/components/textfield/constants.js

@@ -0,0 +1,81 @@
+// src/components/textfield/constants.js
+
+export const TEXTFIELD_VARIANTS = {
+  FILLED: 'filled',
+  OUTLINED: 'outlined'
+}
+
+export const TEXTFIELD_SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+}
+
+export const TEXTFIELD_TYPES = {
+  TEXT: 'text',
+  PASSWORD: 'password',
+  EMAIL: 'email',
+  NUMBER: 'number',
+  TEL: 'tel',
+  URL: 'url',
+  SEARCH: 'search',
+  MULTILINE: 'multiline'
+}
+
+export const TEXTFIELD_SCHEMA = {
+  type: {
+    type: 'string',
+    enum: Object.values(TEXTFIELD_TYPES),
+    required: false
+  },
+  variant: {
+    type: 'string',
+    enum: Object.values(TEXTFIELD_VARIANTS),
+    required: false
+  },
+  size: {
+    type: 'string',
+    enum: Object.values(TEXTFIELD_SIZES),
+    required: false
+  },
+  name: {
+    type: 'string',
+    required: false
+  },
+  label: {
+    type: 'string',
+    required: false
+  },
+  placeholder: {
+    type: 'string',
+    required: false
+  },
+  value: {
+    type: 'string',
+    required: false
+  },
+  required: {
+    type: 'boolean',
+    required: false
+  },
+  disabled: {
+    type: 'boolean',
+    required: false
+  },
+  maxLength: {
+    type: 'number',
+    required: false
+  },
+  pattern: {
+    type: 'string',
+    required: false
+  },
+  autocomplete: {
+    type: 'string',
+    required: false
+  },
+  class: {
+    type: 'string',
+    required: false
+  }
+}

package/src/components/textfield/index.js

@@ -0,0 +1,2 @@
+// src/components/textfield/index.js
+export { default } from './textfield.js'