@magmonium/one 0.0.4 → 0.0.7

package/sass/mixins/_index.sass

@@ -0,0 +1,29 @@
+@forward "typography"
+@forward "device"
+@forward "layout"
+@forward "grid"
+@forward "utilities"
+@forward "spacing"
+@forward "borders"
+@forward "breakpoints"
+@forward "button"
+@forward "control"
+@forward "flex"
+@forward "position"
+@forward "sizing"
+@forward "display"
+@forward "colors"
+@forward "backgrounds"
+@forward "backdrops"
+@forward "overflow"
+@forward "header"
+@forward "links"
+@forward "text"
+@forward "lists"
+@forward "toggle"
+@forward "radio"
+@forward "interactive"
+@forward "input"
+@forward "checkbox"
+@forward "form"
+@forward "label"

package/sass/mixins/_input.sass

@@ -0,0 +1,132 @@
+@use 'sass:math'
+@use '../variables/colors' as *
+@use '../functions/functions' as f
+@use 'interactive' as *
+@use 'control' as *
+
+
+=input-text-base($size: 1em)
+  appearance: none
+  border: #{f.derive-control-border($size)} solid #ccc
+  border-radius: #{f.derive-control-radius($size)}
+  padding: #{f.derive-control-gap($size)} #{f.derive-control-padding-x($size)}
+  font-family: inherit
+  font-size: #{$size}
+  line-height: 1.5
+  color: $text
+  background-color: $background
+  transition: border-color 0.2s ease, box-shadow 0.2s ease
+  width: 100%
+
+  &:hover
+    border-color: $text-secondary
+
+  &:focus
+    outline: none
+    border-color: $focus
+    box-shadow: none
+    background-color: transparent
+
+  &.error
+    border-color: transparent
+    box-shadow: none
+
+    &:focus
+      border-color: transparent
+      box-shadow: none
+
+  &:disabled
+    opacity: 0.6
+    cursor: not-allowed
+    background-color: $frame
+    color: $text-tertiary
+    border-color: $border
+
+    & + label
+      opacity: 0.6
+      cursor: not-allowed
+      color: $text-tertiary
+
+  &[readonly]
+    cursor: default
+    border-color: $border
+    background-color: transparent
+
+    &:focus
+      box-shadow: none
+      border-color: $border
+
+  &::placeholder
+    color: $text-tertiary
+    opacity: 1
+
+// Variant mixins
+=input-text-small
+  $size: calc(1em * 0.5)
+  +input-text-base($size)
+  padding: #{f.derive-control-gap($size)} #{f.derive-control-padding-x($size, math.div(4, 3))}
+  font-size: 0.875rem
+
+=input-text-large
+  $size: calc(1em * 1.5)
+  +input-text-base($size)
+  padding: #{f.derive-control-gap($size)} #{f.derive-control-padding-x($size, math.div(8, 9))}
+  font-size: 1.125rem
+
+// Input wrapper mixin - shared by all .input-wrapper components
+=input-wrapper
+  display: flex
+  align-items: center
+  background: $background
+  $size: 1em
+  +control-dims($size)
+  border-width: var(--m-input-border-width, 2px)
+  border-radius: var(--m-input-radius, 4px)
+  height: calc(var(--input-size, #{$size}) * 2.25)
+  min-height: calc(var(--input-size, #{$size}) * 2.25)
+  padding-top: 0
+  padding-bottom: 0
+  +control-interactive(var(--m-input-color, var(--m-mm)))
+  border-style: solid
+  backdrop-filter: var(--m-text-input-backdrop-filter, none)
+  -webkit-backdrop-filter: var(--m-text-input-backdrop-filter, none)
+  box-shadow: var(--m-text-input-shadow, none)
+
+  // trailing button/icon carries its own inset — drop wrapper right pad so it
+  // sits flush at the right edge like the dropdown's chevron. A leading icon
+  // precedes the input, so a trailing m-icon is always the last child.
+  &:has(
+      > m-one-button,
+      > m-button,
+      > .input-indicator,
+      > .input-suffix,
+      > m-icon:last-child
+    )
+    padding-right: 0
+
+  &:focus-visible:not(:disabled),
+  &:focus-within:not(:disabled)
+    border-color: var(--m-text-input-focus-border, #{$focus})
+    box-shadow: var(--m-text-input-shadow, none)
+
+  &:has(.error)
+    border-color: $error
+    box-shadow: none
+
+  &:has(.error):focus-within
+    border-color: $error
+    box-shadow: none
+
+  input, textarea
+    flex: 1
+    border: none
+    outline: none
+    background: transparent
+    color: $text
+    font-family: inherit
+    font-size: inherit
+    padding: 0
+
+    &:focus
+      border-color: transparent
+      box-shadow: none

package/sass/mixins/_interactive.sass

@@ -0,0 +1,19 @@
+=interactive-border($color, $focus: '&:focus-visible, &:focus-within')
+  border-color: #{$color}
+  transition: border-color 0.2s ease, box-shadow 0.2s ease
+  &:hover:not(:disabled)
+    border-color: color-mix(in srgb, #{$color} 45%, rgba(0, 0, 0, 0.12))
+  #{$focus}
+    box-shadow: 0 0 0 2px color-mix(in srgb, #{$color} 20%, transparent)
+
+=control-interactive($color)
+  border-color: #{$color}
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, opacity 0.2s ease
+  &:hover:not(:disabled)
+    background-color: color-mix(in srgb, #{$color} 6%, transparent)
+  &:focus-visible:not(:disabled),
+  &:focus-within:not(:disabled)
+    box-shadow: 0 0 0 2px color-mix(in srgb, #{$color} 20%, transparent)
+  &:disabled
+    opacity: 0.6
+    cursor: not-allowed

package/sass/mixins/_label.sass

@@ -0,0 +1,25 @@
+@use '../variables/colors' as *
+
+=input-label
+  color: var(--m-input-wrapper-color, #4169e1)
+  transition: color 0.2s ease
+  display: inline-block
+  font-size: calc(1.25em * 0.7)
+  font-weight: 500
+  margin-bottom: calc(1.25em * 0.35)
+  cursor: pointer
+  line-height: 1.5
+
+  &.disabled
+    color: $text-secondary
+
+  &.required::before
+    content: '* '
+    color: $error
+    font-weight: 600
+
+  &.disabled::after
+    color: $text-secondary
+
+  &:has(+ input:focus)
+    color: $focus

package/sass/mixins/_layout.sass

@@ -0,0 +1,251 @@
+// Layout Mixins - Robust and Responsive Layout System
+@use 'sass:math'
+@use '../variables/spacing' as *
+@use '../variables/colors' as *
+@use '../functions/functions' as *
+@use './breakpoints' as breakpoints
+
+// ===========================================
+// RESPONSIVE CONTAINER SYSTEM
+// ===========================================
+
+// Smart responsive container with automatic max-widths
+@mixin responsive-container($padding: $container-padding-x, $max-widths: $container-max-widths)
+  width: 100%
+  margin-left: auto
+  margin-right: auto
+  padding-left: $padding
+  padding-right: $padding
+
+  // Apply max-widths at each breakpoint
+  @each $breakpoint, $max-width in $max-widths
+    @include breakpoints.media-breakpoint-up($breakpoint)
+      max-width: $max-width
+
+// Adaptive padding that scales with screen size
+@mixin responsive-padding($base: $spacer, $scale-factor: 0.5)
+  padding: $base * $scale-factor
+
+  @include breakpoints.media-breakpoint-up(sm)
+    padding: $base * ($scale-factor + 0.25)
+
+  @include breakpoints.media-breakpoint-up(md)
+    padding: $base
+
+  @include breakpoints.media-breakpoint-up(lg)
+    padding: $base * ($scale-factor + 1)
+
+  @include breakpoints.media-breakpoint-up(xl)
+    padding: $base * ($scale-factor + 1.5)
+
+// Flexible responsive grid system
+@mixin responsive-grid($columns: 1, $gap: $grid-gutter-width, $breakpoints: (sm: 2, md: 3, lg: 4, xl: 5))
+  display: grid
+  grid-template-columns: repeat($columns, 1fr)
+  gap: $gap
+
+  @each $breakpoint, $cols in $breakpoints
+    @include breakpoints.media-breakpoint-up($breakpoint)
+      grid-template-columns: repeat($cols, 1fr)
+
+// ===========================================
+// ROBUST LAYOUT UTILITIES
+// ===========================================
+
+// Advanced flexbox with responsive behavior and fallbacks
+@mixin robust-flex($direction: row, $justify: flex-start, $align: stretch, $wrap: nowrap, $gap: 0)
+  display: flex
+  flex-direction: $direction
+  justify-content: $justify
+  align-items: $align
+  flex-wrap: $wrap
+  gap: $gap
+
+  // Fallback for older browsers without gap support
+  @supports not (gap: $gap)
+    margin: calc(-#{$gap} / 2)
+    
+    > *
+      margin: calc(#{$gap} / 2)
+
+// Responsive stack that switches between vertical/horizontal
+@mixin responsive-stack($mobile-direction: column, $desktop-direction: row, $breakpoint: md, $gap: $spacer)
+  @include robust-flex($mobile-direction, flex-start, stretch, nowrap, $gap)
+
+  @include breakpoints.media-breakpoint-up($breakpoint)
+    flex-direction: $desktop-direction
+
+// Smart spacing that adapts to screen size
+@mixin adaptive-spacing($property: margin, $base: $spacer, $responsive: true)
+  #{$property}: $base * 0.5
+
+  @if $responsive
+    @include breakpoints.media-breakpoint-up(sm)
+      #{$property}: $base * 0.75
+
+    @include breakpoints.media-breakpoint-up(md)
+      #{$property}: $base
+
+    @include breakpoints.media-breakpoint-up(lg)
+      #{$property}: $base * 1.25
+
+    @include breakpoints.media-breakpoint-up(xl)
+      #{$property}: $base * 1.5
+
+// ===========================================
+// MODERN LAYOUT FEATURES
+// ===========================================
+
+// CSS Grid layout with responsive columns and gaps
+@mixin css-grid-layout($min-column-width: 250px, $max-columns: none, $gap: $grid-gutter-width)
+  display: grid
+  gap: $gap
+  
+  @if $max-columns
+    grid-template-columns: repeat(auto-fit, minmax($min-column-width, 1fr))
+    
+    @include breakpoints.media-breakpoint-up(lg)
+      grid-template-columns: repeat(auto-fit, minmax($min-column-width, calc(100% / #{$max-columns})))
+  @else
+    grid-template-columns: repeat(auto-fit, minmax($min-column-width, 1fr))
+
+// Multi-column layout with smart breakpoints
+@mixin responsive-columns($columns: 2, $gap: $spacer, $min-width: 250px)
+  columns: 1
+  column-gap: $gap
+  column-fill: balance
+
+  @include breakpoints.media-breakpoint-up(sm)
+    @if $columns >= 2
+      columns: 2
+
+  @include breakpoints.media-breakpoint-up(md)
+    @if $columns >= 3
+      columns: 3
+
+  @include breakpoints.media-breakpoint-up(lg)
+    columns: $columns
+
+  // Prevent awkward breaks
+  > *
+    break-inside: avoid
+    margin-bottom: $gap
+
+// Typography that scales responsively
+@mixin adaptive-typography($base-size: 1rem, $scale-ratio: 1.2, $responsive: true)
+  font-size: $base-size
+
+  @if $responsive
+    @include breakpoints.media-breakpoint-up(sm)
+      font-size: $base-size * 1.05
+
+    @include breakpoints.media-breakpoint-up(md)
+      font-size: $base-size * 1.1
+
+    @include breakpoints.media-breakpoint-up(lg)
+      font-size: $base-size * $scale-ratio
+
+    @include breakpoints.media-breakpoint-up(xl)
+      font-size: $base-size * ($scale-ratio * 1.1)
+
+// ===========================================
+// NAVIGATION & UI MIXINS
+// ===========================================
+
+// Mobile-first navigation patterns
+@mixin responsive-navigation($mobile-layout: stack, $desktop-layout: horizontal, $breakpoint: md)
+  @if $mobile-layout == stack
+    @include robust-flex(column, flex-start, stretch, nowrap, 0.5rem)
+  @else if $mobile-layout == horizontal
+    @include robust-flex(row, space-between, center, wrap, 0.5rem)
+
+  @include breakpoints.media-breakpoint-up($breakpoint)
+    @if $desktop-layout == horizontal
+      @include robust-flex(row, space-between, center, nowrap, 1rem)
+    @else if $desktop-layout == stack
+      @include robust-flex(column, flex-start, stretch, nowrap, 1rem)
+
+// Card grid that adapts to screen size
+@mixin adaptive-card-grid($min-card-width: 280px, $max-cards-per-row: 4, $gap: $spacer)
+  @include css-grid-layout($min-card-width, $max-cards-per-row, $gap)
+  
+  // Card styling
+  > *
+    background: $white
+    border-radius: 0.375rem
+    padding: $spacer
+    box-shadow: 0 0.125rem 0.25rem rgba($black, 0.1)
+    transition: transform 0.2s ease, box-shadow 0.2s ease
+
+    &:hover
+      transform: translateY(-2px)
+      box-shadow: 0 0.25rem 0.5rem rgba($black, 0.15)
+
+// Responsive sidebar layout
+@mixin responsive-sidebar($sidebar-width: 250px, $collapse-breakpoint: md, $gap: $spacer)
+  display: grid
+  gap: $gap
+  grid-template-columns: 1fr
+  grid-template-areas: "main"
+
+  .sidebar
+    grid-area: sidebar
+    width: 100%
+    
+    // Mobile: full width, stacked
+    @include breakpoints.media-breakpoint-down($collapse-breakpoint)
+      order: -1
+
+  .main-content
+    grid-area: main
+    min-width: 0 // Prevent grid blowout
+
+  // Desktop: side-by-side layout
+  @include breakpoints.media-breakpoint-up($collapse-breakpoint)
+    grid-template-columns: $sidebar-width 1fr
+    grid-template-areas: "sidebar main"
+
+    .sidebar
+      position: sticky
+      top: 0
+      height: fit-content
+
+// ===========================================
+// UTILITY LAYOUT MIXINS
+// ===========================================
+
+// Aspect ratio container
+@mixin aspect-ratio($ratio: math.div(16, 9))
+  position: relative
+  
+  &::before
+    content: ""
+    display: block
+    padding-top: percentage(math.div(1, $ratio))
+
+  > *
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+    object-fit: cover
+
+// Responsive visibility utilities
+@mixin responsive-visibility($show-on: (), $hide-on: ())
+  @each $breakpoint in $hide-on
+    @include breakpoints.media-breakpoint-only($breakpoint)
+      display: none !important
+
+  @each $breakpoint in $show-on
+    @include breakpoints.media-breakpoint-only($breakpoint)
+      display: block !important
+
+// Safe area insets for mobile devices
+@mixin safe-area-insets($property: padding, $directions: (top, right, bottom, left))
+  @each $direction in $directions
+    #{$property}-#{$direction}: env(safe-area-inset-#{$direction})
+
+// Modern clamp-based responsive sizing
+@mixin fluid-size($min-size, $max-size, $min-vw: 320px, $max-vw: 1200px)
+  font-size: clamp(#{$min-size}, #{$min-size} + (#{strip-unit($max-size)} - #{strip-unit($min-size)}) * math.div(100vw - #{$min-vw}, strip-unit($max-vw) - strip-unit($min-vw)), #{$max-size})

package/sass/mixins/_links.sass

@@ -0,0 +1,85 @@
+// Link Mixins - Reusable link state management
+@use '../variables/colors' as *
+
+// Base link mixin - removes default styling and adds transitions
+@mixin link-base
+  text-decoration: none
+  cursor: pointer
+  transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out
+  outline: none
+  
+  &:focus
+    outline: 2px solid $focus
+    outline-offset: 2px
+
+// Link states mixin - parameterized state management
+@mixin link-states($color, $hover-color, $active-color: $hover-color)
+  color: $color
+  
+  &:hover
+    color: $hover-color
+    
+  &:active
+    color: $active-color
+    
+  &:visited
+    color: $color
+
+// Link underline variants
+@mixin link-underline($style: 'hover')
+  @if $style == 'always'
+    text-decoration: underline
+  @else if $style == 'hover'
+    text-decoration: none
+    &:hover
+      text-decoration: underline
+  @else if $style == 'none'
+    text-decoration: none
+    &:hover
+      text-decoration: none
+
+// External link styling
+@mixin link-external
+  &::after
+    content: '↗'
+    display: inline-block
+    margin-left: 0.25em
+    font-size: 0.875em
+    opacity: 0.7
+
+// Link with icon support
+@mixin link-with-icon($position: 'left', $gap: 0.5rem)
+  display: inline-flex
+  align-items: center
+  gap: $gap
+  
+  .link-icon
+    @if $position == 'left'
+      order: -1
+    @else if $position == 'right'
+      order: 1
+    
+    display: inline-flex
+    align-items: center
+
+// Disabled link state
+@mixin link-disabled
+  color: $text-quaternary
+  cursor: not-allowed
+  pointer-events: none
+  opacity: 0.6
+
+// Button-like link styling
+@mixin link-button($padding: 0.5rem 1rem)
+  display: inline-flex
+  align-items: center
+  justify-content: center
+  padding: $padding
+  border-radius: 4px
+  text-decoration: none
+  font-weight: 500
+  transition: all 0.2s ease-in-out
+  
+  &:hover
+    transform: translateY(-1px)
+    text-decoration: none