@mhmo91/schmancy 0.2.85 → 0.2.87

package/dist/date-range-D9SSEemd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"date-range-D9SSEemd.js","sources":["../src/date-range/date-utils.ts","../src/date-range/date-range.ts"],"sourcesContent":["import moment from 'moment'\n\ntype DateFormat = 'YYYY-MM-DD' | 'YYYY-MM-DDTHH:mm'\n\n/**\n * Ensures that a date string conforms to a specific format.\n * If the date is already in the correct format, it returns the original string.\n * If the date is in a different format, it attempts to convert it to the specified format.\n * If the date is invalid or cannot be converted, it returns null.\n *\n * @param dateString The date string to validate and format.\n * @param expectedFormat The expected date format (e.g., 'YYYY-MM-DD', 'YYYY-MM-DDTHH:mm').\n * @returns The formatted date string, or null if the date is invalid.\n */\nfunction enforceDateFormat(dateString: string | undefined, expectedFormat: DateFormat): string | null {\n\tif (!dateString) {\n\t\treturn null // Or handle the undefined case differently if needed\n\t}\n\n\tconst parsedDate = moment(dateString)\n\n\tif (!parsedDate.isValid()) {\n\t\treturn null // Date is invalid\n\t}\n\n\treturn parsedDate.format(expectedFormat)\n}\n\n/**\n * Validates if the initial date range values are in the expected format.\n *\n * @param dateFrom The dateFrom value to validate.\n * @param dateTo The dateTo value to validate.\n * @param expectedFormat The expected date format.\n * @returns An object indicating whether each date is valid, and the formatted date or null if invalid.\n */\nfunction validateInitialDateRange(\n\tdateFrom: string | undefined,\n\tdateTo: string | undefined,\n\texpectedFormat: DateFormat,\n): {\n\tdateFrom: string | null\n\tdateTo: string | null\n\tisValid: boolean\n} {\n\tconst formattedDateFrom = enforceDateFormat(dateFrom, expectedFormat)\n\tconst formattedDateTo = enforceDateFormat(dateTo, expectedFormat)\n\n\tconst isValid = formattedDateFrom !== null && formattedDateTo !== null\n\n\treturn {\n\t\tdateFrom: formattedDateFrom,\n\t\tdateTo: formattedDateTo,\n\t\tisValid,\n\t}\n}\n\nexport { validateInitialDateRange }\n","import { $LitElement } from '@mixins/index'\nimport { SchmancyInputChangeEvent } from '@schmancy/input'\nimport SchmancyMenu from '@schmancy/menu/menu'\nimport { html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport moment from 'moment'\nimport { validateInitialDateRange } from './date-utils' // Import the utility\n\ntype DateFormat = 'YYYY-MM-DD' | 'YYYY-MM-DDTHH:mm'\n\n/**\n * A date range selector that supports presets and manual date input.\n */\n@customElement('schmancy-date-range')\nexport default class SchmancyDateRange extends $LitElement() {\n\t// Either \"date\" or \"datetime-local\"\n\t@property({ type: String }) type: 'date' | 'datetime-local' = 'date'\n\n\t@property({ type: Object }) dateFrom!: { label: string; value: string }\n\t@property({ type: Object }) dateTo!: { label: string; value: string }\n\n\t// Optional min/max constraints\n\t@property({ type: String }) minDate?: string\n\t@property({ type: String }) maxDate?: string\n\n\t@query('#checkin') checkInInput!: HTMLInputElement\n\t@query('#checkout') checkOutInput!: HTMLInputElement\n\n\t// The <schmancy-menu> that displays presets + manual date inputs\n\t@query('schmancy-menu') schmancyMenu!: SchmancyMenu\n\n\t// Display text in the trigger button\n\t@state() selectedDateRange: string = 'Today'\n\n\t// Preset date range definitions\n\tpresetRanges!: Array<{\n\t\tlabel: string\n\t\trange: { dateFrom: string; dateTo: string }\n\t\tstep: moment.unitOfTime.DurationConstructor\n\t}>\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tthis.initPresetRanges()\n\n\t\t// Validate and format initial date range\n\t\tconst dateFormat = this.getDateFormat() as DateFormat\n\t\tconst validatedRange = validateInitialDateRange(this.dateFrom.value, this.dateTo.value, dateFormat)\n\n\t\tif (validatedRange.isValid) {\n\t\t\tthis.dateFrom.value = validatedRange.dateFrom!\n\t\t\tthis.dateTo.value = validatedRange.dateTo!\n\t\t\tthis.updateSelectedDateRange()\n\t\t} else {\n\t\t\tconsole.error('Invalid initial date range.  Falling back to default.')\n\t\t\t// Handle invalid initial dates (e.g., set to default values, display an error)\n\t\t\tconst now = moment().format(dateFormat)\n\t\t\tthis.dateFrom.value = now\n\t\t\tthis.dateTo.value = now\n\t\t}\n\t}\n\t/**\n\t * Update the internal date range and fire a 'change' event to notify external code.\n\t */\n\tprivate setDateRange(fromDate: string, toDate: string) {\n\t\tthis.dateFrom.value = fromDate\n\t\tthis.dateTo.value = toDate\n\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent<TSchmancDateRangePayload>('change', {\n\t\t\t\tdetail: { dateFrom: fromDate, dateTo: toDate },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true, // If you want it to pass shadow boundaries\n\t\t\t}),\n\t\t)\n\t\tthis.requestUpdate()\n\t}\n\tupdated(changedProps: Map<string, unknown>) {\n\t\tif (changedProps.has('type')) {\n\t\t\t// Re-init presets if \"type\" changes from date -> datetime\n\t\t\tthis.initPresetRanges()\n\t\t\tthis.updateSelectedDateRange()\n\t\t}\n\t}\n\n\t/**\n\t * Format strings for the internal <input> and for display text.\n\t */\n\tprivate getDateFormat(): string {\n\t\treturn this.type === 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DDTHH:mm'\n\t}\n\tprivate getDisplayFormat(): string {\n\t\treturn this.type === 'date' ? 'MMM DD, YYYY' : 'MMM DD, YYYY hh:mm A'\n\t}\n\n\t/**\n\t * Build up a list of preset ranges (yesterday, today, etc.).\n\t */\n\tprivate initPresetRanges() {\n\t\tconst format = this.getDateFormat()\n\t\tthis.presetRanges = [\n\t\t\t{\n\t\t\t\tlabel: 'Yesterday',\n\t\t\t\trange: {\n\t\t\t\t\tdateFrom: moment().subtract(1, 'days').startOf('day').format(format),\n\t\t\t\t\tdateTo: moment().subtract(1, 'days').endOf('day').format(format),\n\t\t\t\t},\n\t\t\t\tstep: 'day',\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Today',\n\t\t\t\trange: {\n\t\t\t\t\tdateFrom: moment().startOf('day').format(format),\n\t\t\t\t\tdateTo: moment().endOf('day').format(format),\n\t\t\t\t},\n\t\t\t\tstep: 'day',\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Tomorrow',\n\t\t\t\trange: {\n\t\t\t\t\tdateFrom: moment().add(1, 'days').startOf('day').format(format),\n\t\t\t\t\tdateTo: moment().add(1, 'days').endOf('day').format(format),\n\t\t\t\t},\n\t\t\t\tstep: 'day',\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'This Week',\n\t\t\t\trange: {\n\t\t\t\t\tdateFrom: moment().startOf('isoWeek').format(format),\n\t\t\t\t\tdateTo: moment().endOf('isoWeek').format(format),\n\t\t\t\t},\n\t\t\t\tstep: 'week',\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Last Week',\n\t\t\t\trange: {\n\t\t\t\t\tdateFrom: moment().subtract(1, 'weeks').startOf('isoWeek').format(format),\n\t\t\t\t\tdateTo: moment().subtract(1, 'weeks').endOf('isoWeek').format(format),\n\t\t\t\t},\n\t\t\t\tstep: 'week',\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'This Month',\n\t\t\t\trange: {\n\t\t\t\t\tdateFrom: moment().startOf('month').format(format),\n\t\t\t\t\tdateTo: moment().endOf('month').format(format),\n\t\t\t\t},\n\t\t\t\tstep: 'month',\n\t\t\t},\n\t\t\t// Add more if desired (e.g. \"Last Month,\" \"Custom,\" etc.)\n\t\t]\n\t}\n\n\t/**\n\t * Based on the current dateFrom/dateTo, see if it matches a preset.\n\t * Otherwise display a \"Custom\" range: \"Jan 01, 2023 - Jan 07, 2023\".\n\t */\n\tprivate updateSelectedDateRange() {\n\t\tconst preset = this.presetRanges.find(\n\t\t\tp => p.range.dateFrom === this.dateFrom.value && p.range.dateTo === this.dateTo.value,\n\t\t)\n\t\tif (preset) {\n\t\t\tthis.selectedDateRange = preset.label\n\t\t} else {\n\t\t\t// Construct a custom label\n\t\t\tconst fromMoment = moment(this.dateFrom.value)\n\t\t\tconst toMoment = moment(this.dateTo.value)\n\t\t\tconsole.log(fromMoment.format('HH:mm'), toMoment.format('HH:mm'), fromMoment.format('HH:mm'))\n\t\t\tif (fromMoment.isSame(toMoment, 'day')) {\n\t\t\t\tthis.selectedDateRange = fromMoment.format('MMM DD, YYYY')\n\t\t\t\t// append the time if fromMoment is not the start of the day and  toMoment is not the end of the day\n\t\t\t\tif (fromMoment.format('HH:mm') !== '00:00' || toMoment.format('HH:mm') !== '23:59') {\n\t\t\t\t\tthis.selectedDateRange += ` ${fromMoment.format('HH:mm')}:${toMoment.format('HH:mm')}`\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tconst fromStr = fromMoment.format(this.getDisplayFormat())\n\t\t\t\tconst toStr = toMoment.format(this.getDisplayFormat())\n\t\t\t\tthis.selectedDateRange = `${fromStr} - ${toStr}`\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Called when user selects a preset from the list.\n\t * Updates date range and closes the menu.\n\t */\n\tprivate handlePresetChange(label: string) {\n\t\tconst preset = this.presetRanges.find(range => range.label === label)\n\t\tif (!preset) return\n\t\tconst { dateFrom, dateTo } = preset.range\n\t\tthis.setDateRange(dateFrom, dateTo)\n\t\tthis.selectedDateRange = label\n\t\tthis.schmancyMenu.open = false\n\t}\n\n\t/**\n\t * Applies the date range from the inputs.\n\t * Closes the menu when done.\n\t */\n\tprivate handleDateRangeChange() {\n\t\tthis.setDateRange(this.dateFrom.value, this.dateTo.value)\n\t\tthis.updateSelectedDateRange()\n\t\tthis.schmancyMenu.open = false\n\t}\n\n\t/**\n\t * Shift the current date range forward or backward by the same number of days.\n\t * If the range is 7 days wide, shift 7 days, etc.\n\t */\n\tprivate shiftDateRange(factor: number) {\n\t\tconst format = this.getDateFormat()\n\t\tconst currentDiff = moment(this.dateTo.value).diff(moment(this.dateFrom.value), 'days') || 1\n\t\tconst newDateFrom = moment(this.dateFrom.value)\n\t\t\t.add(factor * currentDiff, 'days')\n\t\t\t.format(format)\n\t\tconst newDateTo = moment(this.dateTo.value)\n\t\t\t.add(factor * currentDiff, 'days')\n\t\t\t.format(format)\n\n\t\tthis.setDateRange(newDateFrom, newDateTo)\n\t\tthis.updateSelectedDateRange()\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<!-- schmancy-menu typically provides a slot=\"button\" for the trigger,\n             and then projects the menu items inside. -->\n\t\t\t<schmancy-menu class=\"z-100 w-max\" role=\"menu\" aria-label=\"Date range presets and custom input\">\n\t\t\t\t<!-- The toggle/trigger slot -->\n\t\t\t\t<schmancy-grid slot=\"button\" align=\"center\" cols=\"auto 1fr auto\">\n\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\taria-label=\"Shift date range backward\"\n\t\t\t\t\t\t@click=${(e: Event) => {\n\t\t\t\t\t\t\te.preventDefault()\n\t\t\t\t\t\t\tthis.shiftDateRange(-1)\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\tarrow_left\n\t\t\t\t\t</schmancy-icon-button>\n\n\t\t\t\t\t<schmancy-button\n\t\t\t\t\t\tclass=\"w-max\"\n\t\t\t\t\t\tvariant=\"outlined\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\taria-haspopup=\"menu\"\n\t\t\t\t\t\t.ariaExpanded=${String(this.schmancyMenu?.open || false)}\n\t\t\t\t\t>\n\t\t\t\t\t\t${this.selectedDateRange || 'Date range'}\n\t\t\t\t\t</schmancy-button>\n\n\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\taria-label=\"Shift date range forward\"\n\t\t\t\t\t\t@click=${(e: Event) => {\n\t\t\t\t\t\t\te.preventDefault()\n\t\t\t\t\t\t\tthis.shiftDateRange(1)\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\tarrow_right\n\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t</schmancy-grid>\n\n\t\t\t\t<!-- The menu surface: presets + manual date selection -->\n\t\t\t\t${this.presetRanges.map(\n\t\t\t\t\tpreset => html`\n\t\t\t\t\t\t<schmancy-menu-item role=\"menuitem\" class=\"w-full\" @click=${() => this.handlePresetChange(preset.label)}>\n\t\t\t\t\t\t\t<schmancy-grid class=\"w-full\" align=\"center\" cols=\"auto 1fr auto\"> ${preset.label} </schmancy-grid>\n\t\t\t\t\t\t</schmancy-menu-item>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\n\t\t\t\t<!-- Manual date range inputs + \"Apply\" button -->\n\t\t\t\t<schmancy-grid gap=\"sm\" flow=\"row\" class=\"p-4\">\n\t\t\t\t\t<schmancy-input\n\t\t\t\t\t\tid=\"checkin\"\n\t\t\t\t\t\t.type=${this.type}\n\t\t\t\t\t\t.label=${this.dateFrom.label}\n\t\t\t\t\t\t.value=${this.dateFrom.value}\n\t\t\t\t\t\tmin=${ifDefined(this.minDate)}\n\t\t\t\t\t\t@change=${(event: SchmancyInputChangeEvent) => {\n\t\t\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t\tconst fmt = this.getDateFormat()\n\t\t\t\t\t\t\tconst selectedDate = moment(event.detail.value, fmt).format(fmt)\n\t\t\t\t\t\t\tthis.dateFrom.value = selectedDate\n\t\t\t\t\t\t\t// Update the checkout input's min attribute:\n\t\t\t\t\t\t\tthis.checkOutInput.setAttribute('min', selectedDate)\n\t\t\t\t\t\t}}\n\t\t\t\t\t></schmancy-input>\n\n\t\t\t\t\t<schmancy-input\n\t\t\t\t\t\tid=\"checkout\"\n\t\t\t\t\t\t.type=${this.type}\n\t\t\t\t\t\t.label=${this.dateTo.label}\n\t\t\t\t\t\t.value=${this.dateTo.value}\n\t\t\t\t\t\tmin=${ifDefined(this.dateFrom.value)}\n\t\t\t\t\t\tmax=${ifDefined(this.maxDate)}\n\t\t\t\t\t\t@change=${(event: SchmancyInputChangeEvent) => {\n\t\t\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t\tconst fmt = this.getDateFormat()\n\t\t\t\t\t\t\tconst selectedDate = moment(event.detail.value, fmt).format(fmt)\n\t\t\t\t\t\t\tthis.dateTo.value = selectedDate\n\t\t\t\t\t\t}}\n\t\t\t\t\t></schmancy-input>\n\n\t\t\t\t\t<schmancy-button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"outlined\"\n\t\t\t\t\t\t@click=${(e: Event) => {\n\t\t\t\t\t\t\te.preventDefault()\n\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\tthis.handleDateRangeChange()\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\tApply\n\t\t\t\t\t</schmancy-button>\n\t\t\t\t</schmancy-grid>\n\t\t\t</schmancy-menu>\n\t\t`\n\t}\n}\n\n/**\n * The payload for a date range change event.\n */\nexport type TSchmancDateRangePayload = {\n\tdateFrom?: string\n\tdateTo?: string\n}\n\n/**\n * A custom event fired when the date range is updated.\n */\nexport type SchmancyDateRangeChangeEvent = CustomEvent<TSchmancDateRangePayload>\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-date-range': SchmancyDateRange\n\t}\n}\n"],"names":["enforceDateFormat","dateString","expectedFormat","parsedDate","moment","isValid","format","SchmancyDateRange","$LitElement","super","arguments","this","type","selectedDateRange","connectedCallback","initPresetRanges","dateFormat","getDateFormat","validatedRange","dateFrom","dateTo","formattedDateFrom","formattedDateTo","value","updateSelectedDateRange","now","fromDate","toDate","dispatchEvent","CustomEvent","detail","bubbles","composed","requestUpdate","changedProps","has","getDisplayFormat","presetRanges","label","range","subtract","startOf","endOf","step","add","preset","find","p","fromMoment","toMoment","isSame","fromStr","toStr","setDateRange","schmancyMenu","open","handleDateRangeChange","factor","currentDiff","diff","newDateFrom","newDateTo","render","html","e","preventDefault","shiftDateRange","String","map","handlePresetChange","ifDefined","minDate","event","stopPropagation","fmt","selectedDate","checkOutInput","setAttribute","maxDate","__decorateClass","property","prototype","Object","query","state","customElement"],"mappings":"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"}

package/dist/list-C9s_UTGh.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"list-C9s_UTGh.js","sources":["../src/list/list-item.ts","../src/list/context.ts","../src/list/list.ts"],"sourcesContent":["import { consume } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { SchmancySurfaceTypeContext } from '@schmancy/surface/context'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nimport { html } from 'lit'\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\n\n/**\n * @element schmancy-list-item\n * @slot leading - leading content\n * @slot trailing - trailing content\n * @slot - default content\n */\n@customElement('schmancy-list-item')\nexport class SchmancyListItem extends TailwindElement() {\n\t@consume({ context: SchmancySurfaceTypeContext, subscribe: true })\n\t@property()\n\tvariant: TSurfaceColor\n\n\t@property({ type: Boolean })\n\trounded: boolean\n\n\t@property({ type: Boolean }) readonly: boolean\n\n\t@property({ type: Boolean }) selected: boolean = false\n\n\t@queryAssignedElements({\n\t\tslot: 'leading',\n\t\tflatten: true,\n\t})\n\tprivate leading!: HTMLElement[]\n\n\t@queryAssignedElements({\n\t\tslot: 'trailing',\n\t\tflatten: true,\n\t})\n\tprivate trailing!: HTMLElement[]\n\n\tprotected get imgClasses(): string[] {\n\t\treturn ['h-[24px]', 'w-[24px]', 'object-contain']\n\t}\n\n\tfirstUpdated() {\n\t\tthis.leading?.forEach(img => {\n\t\t\timg.classList.add(...this.imgClasses)\n\t\t})\n\t\tthis.trailing?.forEach(img => {\n\t\t\timg.classList.add(...this.imgClasses)\n\t\t})\n\t}\n\n\trender() {\n\t\tconst classes = {\n\t\t\t'rounded-none': this.rounded === false,\n\t\t\t'rounded-full': this.rounded,\n\t\t\t'relative inset-0 w-full flex items-center  min-h-[56px] py-[8px] px-[16px] duration-500 transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:z-1 outline-secondary-default outline-hidden':\n\t\t\t\ttrue,\n\t\t\t'bg-secondary-container text-secondery-onContainer': this.selected,\n\t\t}\n\n\t\tconst stateLayerClasses = {\n\t\t\t'z-0 duration-500 transition-opacity': true,\n\t\t\t'rounded-none': this.rounded === false,\n\t\t\t'rounded-full': this.rounded,\n\t\t\t'hover:bg-surface-on opacity-[0.08] cursor-pointer absolute inset-0 ': !this.readonly,\n\t\t}\n\t\treturn html` <li .tabIndex=${this.readonly ? -1 : 0} class=${this.classMap(classes)}>\n\t\t\t${when(!this.readonly, () => html` <div class=\"${this.classMap(stateLayerClasses)}\"></div>`)}\n\t\t\t<slot></slot>\n\t\t</li>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-list-item': SchmancyListItem\n\t}\n}\n","import { createContext } from '@lit/context'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nexport const SchmancyListTypeContext = createContext<TSurfaceColor>(undefined)\n","import { provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { SchmancySurfaceFill } from '@schmancy/surface'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { SchmancyListTypeContext } from './context'\n\n/**\n * `<schmancy-list>` component.\n *\n * A list component that wraps its content within a customizable surface.\n * It allows you to set the surface type and fill style, and can optionally\n * enable scrolling behavior using the `scroller` property.\n *\n * @element schmancy-list\n * @slot - The default slot for list items.\n *\n * @example\n * <schmancy-list surface=\"container\" scroller>\n *   <schmancy-list-item>List Item 1</schmancy-list-item>\n * </schmancy-list>\n */\n@customElement('schmancy-list')\nexport class List extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tpadding-top: 8px;\n\t\tpadding-bottom: 8px;\n\t}\n\n\t/* When the ul element has the \"scroller\" class, apply scrolling behavior */\n\tul.scroller {\n\t\tposition: relative;\n\t\tcontain: size layout;\n\t\toverflow: auto;\n\t\tscroll-behavior: smooth;\n\t}\n`) {\n\t/**\n\t * Defines the type or color of the surface used by the component.\n\t * This value is provided to descendant components via context.\n\t *\n\t * @attr surface\n\t * @type {TSurfaceColor}\n\t * @default 'surface'\n\t */\n\t@provide({ context: SchmancyListTypeContext })\n\t@property()\n\tsurface: TSurfaceColor\n\n\t/**\n\t * Determines the fill style of the underlying surface.\n\t *\n\t * @attr fill\n\t * @type {SchmancySurfaceFill}\n\t * @default 'auto'\n\t */\n\t@property({ type: String, reflect: true })\n\tfill: SchmancySurfaceFill = 'auto'\n\n\t/**\n\t * When set to true, the component renders its list content with scrollable behavior.\n\t * This is achieved by conditionally adding the 'scroller' CSS class to the <ul> element.\n\t *\n\t * @attr scroller\n\t * @type {boolean}\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tscroller: boolean = false\n\n\t/**\n\t * Defines the elevation level of the surface.\n\t *\n\t * @attr elevation\n\t * @type {number}\n\t * @default 0\n\t */\n\t@property({ type: Number })\n\televation: 0 | 1 | 2 | 3 | 4 | 5 = 0\n\n\t/**\n\t * Renders the component's template.\n\t * The list content is wrapped inside a `<schmancy-surface>` element for consistent styling.\n\t * The <ul> element conditionally receives the \"scroller\" class based on the `scroller` property.\n\t *\n\t * @returns The HTML template for the component.\n\t */\n\trender() {\n\t\treturn html`\n\t\t\t<schmancy-surface .elevation=${this.elevation} .fill=${this.fill} type=${this.surface}>\n\t\t\t\t<ul class=${classMap({ scroller: this.scroller })}>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</ul>\n\t\t\t</schmancy-surface>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-list': List\n\t}\n}\n"],"names":["SchmancyListItem","TailwindElement","constructor","super","arguments","this","selected","imgClasses","leading","forEach","img","classList","add","trailing","classes","rounded","stateLayerClasses","readonly","html","classMap","when","__decorateClass","consume","context","SchmancySurfaceTypeContext","subscribe","property","prototype","type","Boolean","queryAssignedElements","slot","flatten","customElement","SchmancyListTypeContext","createContext","List","css","fill","scroller","elevation","render","surface","provide","String","reflect","Number"],"mappings":"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"}

package/dist/list-pIDcGS1c.cjs

@@ -1,25 +0,0 @@
-"use strict";const y=require("./consume-Bb7_UzYd.cjs");require("rxjs");const h=require("lit/directives/class-map.js");require("lit/directives/style-map.js");const u=require("./tailwind.mixin-CJgIYh7g.cjs"),m=require("./context-CHWQnKZ-.cjs"),p=require("lit"),s=require("lit/decorators.js"),f=require("lit/directives/when.js"),d=require("./provide-DSU87U5x.cjs");var g=Object.defineProperty,v=Object.getOwnPropertyDescriptor,c=(i,t,r,o)=>{for(var n,e=o>1?void 0:o?v(t,r):t,l=i.length-1;l>=0;l--)(n=i[l])&&(e=(o?n(t,r,e):n(e))||e);return o&&e&&g(t,r,e),e};exports.SchmancyListItem=class extends u.TailwindElement(){constructor(){super(...arguments),this.selected=!1}get imgClasses(){return["h-[24px]","w-[24px]","object-contain"]}firstUpdated(){var i,t;(i=this.leading)==null||i.forEach(r=>{r.classList.add(...this.imgClasses)}),(t=this.trailing)==null||t.forEach(r=>{r.classList.add(...this.imgClasses)})}render(){const i={"rounded-none":this.rounded===!1,"rounded-full":this.rounded,"relative inset-0 w-full flex items-center  min-h-[56px] py-[8px] px-[16px] duration-500 transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:z-1 outline-secondary-default outline-hidden":!0,"bg-secondary-container text-secondery-onContainer":this.selected},t={"z-0 duration-500 transition-opacity":!0,"rounded-none":this.rounded===!1,"rounded-full":this.rounded,"hover:bg-surface-on opacity-[0.08] cursor-pointer absolute inset-0 ":!this.readonly};return p.html` <li .tabIndex=${this.readonly?-1:0} class=${this.classMap(i)}>
-			${f.when(!this.readonly,()=>p.html` <div class="${this.classMap(t)}"></div>`)}
-			<slot></slot>
-		</li>`}},c([y.c({context:m.SchmancySurfaceTypeContext,subscribe:!0}),s.property()],exports.SchmancyListItem.prototype,"variant",2),c([s.property({type:Boolean})],exports.SchmancyListItem.prototype,"rounded",2),c([s.property({type:Boolean})],exports.SchmancyListItem.prototype,"readonly",2),c([s.property({type:Boolean})],exports.SchmancyListItem.prototype,"selected",2),c([s.queryAssignedElements({slot:"leading",flatten:!0})],exports.SchmancyListItem.prototype,"leading",2),c([s.queryAssignedElements({slot:"trailing",flatten:!0})],exports.SchmancyListItem.prototype,"trailing",2),exports.SchmancyListItem=c([s.customElement("schmancy-list-item")],exports.SchmancyListItem);const b=d.n(void 0);var L=Object.defineProperty,x=Object.getOwnPropertyDescriptor,a=(i,t,r,o)=>{for(var n,e=o>1?void 0:o?x(t,r):t,l=i.length-1;l>=0;l--)(n=i[l])&&(e=(o?n(t,r,e):n(e))||e);return o&&e&&L(t,r,e),e};exports.List=class extends u.TailwindElement(p.css`
-	:host {
-		display: block;
-		padding-top: 8px;
-		padding-bottom: 8px;
-	}
-
-	/* When the ul element has the "scroller" class, apply scrolling behavior */
-	ul.scroller {
-		position: relative;
-		contain: size layout;
-		overflow: auto;
-		scroll-behavior: smooth;
-	}
-`){constructor(){super(...arguments),this.fill="auto",this.scroller=!1,this.elevation=0}render(){return p.html`
-			<schmancy-surface .elevation=${this.elevation} .fill=${this.fill} type=${this.surface}>
-				<ul class=${h.classMap({scroller:this.scroller})}>
-					<slot></slot>
-				</ul>
-			</schmancy-surface>
-		`}},a([d.e({context:b}),s.property()],exports.List.prototype,"surface",2),a([s.property({type:String,reflect:!0})],exports.List.prototype,"fill",2),a([s.property({type:Boolean,reflect:!0})],exports.List.prototype,"scroller",2),a([s.property({type:Number})],exports.List.prototype,"elevation",2),exports.List=a([s.customElement("schmancy-list")],exports.List);
-//# sourceMappingURL=list-pIDcGS1c.cjs.map

package/dist/list-pIDcGS1c.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"list-pIDcGS1c.cjs","sources":["../src/list/list-item.ts","../src/list/context.ts","../src/list/list.ts"],"sourcesContent":["import { consume } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { SchmancySurfaceTypeContext } from '@schmancy/surface/context'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nimport { html } from 'lit'\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\n\n/**\n * @element schmancy-list-item\n * @slot leading - leading content\n * @slot trailing - trailing content\n * @slot - default content\n */\n@customElement('schmancy-list-item')\nexport class SchmancyListItem extends TailwindElement() {\n\t@consume({ context: SchmancySurfaceTypeContext, subscribe: true })\n\t@property()\n\tvariant: TSurfaceColor\n\n\t@property({ type: Boolean })\n\trounded: boolean\n\n\t@property({ type: Boolean }) readonly: boolean\n\n\t@property({ type: Boolean }) selected: boolean = false\n\n\t@queryAssignedElements({\n\t\tslot: 'leading',\n\t\tflatten: true,\n\t})\n\tprivate leading!: HTMLElement[]\n\n\t@queryAssignedElements({\n\t\tslot: 'trailing',\n\t\tflatten: true,\n\t})\n\tprivate trailing!: HTMLElement[]\n\n\tprotected get imgClasses(): string[] {\n\t\treturn ['h-[24px]', 'w-[24px]', 'object-contain']\n\t}\n\n\tfirstUpdated() {\n\t\tthis.leading?.forEach(img => {\n\t\t\timg.classList.add(...this.imgClasses)\n\t\t})\n\t\tthis.trailing?.forEach(img => {\n\t\t\timg.classList.add(...this.imgClasses)\n\t\t})\n\t}\n\n\trender() {\n\t\tconst classes = {\n\t\t\t'rounded-none': this.rounded === false,\n\t\t\t'rounded-full': this.rounded,\n\t\t\t'relative inset-0 w-full flex items-center  min-h-[56px] py-[8px] px-[16px] duration-500 transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:z-1 outline-secondary-default outline-hidden':\n\t\t\t\ttrue,\n\t\t\t'bg-secondary-container text-secondery-onContainer': this.selected,\n\t\t}\n\n\t\tconst stateLayerClasses = {\n\t\t\t'z-0 duration-500 transition-opacity': true,\n\t\t\t'rounded-none': this.rounded === false,\n\t\t\t'rounded-full': this.rounded,\n\t\t\t'hover:bg-surface-on opacity-[0.08] cursor-pointer absolute inset-0 ': !this.readonly,\n\t\t}\n\t\treturn html` <li .tabIndex=${this.readonly ? -1 : 0} class=${this.classMap(classes)}>\n\t\t\t${when(!this.readonly, () => html` <div class=\"${this.classMap(stateLayerClasses)}\"></div>`)}\n\t\t\t<slot></slot>\n\t\t</li>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-list-item': SchmancyListItem\n\t}\n}\n","import { createContext } from '@lit/context'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nexport const SchmancyListTypeContext = createContext<TSurfaceColor>(undefined)\n","import { provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/index'\nimport { SchmancySurfaceFill } from '@schmancy/surface'\nimport { TSurfaceColor } from '@schmancy/types/surface'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { SchmancyListTypeContext } from './context'\n\n/**\n * `<schmancy-list>` component.\n *\n * A list component that wraps its content within a customizable surface.\n * It allows you to set the surface type and fill style, and can optionally\n * enable scrolling behavior using the `scroller` property.\n *\n * @element schmancy-list\n * @slot - The default slot for list items.\n *\n * @example\n * <schmancy-list surface=\"container\" scroller>\n *   <schmancy-list-item>List Item 1</schmancy-list-item>\n * </schmancy-list>\n */\n@customElement('schmancy-list')\nexport class List extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tpadding-top: 8px;\n\t\tpadding-bottom: 8px;\n\t}\n\n\t/* When the ul element has the \"scroller\" class, apply scrolling behavior */\n\tul.scroller {\n\t\tposition: relative;\n\t\tcontain: size layout;\n\t\toverflow: auto;\n\t\tscroll-behavior: smooth;\n\t}\n`) {\n\t/**\n\t * Defines the type or color of the surface used by the component.\n\t * This value is provided to descendant components via context.\n\t *\n\t * @attr surface\n\t * @type {TSurfaceColor}\n\t * @default 'surface'\n\t */\n\t@provide({ context: SchmancyListTypeContext })\n\t@property()\n\tsurface: TSurfaceColor\n\n\t/**\n\t * Determines the fill style of the underlying surface.\n\t *\n\t * @attr fill\n\t * @type {SchmancySurfaceFill}\n\t * @default 'auto'\n\t */\n\t@property({ type: String, reflect: true })\n\tfill: SchmancySurfaceFill = 'auto'\n\n\t/**\n\t * When set to true, the component renders its list content with scrollable behavior.\n\t * This is achieved by conditionally adding the 'scroller' CSS class to the <ul> element.\n\t *\n\t * @attr scroller\n\t * @type {boolean}\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tscroller: boolean = false\n\n\t/**\n\t * Defines the elevation level of the surface.\n\t *\n\t * @attr elevation\n\t * @type {number}\n\t * @default 0\n\t */\n\t@property({ type: Number })\n\televation: 0 | 1 | 2 | 3 | 4 | 5 = 0\n\n\t/**\n\t * Renders the component's template.\n\t * The list content is wrapped inside a `<schmancy-surface>` element for consistent styling.\n\t * The <ul> element conditionally receives the \"scroller\" class based on the `scroller` property.\n\t *\n\t * @returns The HTML template for the component.\n\t */\n\trender() {\n\t\treturn html`\n\t\t\t<schmancy-surface .elevation=${this.elevation} .fill=${this.fill} type=${this.surface}>\n\t\t\t\t<ul class=${classMap({ scroller: this.scroller })}>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</ul>\n\t\t\t</schmancy-surface>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-list': List\n\t}\n}\n"],"names":["SchmancyListItem","TailwindElement","constructor","super","arguments","this","selected","imgClasses","firstUpdated","leading","forEach","img","classList","add","trailing","classes","rounded","stateLayerClasses","readonly","html","classMap","when","__decorateClass","consume","context","SchmancySurfaceTypeContext","subscribe","property","prototype","type","Boolean","queryAssignedElements","slot","flatten","customElement","SchmancyListTypeContext","createContext","List","css","fill","scroller","elevation","surface","provide","String","reflect","Number"],"mappings":"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"}

package/dist/surface-BbkSDH8N.cjs

@@ -1,20 +0,0 @@
-"use strict";const l=require("./provide-DSU87U5x.cjs"),u=require("./tailwind.mixin-CJgIYh7g.cjs"),a=require("lit"),t=require("lit/decorators.js"),p=require("lit/directives/class-map.js"),d=require("./context-CHWQnKZ-.cjs");var f=Object.defineProperty,y=Object.getOwnPropertyDescriptor,r=(i,s,n,o)=>{for(var c,e=o>1?void 0:o?y(s,n):s,h=i.length-1;h>=0;h--)(c=i[h])&&(e=(o?c(s,n,e):c(e))||e);return o&&e&&f(s,n,e),e};exports.SchmancySurface=class extends u.TailwindElement(a.css`
-	:host([fill='all']) {
-		height: 100%;
-		width: 100%;
-	}
-	:host([fill='width']) {
-		width: 100%;
-	}
-	:host([fill='height']) {
-		height: 100%;
-	}
-	:host {
-		display: block;
-	}
-`){constructor(){super(...arguments),this.fill="auto",this.rounded="none",this.type="surface",this.elevation=0}render(){const i={relative:!0,"inset-0":!0,block:!0,"box-border":!0,"rounded-none":this.rounded==="none","rounded-t-[8px]":this.rounded==="top","rounded-l-[8px]":this.rounded==="left","rounded-r-[8px]":this.rounded==="right","rounded-b-[8px]":this.rounded==="bottom","rounded-[8px]":this.rounded==="all","w-full":this.fill==="width"||this.fill==="all","h-full":this.fill==="height"||this.fill==="all","shadow-xs":this.elevation===1,"shadow-sm":this.elevation===2,"shadow-md":this.elevation===3,"shadow-lg":this.elevation===4,"shadow-xl":this.elevation===5,"text-surface-on":this.type==="surface"||this.type==="surfaceDim"||this.type==="surfaceBright"||this.type==="containerLowest"||this.type==="containerLow"||this.type==="container"||this.type==="containerHigh"||this.type==="containerHighest","bg-surface-default":this.type==="surface","bg-surface-dim":this.type==="surfaceDim","bg-surface-bright":this.type==="surfaceBright","bg-surface-lowest":this.type==="containerLowest","bg-surface-low":this.type==="containerLow","bg-surface-container":this.type==="container","bg-surface-high":this.type==="containerHigh","bg-surface-highest":this.type==="containerHighest"};return a.html`
-			<section class=${p.classMap(i)}>
-				<slot></slot>
-			</section>
-		`}},r([t.property({type:String,reflect:!0})],exports.SchmancySurface.prototype,"fill",2),r([t.property()],exports.SchmancySurface.prototype,"rounded",2),r([l.e({context:d.SchmancySurfaceTypeContext}),t.property()],exports.SchmancySurface.prototype,"type",2),r([t.property({type:Number,reflect:!0})],exports.SchmancySurface.prototype,"elevation",2),exports.SchmancySurface=r([t.customElement("schmancy-surface")],exports.SchmancySurface);
-//# sourceMappingURL=surface-BbkSDH8N.cjs.map

package/dist/surface-BbkSDH8N.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"surface-BbkSDH8N.cjs","sources":["../src/surface/surface.ts"],"sourcesContent":["import { provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/tailwind.mixin'\nimport { TSurfaceColor } from '@schmancy/types'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js' // Utility for conditionally applying CSS classes\nimport { SchmancySurfaceTypeContext } from './context'\n\n/**\n * Defines the fill options for the surface component.\n */\nexport type SchmancySurfaceFill = 'all' | 'width' | 'height' | 'auto'\n\n/**\n * `<schmancy-surface>` component.\n *\n * This component renders a styled surface element that adapts its dimensions based on the\n * provided fill mode. It supports various rounding options, elevation levels, and applies\n * background and text color classes based on the specified surface variant.\n *\n * **Note:** The property for defining the surface variant is named `surface` and is not\n * changed to `type` to maintain API consistency.\n *\n * @element schmancy-surface\n * @slot - Default slot for projecting child elements.\n *\n * @example\n * <schmancy-surface fill=\"all\" rounded=\"all\" elevation=\"3\" surface=\"surfaceBright\">\n *   <p>Your content here</p>\n * </schmancy-surface>\n */\n@customElement('schmancy-surface')\nexport class SchmancySurface extends TailwindElement(css`\n\t:host([fill='all']) {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t:host([fill='width']) {\n\t\twidth: 100%;\n\t}\n\t:host([fill='height']) {\n\t\theight: 100%;\n\t}\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\t/**\n\t * Determines how the component should fill the available space.\n\t *\n\t * - `all`: Fills both width and height.\n\t * - `width`: Fills only the width.\n\t * - `height`: Fills only the height.\n\t * - `auto`: No automatic filling.\n\t *\n\t * @attr fill\n\t * @default 'auto'\n\t */\n\t@property({ type: String, reflect: true }) fill: SchmancySurfaceFill = 'auto'\n\n\t/**\n\t * Specifies the rounding style of the component's corners.\n\t *\n\t * Options:\n\t * - `none`: No rounding.\n\t * - `top`, `left`, `right`, `bottom`: Rounds only one edge.\n\t * - `all`: Rounds all corners.\n\t *\n\t * @attr rounded\n\t * @default 'none'\n\t */\n\t@property() rounded: 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all' = 'none'\n\n\t/**\n\t * Specifies the type variant.\n\t *\n\t * **Note:** The property name is `type` and is kept as-is to maintain API consistency.\n\t * This value is also provided via context to descendant components.\n\t *\n\t * @attr type\n\t * @default 'type'\n\t */\n\t@provide({ context: SchmancySurfaceTypeContext })\n\t@property()\n\ttype: TSurfaceColor = 'surface'\n\n\t/**\n\t * Defines the elevation level (shadow depth) of the surface.\n\t *\n\t * Valid values: 0, 1, 2, 3, 4, 5.\n\t *\n\t * @attr elevation\n\t * @default 0\n\t */\n\t@property({ type: Number, reflect: true }) elevation: 0 | 1 | 2 | 3 | 4 | 5 = 0\n\n\t/**\n\t * Renders the component's template.\n\t *\n\t * CSS classes are conditionally applied using the `classMap` directive based on the\n\t * current property values.\n\t *\n\t * @returns The template for the component.\n\t */\n\tprotected render(): unknown {\n\t\tconst classes = {\n\t\t\trelative: true,\n\t\t\t'inset-0': true,\n\t\t\tblock: true,\n\t\t\t'box-border': true,\n\t\t\t// Rounding classes\n\t\t\t'rounded-none': this.rounded === 'none',\n\t\t\t'rounded-t-[8px]': this.rounded === 'top',\n\t\t\t'rounded-l-[8px]': this.rounded === 'left',\n\t\t\t'rounded-r-[8px]': this.rounded === 'right',\n\t\t\t'rounded-b-[8px]': this.rounded === 'bottom',\n\t\t\t'rounded-[8px]': this.rounded === 'all',\n\t\t\t// Fill classes\n\t\t\t'w-full': this.fill === 'width' || this.fill === 'all',\n\t\t\t'h-full': this.fill === 'height' || this.fill === 'all',\n\t\t\t// Elevation shadow classes\n\t\t\t'shadow-xs': this.elevation === 1,\n\t\t\t'shadow-sm': this.elevation === 2,\n\t\t\t'shadow-md': this.elevation === 3,\n\t\t\t'shadow-lg': this.elevation === 4,\n\t\t\t'shadow-xl': this.elevation === 5,\n\t\t\t// Text color based on the surface variant for optimal readability\n\t\t\t'text-surface-on':\n\t\t\t\tthis.type === 'surface' ||\n\t\t\t\tthis.type === 'surfaceDim' ||\n\t\t\t\tthis.type === 'surfaceBright' ||\n\t\t\t\tthis.type === 'containerLowest' ||\n\t\t\t\tthis.type === 'containerLow' ||\n\t\t\t\tthis.type === 'container' ||\n\t\t\t\tthis.type === 'containerHigh' ||\n\t\t\t\tthis.type === 'containerHighest',\n\t\t\t// Background color classes based on the surface variant\n\t\t\t'bg-surface-default': this.type === 'surface',\n\t\t\t'bg-surface-dim': this.type === 'surfaceDim',\n\t\t\t'bg-surface-bright': this.type === 'surfaceBright',\n\t\t\t'bg-surface-lowest': this.type === 'containerLowest',\n\t\t\t'bg-surface-low': this.type === 'containerLow',\n\t\t\t'bg-surface-container': this.type === 'container',\n\t\t\t'bg-surface-high': this.type === 'containerHigh',\n\t\t\t'bg-surface-highest': this.type === 'containerHighest',\n\t\t}\n\n\t\treturn html`\n\t\t\t<section class=${classMap(classes)}>\n\t\t\t\t<slot></slot>\n\t\t\t</section>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-surface': SchmancySurface\n\t}\n}\n"],"names":["SchmancySurface","TailwindElement","css","super","arguments","this","fill","rounded","type","elevation","render","classes","relative","block","html","classMap","__decorateClass","property","String","reflect","prototype","provide","context","SchmancySurfaceTypeContext","Number","customElement"],"mappings":"+ZAgCaA,QAAAA,gBAAN,cAA8BC,EAAAA,gBAAgBC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAA9C,CAAA,CAAA,aAAAC,CAAAA,MAAAA,GAAAC,SA0BiEC,EAAAA,KAAAC,KAAA,OAaKD,KAAAE,QAAA,OAatDF,KAAAG,KAAA,UAUwDH,KAAAI,UAAA,CAAA,CAUpE,QAAAC,CACT,MAAMC,EAAU,CACfC,SAAAA,GACA,UAAW,GACXC,MAAO,GACP,gBAEA,eAAgBR,KAAKE,UAAY,OACjC,kBAAmBF,KAAKE,UAAY,MACpC,kBAAmBF,KAAKE,UAAY,OACpC,kBAAmBF,KAAKE,UAAY,QACpC,kBAAmBF,KAAKE,UAAY,SACpC,gBAAiBF,KAAKE,UAAY,MAElC,SAAUF,KAAKC,OAAS,SAAWD,KAAKC,OAAS,MACjD,SAAUD,KAAKC,OAAS,UAAYD,KAAKC,OAAS,MAElD,YAAaD,KAAKI,YAAc,EAChC,YAAaJ,KAAKI,YAAc,EAChC,YAAaJ,KAAKI,YAAc,EAChC,YAAaJ,KAAKI,YAAc,EAChC,YAAaJ,KAAKI,YAAc,EAEhC,kBACCJ,KAAKG,OAAS,WACdH,KAAKG,OAAS,cACdH,KAAKG,OAAS,iBACdH,KAAKG,OAAS,mBACdH,KAAKG,OAAS,gBACdH,KAAKG,OAAS,aACdH,KAAKG,OAAS,iBACdH,KAAKG,OAAS,mBAEf,qBAAsBH,KAAKG,OAAS,UACpC,iBAAkBH,KAAKG,OAAS,aAChC,oBAAqBH,KAAKG,OAAS,gBACnC,oBAAqBH,KAAKG,OAAS,kBACnC,iBAAkBH,KAAKG,OAAS,eAChC,uBAAwBH,KAAKG,OAAS,YACtC,kBAAmBH,KAAKG,OAAS,gBACjC,qBAAsBH,KAAKG,OAAS,kBAG9B,EAAA,OAAAM,EAAAA;AAAAA,oBACWC,EAAAA,SAASJ,CAAAA,CAAAA;AAAAA;AAAAA;AAAAA,GAAQ,CA1FOK,EAAAA,EAAA,CAA1CC,EAAAA,SAAS,CAAET,KAAMU,OAAQC,QAAS,EAAA,CAAA,CAAA,EA1BvBnB,wBA0B+BoB,UAAA,OAAA,CAa/BJ,EAAAA,EAAA,CAAXC,EAASA,SAvCEjB,CAAAA,EAAAA,wBAuCAoB,UAAA,UAAA,CAAA,EAaZJ,EAAA,CAFCK,IAAQ,CAAEC,QAASC,EAAAA,0BAAAA,CAAAA,EACnBN,EAASA,SAAAA,CAAAA,EAnDEjB,wBAoDZoB,UAAA,OAAA,CAU2CJ,EAAAA,EAAA,CAA1CC,EAAAA,SAAS,CAAET,KAAMgB,OAAQL,QAAS,EAAA,CAAA,CAAA,EA9DvBnB,wBA8D+BoB,UAAA,YAAA,CA9D/BpB,EAAAA,QAANA,gBAAAgB,EAAA,CADNS,EAAAA,cAAc,kBAAA,CAAA,EACFzB"}

package/dist/surface-DkGerfbU.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"surface-DkGerfbU.js","sources":["../src/surface/surface.ts"],"sourcesContent":["import { provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/tailwind.mixin'\nimport { TSurfaceColor } from '@schmancy/types'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js' // Utility for conditionally applying CSS classes\nimport { SchmancySurfaceTypeContext } from './context'\n\n/**\n * Defines the fill options for the surface component.\n */\nexport type SchmancySurfaceFill = 'all' | 'width' | 'height' | 'auto'\n\n/**\n * `<schmancy-surface>` component.\n *\n * This component renders a styled surface element that adapts its dimensions based on the\n * provided fill mode. It supports various rounding options, elevation levels, and applies\n * background and text color classes based on the specified surface variant.\n *\n * **Note:** The property for defining the surface variant is named `surface` and is not\n * changed to `type` to maintain API consistency.\n *\n * @element schmancy-surface\n * @slot - Default slot for projecting child elements.\n *\n * @example\n * <schmancy-surface fill=\"all\" rounded=\"all\" elevation=\"3\" surface=\"surfaceBright\">\n *   <p>Your content here</p>\n * </schmancy-surface>\n */\n@customElement('schmancy-surface')\nexport class SchmancySurface extends TailwindElement(css`\n\t:host([fill='all']) {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t:host([fill='width']) {\n\t\twidth: 100%;\n\t}\n\t:host([fill='height']) {\n\t\theight: 100%;\n\t}\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\t/**\n\t * Determines how the component should fill the available space.\n\t *\n\t * - `all`: Fills both width and height.\n\t * - `width`: Fills only the width.\n\t * - `height`: Fills only the height.\n\t * - `auto`: No automatic filling.\n\t *\n\t * @attr fill\n\t * @default 'auto'\n\t */\n\t@property({ type: String, reflect: true }) fill: SchmancySurfaceFill = 'auto'\n\n\t/**\n\t * Specifies the rounding style of the component's corners.\n\t *\n\t * Options:\n\t * - `none`: No rounding.\n\t * - `top`, `left`, `right`, `bottom`: Rounds only one edge.\n\t * - `all`: Rounds all corners.\n\t *\n\t * @attr rounded\n\t * @default 'none'\n\t */\n\t@property() rounded: 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all' = 'none'\n\n\t/**\n\t * Specifies the type variant.\n\t *\n\t * **Note:** The property name is `type` and is kept as-is to maintain API consistency.\n\t * This value is also provided via context to descendant components.\n\t *\n\t * @attr type\n\t * @default 'type'\n\t */\n\t@provide({ context: SchmancySurfaceTypeContext })\n\t@property()\n\ttype: TSurfaceColor = 'surface'\n\n\t/**\n\t * Defines the elevation level (shadow depth) of the surface.\n\t *\n\t * Valid values: 0, 1, 2, 3, 4, 5.\n\t *\n\t * @attr elevation\n\t * @default 0\n\t */\n\t@property({ type: Number, reflect: true }) elevation: 0 | 1 | 2 | 3 | 4 | 5 = 0\n\n\t/**\n\t * Renders the component's template.\n\t *\n\t * CSS classes are conditionally applied using the `classMap` directive based on the\n\t * current property values.\n\t *\n\t * @returns The template for the component.\n\t */\n\tprotected render(): unknown {\n\t\tconst classes = {\n\t\t\trelative: true,\n\t\t\t'inset-0': true,\n\t\t\tblock: true,\n\t\t\t'box-border': true,\n\t\t\t// Rounding classes\n\t\t\t'rounded-none': this.rounded === 'none',\n\t\t\t'rounded-t-[8px]': this.rounded === 'top',\n\t\t\t'rounded-l-[8px]': this.rounded === 'left',\n\t\t\t'rounded-r-[8px]': this.rounded === 'right',\n\t\t\t'rounded-b-[8px]': this.rounded === 'bottom',\n\t\t\t'rounded-[8px]': this.rounded === 'all',\n\t\t\t// Fill classes\n\t\t\t'w-full': this.fill === 'width' || this.fill === 'all',\n\t\t\t'h-full': this.fill === 'height' || this.fill === 'all',\n\t\t\t// Elevation shadow classes\n\t\t\t'shadow-xs': this.elevation === 1,\n\t\t\t'shadow-sm': this.elevation === 2,\n\t\t\t'shadow-md': this.elevation === 3,\n\t\t\t'shadow-lg': this.elevation === 4,\n\t\t\t'shadow-xl': this.elevation === 5,\n\t\t\t// Text color based on the surface variant for optimal readability\n\t\t\t'text-surface-on':\n\t\t\t\tthis.type === 'surface' ||\n\t\t\t\tthis.type === 'surfaceDim' ||\n\t\t\t\tthis.type === 'surfaceBright' ||\n\t\t\t\tthis.type === 'containerLowest' ||\n\t\t\t\tthis.type === 'containerLow' ||\n\t\t\t\tthis.type === 'container' ||\n\t\t\t\tthis.type === 'containerHigh' ||\n\t\t\t\tthis.type === 'containerHighest',\n\t\t\t// Background color classes based on the surface variant\n\t\t\t'bg-surface-default': this.type === 'surface',\n\t\t\t'bg-surface-dim': this.type === 'surfaceDim',\n\t\t\t'bg-surface-bright': this.type === 'surfaceBright',\n\t\t\t'bg-surface-lowest': this.type === 'containerLowest',\n\t\t\t'bg-surface-low': this.type === 'containerLow',\n\t\t\t'bg-surface-container': this.type === 'container',\n\t\t\t'bg-surface-high': this.type === 'containerHigh',\n\t\t\t'bg-surface-highest': this.type === 'containerHighest',\n\t\t}\n\n\t\treturn html`\n\t\t\t<section class=${classMap(classes)}>\n\t\t\t\t<slot></slot>\n\t\t\t</section>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-surface': SchmancySurface\n\t}\n}\n"],"names":["SchmancySurface","TailwindElement","css","super","arguments","this","fill","rounded","type","elevation","render","classes","relative","block","html","classMap","__decorateClass","property","String","reflect","prototype","provide","context","SchmancySurfaceTypeContext","Number","customElement"],"mappings":";;;;;;;;;;AAgCa,IAAAA,IAAN,cAA8BC,EAAgBC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAA9C,EAAA;AAAA,EAAA,cAAAC;AAAAA,UAAAA,GAAAC,SA0BiEC,GAAAA,KAAAC,OAAA,QAaKD,KAAAE,UAAA,QAatDF,KAAAG,OAAA,WAUwDH,KAAAI,YAAA;AAAA,EAAA;AAAA,EAUpE,SAAAC;AACT,UAAMC,IAAU,EACfC,UAAAA,IACA,WAAW,IACXC,OAAO,IACP,kBAEA,gBAAgBR,KAAKE,YAAY,QACjC,mBAAmBF,KAAKE,YAAY,OACpC,mBAAmBF,KAAKE,YAAY,QACpC,mBAAmBF,KAAKE,YAAY,SACpC,mBAAmBF,KAAKE,YAAY,UACpC,iBAAiBF,KAAKE,YAAY,OAElC,UAAUF,KAAKC,SAAS,WAAWD,KAAKC,SAAS,OACjD,UAAUD,KAAKC,SAAS,YAAYD,KAAKC,SAAS,OAElD,aAAaD,KAAKI,cAAc,GAChC,aAAaJ,KAAKI,cAAc,GAChC,aAAaJ,KAAKI,cAAc,GAChC,aAAaJ,KAAKI,cAAc,GAChC,aAAaJ,KAAKI,cAAc,GAEhC,mBACCJ,KAAKG,SAAS,aACdH,KAAKG,SAAS,gBACdH,KAAKG,SAAS,mBACdH,KAAKG,SAAS,qBACdH,KAAKG,SAAS,kBACdH,KAAKG,SAAS,eACdH,KAAKG,SAAS,mBACdH,KAAKG,SAAS,oBAEf,sBAAsBH,KAAKG,SAAS,WACpC,kBAAkBH,KAAKG,SAAS,cAChC,qBAAqBH,KAAKG,SAAS,iBACnC,qBAAqBH,KAAKG,SAAS,mBACnC,kBAAkBH,KAAKG,SAAS,gBAChC,wBAAwBH,KAAKG,SAAS,aACtC,mBAAmBH,KAAKG,SAAS,iBACjC,sBAAsBH,KAAKG,SAAS,mBAATA;AAGrB,WAAAM;AAAAA,oBACWC,EAASJ,CAAAA,CAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAAQ;AA1FOK;AAAAA,EAAA,CAA1CC,EAAS,EAAET,MAAMU,QAAQC,SAAAA,QA1BdnB,EA0B+BoB,WAAA,QAAA,CAa/BJ,GAAAA,EAAA,CAAXC,EAvCWjB,CAAAA,GAAAA,EAuCAoB,WAAA,WAAA,CAAA,GAaZJ,EAAA,CAFCK,EAAQ,EAAEC,SAASC,EACnBN,CAAAA,GAAAA,EAAAA,CAAAA,GAnDWjB,EAoDZoB,WAAA,QAAA,IAU2CJ,EAAA,CAA1CC,EAAS,EAAET,MAAMgB,QAAQL,YA9DdnB,CAAAA,CAAAA,GAAAA,EA8D+BoB,WAAA,aAAA,CAAA,GA9D/BpB,IAANgB,EAAA,CADNS,EAAc,kBAAA,CAAA,GACFzB;"}