novacbn commented 2 years ago

CHANGELOG

Updated <* spacing spacing_x spacing_y> global modifiers to use !important when applied.
Added the following Components / Component Features
- Display
  - DateStamp — Formats a ISO 8601 / RFC 3339 date timestamp into a readable human string rendered via <time>.
    - <DateStamp calendar={string}> — Alters the calendar used for calculations / formatting via Temporal Calendar Codes.
    - <DateStamp locale={string}> — Alters the locale used for displaying internationalized text via RFC 5646 / BCP 47 language tags.
    - <DateStamp day="2-digit/numeric"> — Alters how a displayed day is formatted.
    - <DateStamp month="2-digit/long/narrow/numeric/short"> — Alters how a displayed month is formatted.
    - <DateStamp weekday="long/narrow/short"> — Alters how a displayed weekday is formatted.
    - <DateStamp year="2-digit/numeric"> — Alters how a displayed year is formatted.
    - <DateStamp timestamp={string}> — Sets the ISO 8601 / RFC 3339 timestamp being formatted for display.
  - DateTimeStamp — Formats a ISO 8601 / RFC 3339 datetime timestamp into a readable human string rendered via <time>, supporting timezones.
    - <DateTimeStamp calendar={string}> — Allows for changing the calendar used for calculations / formatting via Temporal Calendar Codes.
    - <DateTimeStamp locale={string}> — Alters the locale used for displaying internationalized text via RFC 5646 / BCP 47 language tags.
    - <DateTimeStamp day="2-digit/numeric"> — Alters how a displayed day is formatted.
    - <DateTimeStamp month="2-digit/long/narrow/numeric/short"> — Alters how a displayed month is formatted.
    - <DateTimeStamp weekday="long/narrow/short"> — Alters how a displayed weekday is formatted.
    - <DateTimeStamp year="2-digit/numeric"> — Alters how a displayed year is formatted.
    - <DateTimeStamp hour="2-digit/numeric"> — Alters how a displayed hour is formatted.
    - <DateTimeStamp hour_12={boolean}> — Alters to showing hours in 12-hour format.
    - <DateTimeStamp minute="2-digit/numeric"> — Alters how a displayed minute is formatted.
    - <DateTimeStamp second="2-digit/numeric"> — Alters how a displayed second is formatted.
    - <DateTimeStamp timestamp={string}> — Sets the ISO 8601 / RFC 3339 timestamp being formatted for display.
  - TimeStamp — Formats a ISO 8601 / RFC 3339 time timestamp into a readable human string rendered via <time>.
    - <TimeStamp locale={string}> — Alters the locale used for displaying internationalized text via RFC 5646 / BCP 47 language tags.
    - <TimeStamp hour="2-digit/numeric"> — Alters how a displayed hour is formatted.
    - <TimeStamp hour_12={boolean}> — Alters to showing hours in 12-hour format.
    - <TimeStamp minute="2-digit/numeric"> — Alters how a displayed minute is formatted.
    - <TimeStamp second="2-digit/numeric"> — Alters how a displayed second is formatted.
    - <TimeStamp timestamp={string}> — Sets the ISO 8601 / RFC 3339 timestamp being formatted for display.
- Widgets
  - Widget — Provides a holistic set of UI primitives for built-in Widgets.
    - <Widget.Container> — Renders a spaced grid that provides styling to other <Widget.*> Components.
    - <Widget.Button> — Renders a button similar to <Menu.Button>.
    - <Widget.Header> — Renders text with title formatting.
    - <Widget.Section> — Renders children in a spaced grid.
  - DayPicker — Built-in Widget for allowing the user to select a calendar date from a given month.
    - <DayPicker on:change={CustomEvent<void>}> — Dispatches whenever <DayPicker value> changes.
    - <DayPicker multiple={boolean}> — Enables selection of multiple days.
    - <DayPicker once={boolean}> — Disables toggling off of already selected days.
    - <DayPicker readonly={boolean}> — Disables toggling on of unselected days.
    - <DayPicker calendar={string}> — Allows for changing the calendar used for calculations / formatting via Temporal Calendar Codes.
    - <DayPicker locale={string}> — Alters the locale used for displaying internationalized text via RFC 5646 / BCP 47 language tags.
    - <DayPicker day="2-digit/numeric"> — Alters how a displayed day is formatted.
    - <DayPicker weekday="long/narrow/short"> — Alters how a displayed weekday is formatted.
    - <DayPicker disabled={boolean}> — Disables all days from being selected.
    - <DayPicker disabled={string[]}> — Disables the given ISO 8601 / RFC 3339 timestamps from being selected.
    - <DayPicker max={string}> — Sets the maximum day timestamp ISO 8601 / RFC 3339 in the future that can be selected.
    - <DayPicker min={string}> — Sets the minimum day timestamp ISO 8601 / RFC 3339 in the past that can be selected.
    - <DayPicker highlight={string[]}> — Highlights the given ISO 8601 / RFC 3339 timestamps.
    - <DayPicker timestamp={string}> — Sets the ISO 8601 / RFC 3339 timestamp of the calendar being listed.
    - <DayPicker value={string[]}> — Sets the selected day ISO 8601 / RFC 3339 timestamps.
    - <DayPicker palette="accent/dark/light/alert/affirmative/negative"> — Alters the rendered color palette.
    - <DayPicker sizing="tiny/small/medium/large/huge"> — Alters the sizing of the Widget and children Components.
  - DayStepper — Built-in Widget for allowing the user to step through days.
    - <DayStepper on:change={CustomEvent<void>}> — Dispatches whenever <DayStepper value> changes.
    - <DayStepper disabled={boolean}> — Disables days from being stepped through.
    - <DayStepper readonly={boolean}> — Disables days from being stepped through without visual changes.
    - <DayStepper calendar={string}> — Allows for changing the calendar used for calculations / formatting via Temporal Calendar Codes.
    - <DayStepper locale={string}> — Alters the locale used for displaying internationalized text via RFC 5646 / BCP 47 language tags.
    - <DayStepper day="2-digit/numeric"> — Alters how a displayed day is formatted.
    - <DayStepper month="2-digit/long/narrow/numeric/short> — Alters how a displayed month is formatted.
    - <DayStepper weekday="long/narrow/short"> — Alters how a displayed weekday is formatted.
    - <DayStepper max={string}> — Sets the maximum day timestamp ISO 8601 / RFC 3339 in the future that can be selected.
    - <DayStepper min={string}> — Sets the minimum day timestamp ISO 8601 / RFC 3339 in the past that can be selected.
    - <DayStepper step={number}> — Sets how many days are stepped through at each button click.
    - <DayStepper value={string}> — Sets the selected day timestamp ISO 8601 / RFC 3339.
    - <DayStepper palette="accent/dark/light/alert/affirmative/negative"> — Alters the rendered color palette.
    - <DayStepper sizing="tiny/small/medium/large/huge"> — Alters the sizing of the Widget and children Components.
  - MonthPicker — Built-in Widget for allowing the user to pick a quaterly month from a given year.
    - <MonthPicker on:change={CustomEvent<void>}> — Dispatches whenever <MonthPicker value> changes.
    - <MonthPicker multiple={boolean}> — Enables selection of multiple months.
    - <MonthPicker once={boolean}> — Disables toggling off of already selected months.
    - <MonthPicker readonly={boolean}> — Disables toggling on of unselected months.
    - <MonthPicker calendar={string}> — Allows for changing the calendar used for calculations / formatting via Temporal Calendar Codes.
    - <MonthPicker locale={string}> — Alters the locale used for displaying internationalized text via RFC 5646 / BCP 47 language tags.
    - <MonthPicker month="2-digit/long/narrow/numeric/short"> — Alters how a displayed month is formatted.
    - <MonthPicker disabled={boolean}> — Disables all months from being selected.
    - <MonthPicker disabled={string[]}> — Disables the given ISO 8601 / RFC 3339 timestamps from being selected.
    - <MonthPicker max={string}> — Sets the maximum month timestamp ISO 8601 / RFC 3339 in the future that can be selected.
    - <MonthPicker min={string}> — Sets the minimum month timestamp ISO 8601 / RFC 3339 in the past that can be selected.
    - <MonthPicker highlight={string}> — Highlights the given ISO 8601 / RFC 3339 timestamps.
    - <MonthPicker timestamp={string}> — Sets the ISO 8601 / RFC 3339 timestamp of the calendar being listed.
    - <MonthPicker value={string[]}> — Sets the selected month ISO 8601 / RFC 3339 timestamps.
    - <MonthPicker palette="accent/dark/light/alert/affirmative/negative"> — Alters the rendered color palette.
    - <MonthPicker sizing="tiny/small/medium/large/huge"> — Alters the sizing of the Widget and children Components.
  - MonthStepper — Built-in Widget for allowing the user to step through months.
    - <MonthStepper on:change={CustomEvent<void>}> — Dispatches whenever <MonthStepper value> changes.
    - <MonthStepper disabled={boolean}> — Disables months from being stepped through.
    - <MonthStepper readonly={boolean}> — Disables months from being stepped through without visual changes.
    - <MonthStepper calendar={string}> — Allows for changing the calendar used for calculations / formatting via Temporal Calendar Codes.
    - <MonthStepper locale={string}> — Alters the locale used for displaying internationalized text via RFC 5646 / BCP 47 language tags.
    - <MonthStepper month="2-digit/long/narrow/numeric/short"> — Alters how a displayed month is formatted.
    - <MonthStepper year="2-digit/numeric"> — Alters how a displayed year is formatted.
    - <MonthStepper max={string}> — Sets the maximum month timestamp ISO 8601 / RFC 3339 in the future that can be selected.
    - <MonthStepper min={string}> — Sets the minimum month timestamp ISO 8601 / RFC 3339 in the past that can be selected.
    - <MonthStepper step={number}> — Sets how many months are stepped through at each button click.
    - <MonthStepper value={string}> — Sets the selected month timestamp ISO 8601 / RFC 3339.
    - <MonthStepper palette="accent/dark/light/alert/affirmative/negative"> — Alters the rendered color palette.
    - <MonthStepper sizing="tiny/small/medium/large/huge"> — Alters the sizing of the Widget and children Components.
  - TimePicker — Built-in Widget for allowing the user to pick a time consisting of hour, minutes, and seconds.
    - <TimePicker on:change={CustomEvent<void>}> — Dispatches whenever <TimePicker value> changes.
    - <TimePicker on:now={CustomEvent<void>}> — Dispatches whenever the "NOW" button is clicked when enabled.
    - <TimePicker disabled={boolean}> — Disables any component of time from being selected.
    - <TimePicker now={boolean}> — Enables displaying of the "NOW" button, allowing users to set the Widget to current clock time.
    - <TimePicker scroll={boolean}> — Enables auto scrolling to current time on mounting.
    - <TimePicker readonly={boolean}> — Disables any component of time from being selected without UI alteration.
    - <TimePicker locale={string}> — Alters the locale used for displaying internationalized text via RFC 5646 / BCP 47 language tags.
    - <TimePicker hour="2-digit/numeric"> — Alters how a displayed hour is formatted.
    - <TimePicker hour_12={boolean}> — Alters to showing hours in 12-hour format, and enables displaying of the AM / PM buttons.
    - <TimePicker minute="2-digit/numeric"> — Alters how a displayed minute is formatted.
    - <TimePicker second="2-digit/numeric"> — Alters how a displayed second is formatted.
    - <TimePicker max={string}> — Sets the maximum timestamp ISO 8601 / RFC 3339 in the future that can be selected.
    - <TimePicker min={string}> — Sets the minimum timestamp ISO 8601 / RFC 3339 in the past that can be selected.
    - <TimePicker highlight={string}> — Sets the ISO 8601 / RFC 3339 timestamp of the current time.
    - <TimePicker value={string}> — Sets the selected timestamp ISO 8601 / RFC 3339.
    - <TimePicker palette="accent/dark/light/alert/affirmative/negative"> — Alters the rendered color palette.
    - <TimePicker sizing="tiny/small/medium/large/huge"> — Alters the sizing of the Widget and children Components.
  - YearPicker — Built-in Widget for allowing the user to pick a year from a given decade.
    - <YearPicker on:change={CustomEvent<void>}> — Dispatches whenever <YearPicker value> changes.
    - <YearPicker multiple={boolean}> — Enables selection of multiple years.
    - <YearPicker once={boolean}> — Disables toggling off of already selected years.
    - <YearPicker readonly={boolean}> — Disables toggling on of unselected years.
    - <YearPicker calendar={string}> — Allows for changing the calendar used for calculations / formatting via Temporal Calendar Codes.
    - <YearPicker locale={string}> — Alters the locale used for displaying internationalized text via RFC 5646 / BCP 47 language tags.
    - <YearPicker year="2-digit/numeric"> — Alters how a displayed year is formatted.
    - <YearPicker disabled={boolean}> — Disables all years from being selected.
    - <YearPicker disabled={string[]}> — Disables the given ISO 8601 / RFC 3339 timestamps from being selected.
    - <YearPicker max={string}> — Sets the maximum year timestamp ISO 8601 / RFC 3339 in the future that can be selected.
    - <YearPicker min={string}> — Sets the minimum year timestamp ISO 8601 / RFC 3339 in the past that can be selected.
    - <YearPicker highlight={string}> — Highlights the given ISO 8601 / RFC 3339 timestamps.
    - <YearPicker timestamp={string}> — Sets the ISO 8601 / RFC 3339 timestamp of the calendar being listed.
    - <YearPicker value={string[]}> — Sets the selected year ISO 8601 / RFC 3339 timestamps.
    - <YearPicker palette="accent/dark/light/alert/affirmative/negative"> — Alters the rendered color palette.
    - <YearPicker sizing="tiny/small/medium/large/huge"> — Alters the sizing of the Widget and children Components.
  - YearStepper — Built-in Widget for allowing the user to step through years.
    - <YearStepper on:change={CustomEvent<void>}> — Dispatches whenever <YearStepper value> changes.
    - <YearStepper disabled={boolean}> — Disables years from being stepped through.
    - <YearStepper readonly={boolean}> — Disables years from being stepped through without visual changes.
    - <YearStepper calendar={string}> — Allows for changing the calendar used for calculations / formatting via Temporal Calendar Codes.
    - <YearStepper locale={string}> — Alters the locale used for displaying internationalized text via RFC 5646 / BCP 47 language tags.
    - <YearStepper year="2-digit/numeric"> — Alters how a displayed year is formatted.
    - <YearStepper max={string}> — Sets the maximum year timestamp ISO 8601 / RFC 3339 in the future that can be selected.
    - <YearStepper min={string}> — Sets the minimum year timestamp ISO 8601 / RFC 3339 in the past that can be selected.
    - <YearStepper step={number}> — Sets how many years are stepped through at each button click.
    - <YearStepper value={string}> — Sets the selected year timestamp ISO 8601 / RFC 3339.
    - <YearStepper palette="accent/dark/light/alert/affirmative/negative"> — Alters the rendered color palette.
    - <YearStepper sizing="tiny/small/medium/large/huge"> — Alters the sizing of the Widget and children Components.