mtrl 0.0.0

package/src/components/button/styles.scss

@@ -0,0 +1,231 @@
+// src/components/button/styles.scss
+@use 'sass:map';
+@use '../../styles/abstract/config' as c;
+
+.#{c.$prefix}-button {
+  // Base styles
+  @include c.typography('label-large');
+  @include c.flex-center;
+  @include c.shape('full');
+  @include c.motion-transition(
+    background-color,
+    box-shadow,
+    color,
+    border-color
+  );
+  
+  min-width: 40px;
+  height: 40px;
+  padding: 0 24px;
+  border: none;
+  cursor: pointer;
+  user-select: none;
+  
+  // Label styles
+  &-label {
+    @include c.truncate;
+  }
+  
+  // Icon styles
+  &-icon {
+    @include c.flex-center;
+    margin-right: 8px;
+    font-size: 18px;
+    background-color: transparent;
+    @include c.rtl {
+      margin-right: 0;
+      margin-left: 8px;
+    }
+  }
+
+  // Variants
+  &--filled {
+    background-color: var(--mtrl-sys-color-primary);
+    color: var(--mtrl-sys-color-on-primary);
+    @include c.elevation(0);
+    
+    &:hover {
+      @include c.elevation(1);
+      @include c.state-layer(var(--mtrl-sys-color-on-primary), 'hover');
+    }
+    
+    &:focus {
+      @include c.state-layer(var(--mtrl-sys-color-on-primary), 'focus');
+    }
+    
+    &:active {
+      @include c.state-layer(var(--mtrl-sys-color-on-primary), 'pressed');
+    }
+  }
+  
+  &--tonal {
+    background-color: var(--mtrl-sys-color-secondary-container);
+    color: var(--mtrl-sys-color-on-secondary-container);
+    
+    &:hover {
+      @include c.state-layer(var(--mtrl-sys-color-on-secondary-container), 'hover');
+    }
+    
+    &:focus {
+      @include c.state-layer(var(--mtrl-sys-color-on-secondary-container), 'focus');
+    }
+    
+    &:active {
+      @include c.state-layer(var(--mtrl-sys-color-on-secondary-container), 'pressed');
+    }
+  }
+  
+  &--outlined {
+    border: 1px solid var(--mtrl-sys-color-outline);
+    color: var(--mtrl-sys-color-primary);
+    
+    &:hover {
+      @include c.state-layer(var(--mtrl-sys-color-primary), 'hover');
+    }
+    
+    &:focus {
+      @include c.state-layer(var(--mtrl-sys-color-primary), 'focus');
+      border-color: var(--mtrl-sys-color-primary);
+    }
+    
+    &:active {
+      @include c.state-layer(var(--mtrl-sys-color-primary), 'pressed');
+    }
+  }
+  
+  // Variants (adding elevated and text)
+  &--elevated {
+    background-color: var(--mtrl-sys-color-surface-container-low);
+    color: var(--mtrl-sys-color-primary);
+    // Reduced from elevation(1) to a more subtle custom shadow
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2),
+                0px 1px 3px 1px rgba(0, 0, 0, 0.10);
+    
+    &:hover {
+      // Slightly increased elevation on hover, but still subtle
+      box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.2),
+                  0px 2px 6px 2px rgba(0, 0, 0, 0.10);
+      @include c.state-layer(var(--mtrl-sys-color-primary), 'hover');
+    }
+    
+    &:focus {
+      @include c.state-layer(var(--mtrl-sys-color-primary), 'focus');
+    }
+    
+    &:active {
+      // Return to default elevation on press
+      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2),
+                  0px 1px 3px 1px rgba(0, 0, 0, 0.10);
+      @include c.state-layer(var(--mtrl-sys-color-primary), 'pressed');
+    }
+    
+    &.#{c.$prefix}-button--disabled {
+      box-shadow: none;
+      background-color: rgba(var(--mtrl-sys-color-on-surface-rgb), 0.12);
+      color: rgba(var(--mtrl-sys-color-on-surface-rgb), 0.38);
+    }
+  }
+
+  &--text {
+    background-color: transparent;
+    color: var(--mtrl-sys-color-primary);
+    padding: 0 12px;
+    min-width: 48px;
+    
+    &:hover {
+      @include c.state-layer(var(--mtrl-sys-color-primary), 'hover');
+    }
+    
+    &:focus {
+      @include c.state-layer(var(--mtrl-sys-color-primary), 'focus');
+    }
+    
+    &:active {
+      @include c.state-layer(var(--mtrl-sys-color-primary), 'pressed');
+    }
+    
+    // Adjust spacing when icon is present
+    .#{c.$prefix}-button-icon {
+      margin-right: 8px;
+      
+      @include c.rtl {
+        margin-right: 0;
+        margin-left: 8px;
+      }
+    }
+    
+    &.#{c.$prefix}-button--disabled {
+      color: rgba(var(--mtrl-sys-color-on-surface-rgb), 0.38);
+    }
+  }
+
+  &--icon {
+    background-color: transparent;
+  }
+
+  &--circular {
+    border-radius: 50%;
+    padding: 8px;
+    min-width: unset;
+    width: 40px;
+    height: 40px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    .#{c.$prefix}-button-icon {
+     margin: 0;
+    }
+
+    &.#{c.$prefix}-button--small {
+     width: 32px;
+     height: 32px;
+    }
+
+    &.#{c.$prefix}-button--large {
+     width: 48px;
+     height: 48px;
+    }
+  }
+
+  // States
+  &--disabled {
+    opacity: 0.38;
+    pointer-events: none;
+    cursor: default;
+    
+    &.#{c.$prefix}-button--outlined {
+      border-color: rgba(var(--mtrl-sys-color-on-surface-rgb), 0.12);
+    }
+  }
+  
+  // Sizes
+  &--small {
+    height: 32px;
+    padding: 0 16px;
+    
+    .#{c.$prefix}-button-icon {
+      font-size: 16px;
+    }
+  }
+  
+  &--large {
+    height: 48px;
+    padding: 0 32px;
+    
+    .#{c.$prefix}-button-icon {
+      font-size: 20px;
+    }
+  }
+  
+  // Accessibility
+  @include c.focus-ring();
+  
+  @include c.reduced-motion {
+    transition: none;
+  }
+  
+  @include c.high-contrast {
+    border: 1px solid currentColor;
+  }
+}

package/src/components/checkbox/api.js

@@ -0,0 +1,45 @@
+// src/components/checkbox/api.js
+
+/**
+ * Enhances checkbox 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,
+  setIndeterminate: component.setIndeterminate,
+
+  // 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/checkbox/checkbox.js

@@ -0,0 +1,95 @@
+// src/components/checkbox/checkbox.js
+
+import { PREFIX } from '../../core/config'
+import { pipe } from '../../core/compose'
+import { createBase, withElement } from '../../core/compose/component'
+import {
+  withEvents,
+  withTextLabel,
+  withDisabled,
+  withLifecycle,
+  withInput,
+  withCheckable
+} from '../../core/compose/features'
+import { withAPI } from './api'
+import { CHECKBOX_VARIANTS } from './constants'
+
+/**
+ * Adds check icon to checkbox
+ * @param {Object} config - Component configuration
+ */
+const withCheckIcon = (config) => (component) => {
+  const icon = document.createElement('span')
+  icon.className = `${config.prefix}-checkbox-icon`
+  icon.innerHTML = `
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"></path>
+    </svg>
+  `
+  component.element.appendChild(icon)
+  return component
+}
+
+/**
+ * Creates a new Checkbox component
+ * @param {Object} config - Checkbox configuration
+ * @param {string} [config.name] - Input name attribute
+ * @param {boolean} [config.checked] - Initial checked state
+ * @param {boolean} [config.indeterminate] - Initial indeterminate state
+ * @param {boolean} [config.required] - Whether input is required
+ * @param {boolean} [config.disabled] - Whether checkbox is disabled
+ * @param {string} [config.value] - Input value attribute
+ * @param {string} [config.label] - Label text
+ * @param {string} [config.labelPosition='end'] - Label position (start/end)
+ * @param {string} [config.variant='filled'] - Visual variant
+ * @param {string} [config.class] - Additional CSS classes
+ */
+const createCheckbox = (config = {}) => {
+  const baseConfig = {
+    ...config,
+    componentName: 'checkbox',
+    prefix: PREFIX,
+    variant: config.variant || CHECKBOX_VARIANTS.FILLED
+  }
+
+  const enhancedWithCheckable = (component) => {
+    const enhanced = withCheckable(baseConfig)(component)
+
+    // Add indeterminate state handling
+    if (config.indeterminate) {
+      enhanced.input.indeterminate = true
+    }
+
+    enhanced.setIndeterminate = (state) => {
+      enhanced.input.indeterminate = state
+      enhanced.element.classList.toggle(`${PREFIX}-checkbox--indeterminate`, state)
+      return enhanced
+    }
+
+    return enhanced
+  }
+
+  return pipe(
+    createBase,
+    withEvents(),
+    withElement({
+      tag: 'div',
+      componentName: 'checkbox',
+      className: config.class,
+      interactive: true
+    }),
+    withInput(baseConfig),
+    withCheckIcon(baseConfig),
+    withTextLabel(baseConfig),
+    enhancedWithCheckable,
+    withDisabled(),
+    withLifecycle(),
+    comp => withAPI({
+      disabled: comp.disabled,
+      lifecycle: comp.lifecycle,
+      checkable: comp.checkable
+    })(comp)
+  )(baseConfig)
+}
+
+export default createCheckbox

package/src/components/checkbox/constants.js

@@ -0,0 +1,88 @@
+// src/components/checkbox/constants.js
+
+/**
+ * Visual variants for checkbox
+ */
+export const CHECKBOX_VARIANTS = {
+  FILLED: 'filled',
+  OUTLINED: 'outlined'
+}
+
+/**
+ * Label position options
+ */
+export const CHECKBOX_LABEL_POSITION = {
+  START: 'start',
+  END: 'end'
+}
+
+/**
+ * Validation schema for checkbox configuration
+ */
+export const CHECKBOX_SCHEMA = {
+  type: 'object',
+  properties: {
+    name: {
+      type: 'string',
+      optional: true
+    },
+    checked: {
+      type: 'boolean',
+      optional: true
+    },
+    indeterminate: {
+      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(CHECKBOX_LABEL_POSITION),
+      optional: true
+    },
+    variant: {
+      type: 'string',
+      enum: Object.values(CHECKBOX_VARIANTS),
+      optional: true
+    },
+    class: {
+      type: 'string',
+      optional: true
+    }
+  }
+}
+
+/**
+ * Checkbox state classes
+ */
+export const CHECKBOX_STATES = {
+  CHECKED: 'checked',
+  INDETERMINATE: 'indeterminate',
+  DISABLED: 'disabled',
+  FOCUSED: 'focused'
+}
+
+/**
+ * Checkbox element classes
+ */
+export const CHECKBOX_CLASSES = {
+  ROOT: 'checkbox',
+  INPUT: 'checkbox-input',
+  ICON: 'checkbox-icon',
+  LABEL: 'checkbox-label'
+}

package/src/components/checkbox/index.js

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

package/src/components/checkbox/styles.scss

@@ -0,0 +1,183 @@
+// src/components/checkbox/styles.scss
+@use 'sass:map';
+@use '../../styles/abstract/config' as c;
+
+.#{c.$prefix}-checkbox {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  min-height: 40px;
+  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;
+    }
+
+    &:focus-visible ~ .#{c.$prefix}-checkbox-icon {
+      outline: 2px solid var(--mtrl-sys-color-primary);
+      outline-offset: 2px;
+    }
+  }
+
+  &-icon {
+    position: relative;
+    width: 18px;
+    height: 18px;
+    border-radius: 2px;
+    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');
+
+    svg {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 18px;
+      height: 18px;
+      transform: translate(-50%, -50%) scale(0);
+      fill: currentColor;
+      color: var(--mtrl-sys-color-on-primary);
+      transition: transform map.get(c.$motion, 'duration-short4') map.get(c.$motion, 'easing-emphasized');
+    }
+  }
+
+  &-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}-checkbox-label {
+      margin-left: 0;
+      margin-right: 12px;
+    }
+  }
+
+  &--label-end {
+    flex-direction: row;
+
+    .#{c.$prefix}-checkbox-label {
+      margin-left: 12px;
+      margin-right: 0;
+    }
+  }
+
+  @include c.rtl {
+    &--label-start {
+      .#{c.$prefix}-checkbox-label {
+        margin-left: 12px;
+        margin-right: 0;
+      }
+    }
+
+    &--label-end {
+      .#{c.$prefix}-checkbox-label {
+        margin-left: 0;
+        margin-right: 12px;
+      }
+    }
+  }
+
+  // States
+  .#{c.$prefix}-checkbox-input:checked ~ .#{c.$prefix}-checkbox-icon {
+    background-color: var(--mtrl-sys-color-primary);
+    border-color: var(--mtrl-sys-color-primary);
+
+    svg {
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+
+  &--indeterminate {
+    .#{c.$prefix}-checkbox-icon {
+      background-color: var(--mtrl-sys-color-primary);
+      border-color: var(--mtrl-sys-color-primary);
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 10px;
+        height: 2px;
+        background-color: var(--mtrl-sys-color-on-primary);
+      }
+
+      svg {
+        display: none;
+      }
+    }
+  }
+
+  &--disabled {
+    opacity: .5;
+  }
+
+  // Variants
+  &--outlined {
+    .#{c.$prefix}-checkbox-icon {
+      background-color: transparent;
+    }
+
+    .#{c.$prefix}-checkbox-input:checked ~ .#{c.$prefix}-checkbox-icon {
+      background-color: transparent;
+      border-color: var(--mtrl-sys-color-primary);
+
+      svg {
+        color: var(--mtrl-sys-color-primary);
+      }
+    }
+
+    &.#{c.$prefix}-checkbox--indeterminate {
+      .#{c.$prefix}-checkbox-icon::after {
+        background-color: var(--mtrl-sys-color-primary);
+      }
+    }
+  }
+
+  // Hover effects
+  &:not(&--disabled) {
+    .#{c.$prefix}-checkbox-input:hover ~ .#{c.$prefix}-checkbox-icon {
+      &::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: 4px;
+      }
+    }
+  }
+
+  @include c.reduced-motion {
+    .#{c.$prefix}-checkbox-icon,
+    .#{c.$prefix}-checkbox-icon svg {
+      transition: none;
+    }
+  }
+
+  @include c.high-contrast {
+    .#{c.$prefix}-checkbox-icon {
+      border-width: 2px;
+    }
+  }
+}

package/src/components/container/api.js

@@ -0,0 +1,42 @@
+// src/components/container/api.js
+
+/**
+ * Enhances container component with API methods
+ * @param {Object} options - API configuration
+ * @param {Object} options.lifecycle - Lifecycle handlers
+ */
+export const withAPI = ({ lifecycle }) => (component) => ({
+  ...component,
+  element: component.element,
+
+  // Attribute management
+  get (prop) {
+    return component.element.getAttribute(prop)
+  },
+  set (prop, value) {
+    value === null
+      ? component.element.removeAttribute(prop)
+      : component.element.setAttribute(prop, value)
+    return this
+  },
+
+  // Content management
+  setContent (content) {
+    if (content instanceof Node) {
+      component.element.appendChild(content)
+    } else {
+      component.element.innerHTML = content
+    }
+    return this
+  },
+  getContent () {
+    return component.element.innerHTML
+  },
+
+  // Event handling
+  on: component.on,
+  off: component.off,
+
+  // Lifecycle
+  destroy: lifecycle.destroy
+})