{ "schema_version": "1.0", "generated": "2026-05-05T04:37:40.652Z", "naming": { "mode": "plain", "utilityPrefix": "u", "componentPrefix": "comp" }, "note": "Class names shown use mode=plain (default). Set FIKIR_NAMING_MODE=prefixed for prefix mode.", "selectors": { "component.btn": "btn", "component.btnXs": "btn-xs", "component.btnSm": "btn-sm", "component.btnMd": "btn-md", "component.btnLg": "btn-lg", "component.btnSolid": "btn-solid", "component.btnSoft": "btn-soft", "component.btnOutline": "btn-outline", "component.btnGhost": "btn-ghost", "component.btnPlain": "btn-plain", "component.btnPrimary": "btn-primary", "component.btnNeutral": "btn-neutral", "component.btnDanger": "btn-danger", "component.card": "card", "component.cardFlat": "card-flat", "component.cardPlain": "card-plain", "component.cardSubtle": "card-subtle", "component.cardElevated": "card-elevated", "component.cardInteractive": "card-interactive", "component.cardPSm": "card-p-sm", "component.cardPMd": "card-p-md", "component.cardPLg": "card-p-lg", "component.input": "input", "component.inputSm": "input-sm", "component.inputMd": "input-md", "component.inputLg": "input-lg", "component.textarea": "textarea", "component.select": "select", "component.selectSm": "select-sm", "component.selectMd": "select-md", "component.selectLg": "select-lg", "component.checkbox": "checkbox", "component.radio": "radio", "component.switch": "switch", "component.rangeSlider": "range-slider", "component.numberInput": "number-input", "component.numberInputControls": "number-input-controls", "component.numberInputStep": "number-input-step", "component.rating": "rating", "component.ratingItem": "rating-item", "component.ratingItemActive": "rating-item-active", "component.tagsInput": "tags-input", "component.tagsInputField": "tags-input-field", "component.tagsInputList": "tags-input-list", "component.tagsInputItem": "tags-input-item", "component.tagsInputRemove": "tags-input-remove", "component.otpInput": "otp-input", "component.otpInputGroup": "otp-input-group", "component.otpInputSlot": "otp-input-slot", "component.inputGroup": "input-group", "component.inputGroupAddon": "input-group-addon", "component.modal": "modal", "component.modalBackdrop": "modal-backdrop", "component.modalDialog": "modal-dialog", "component.modalHeader": "modal-header", "component.modalBody": "modal-body", "component.modalFooter": "modal-footer", "component.drawer": "drawer", "component.drawerBackdrop": "drawer-backdrop", "component.drawerPanel": "drawer-panel", "component.drawerHeader": "drawer-header", "component.drawerBody": "drawer-body", "component.drawerFooter": "drawer-footer", "component.toastViewport": "toast-viewport", "component.toast": "toast", "component.tooltip": "tooltip", "component.tooltipContent": "tooltip-content", "component.popover": "popover", "component.popoverContent": "popover-content", "component.dropdownMenu": "dropdown-menu", "component.dropdownMenuContent": "dropdown-menu-content", "component.dropdownMenuItem": "dropdown-menu-item", "component.splitButton": "split-button", "component.splitButtonAction": "split-button-action", "component.splitButtonToggle": "split-button-toggle", "component.contextMenu": "context-menu", "component.contextMenuContent": "context-menu-content", "component.contextMenuItem": "context-menu-item", "component.hoverCard": "hover-card", "component.hoverCardContent": "hover-card-content", "component.progress": "progress", "component.progressTrack": "progress-track", "component.progressIndicator": "progress-indicator", "component.progressLabel": "progress-label", "component.loadingOverlay": "loading-overlay", "component.loadingOverlayBackdrop": "loading-overlay-backdrop", "component.loadingOverlayContent": "loading-overlay-content", "component.tabs": "tabs", "component.tabsList": "tabs-list", "component.tabsTrigger": "tabs-trigger", "component.tabsPanel": "tabs-panel", "component.accordion": "accordion", "component.accordionItem": "accordion-item", "component.accordionTrigger": "accordion-trigger", "component.accordionPanel": "accordion-panel", "component.pagination": "pagination", "component.paginationItem": "pagination-item", "component.paginationSm": "pagination-sm", "component.paginationMd": "pagination-md", "component.paginationLg": "pagination-lg", "component.breadcrumb": "breadcrumb", "component.breadcrumbList": "breadcrumb-list", "component.breadcrumbItem": "breadcrumb-item", "component.breadcrumbLink": "breadcrumb-link", "component.breadcrumbCurrent": "breadcrumb-current", "component.navbar": "navbar", "component.navbarBrand": "navbar-brand", "component.navbarNav": "navbar-nav", "component.navbarItem": "navbar-item", "component.menuBar": "menu-bar", "component.menuBarList": "menu-bar-list", "component.menuBarItem": "menu-bar-item", "component.menuBarTrigger": "menu-bar-trigger", "component.menuBarContent": "menu-bar-content", "component.menuBarLink": "menu-bar-link", "component.sidebarNav": "sidebar-nav", "component.sidebarNavSection": "sidebar-nav-section", "component.sidebarNavItem": "sidebar-nav-item", "component.treeView": "tree-view", "component.treeViewItem": "tree-view-item", "component.treeViewGroup": "tree-view-group", "component.treeViewToggle": "tree-view-toggle", "component.treeViewLabel": "tree-view-label", "component.stepper": "stepper", "component.stepperItem": "stepper-item", "component.stepperMarker": "stepper-marker", "component.stepperLabel": "stepper-label", "component.pageHeader": "page-header", "component.pageHeaderContent": "page-header-content", "component.pageHeaderActions": "page-header-actions", "component.sectionBlock": "section-block", "component.sectionHeader": "section-header", "component.sectionBody": "section-body", "component.appShell": "app-shell", "component.appShellTopbar": "app-shell-topbar", "component.appShellSidebar": "app-shell-sidebar", "component.appShellMain": "app-shell-main", "component.appShellContent": "app-shell-content", "component.splitPane": "split-pane", "component.splitPanePrimary": "split-pane-primary", "component.splitPaneSecondary": "split-pane-secondary", "component.text": "text", "component.heading": "heading", "component.heading1": "heading-1", "component.heading2": "heading-2", "component.heading3": "heading-3", "component.heading4": "heading-4", "component.heading5": "heading-5", "component.heading6": "heading-6", "component.code": "code", "component.codeBlock": "code-block", "component.callout": "callout", "component.calloutTitle": "callout-title", "component.calloutBody": "callout-body", "component.quote": "quote", "component.kbd": "kbd", "component.markdownSurface": "markdown-surface", "component.table": "table", "component.tableHead": "table-head", "component.tableBody": "table-body", "component.tableRow": "table-row", "component.tableHeadCell": "table-head-cell", "component.tableCell": "table-cell", "component.dataGrid": "data-grid", "component.dataGridHead": "data-grid-head", "component.dataGridBody": "data-grid-body", "component.dataGridRow": "data-grid-row", "component.dataGridCell": "data-grid-cell", "component.emptyState": "empty-state", "component.emptyStateMedia": "empty-state-media", "component.emptyStateTitle": "empty-state-title", "component.emptyStateDescription": "empty-state-description", "component.emptyStateActions": "empty-state-actions", "component.result": "result", "component.resultMedia": "result-media", "component.resultTitle": "result-title", "component.resultDescription": "result-description", "component.resultActions": "result-actions", "component.avatar": "avatar", "component.avatarImage": "avatar-image", "component.avatarFallback": "avatar-fallback", "component.avatarSm": "avatar-sm", "component.avatarMd": "avatar-md", "component.avatarLg": "avatar-lg", "component.avatarGroup": "avatar-group", "component.avatarGroupItem": "avatar-group-item", "component.tagChip": "tag-chip", "component.tagChipLabel": "tag-chip-label", "component.tagChipRemove": "tag-chip-remove", "component.stat": "stat", "component.statLabel": "stat-label", "component.statValue": "stat-value", "component.statMeta": "stat-meta", "component.timeline": "timeline", "component.timelineItem": "timeline-item", "component.timelineMarker": "timeline-marker", "component.timelineContent": "timeline-content", "component.timelineTitle": "timeline-title", "component.timelineMeta": "timeline-meta", "component.kpiCard": "kpi-card", "component.kpiCardHeader": "kpi-card-header", "component.kpiCardValue": "kpi-card-value", "component.kpiCardMeta": "kpi-card-meta", "component.kpiCardTrend": "kpi-card-trend", "component.list": "list", "component.listItem": "list-item", "component.descriptionList": "description-list", "component.descriptionTerm": "description-term", "component.descriptionDetails": "description-details", "component.combobox": "combobox", "component.comboboxInput": "combobox-input", "component.comboboxList": "combobox-list", "component.comboboxOption": "combobox-option", "component.searchBox": "search-box", "component.searchBoxInput": "search-box-input", "component.searchBoxAction": "search-box-action", "component.autocomplete": "autocomplete", "component.autocompleteInput": "autocomplete-input", "component.autocompleteList": "autocomplete-list", "component.autocompleteOption": "autocomplete-option", "component.commandPalette": "command-palette", "component.commandPaletteDialog": "command-palette-dialog", "component.commandPaletteInput": "command-palette-input", "component.commandPaletteList": "command-palette-list", "component.commandPaletteItem": "command-palette-item", "component.datePicker": "date-picker", "component.datePickerInput": "date-picker-input", "component.datePickerTrigger": "date-picker-trigger", "component.datePickerPanel": "date-picker-panel", "component.datePickerGrid": "date-picker-grid", "component.datePickerDay": "date-picker-day", "component.dateRangePicker": "date-range-picker", "component.dateRangePickerStart": "date-range-picker-start", "component.dateRangePickerEnd": "date-range-picker-end", "component.dateRangePickerSeparator": "date-range-picker-separator", "component.timePicker": "time-picker", "component.timePickerInput": "time-picker-input", "component.timePickerTrigger": "time-picker-trigger", "component.timePickerPanel": "time-picker-panel", "component.timePickerFields": "time-picker-fields", "component.timePickerField": "time-picker-field", "component.timePickerFieldLabel": "time-picker-field-label", "component.timePickerFieldInput": "time-picker-field-input", "component.timePickerFieldSpinner": "time-picker-field-spinner", "component.timePickerIncrement": "time-picker-increment", "component.timePickerDecrement": "time-picker-decrement", "component.dateTimePicker": "date-time-picker", "component.dateTimePickerInput": "date-time-picker-input", "component.dateTimePickerTrigger": "date-time-picker-trigger", "component.dateTimePickerPanel": "date-time-picker-panel", "component.dateTimePickerDateSection": "date-time-picker-date-section", "component.dateTimePickerTimeSection": "date-time-picker-time-section", "component.dateTimePickerCalendar": "date-time-picker-calendar", "component.dateTimePickerDay": "date-time-picker-day", "component.dateTimePickerFields": "date-time-picker-fields", "component.dateTimePickerField": "date-time-picker-field", "component.dateTimePickerFieldLabel": "date-time-picker-field-label", "component.dateTimePickerFieldInput": "date-time-picker-field-input", "component.dateTimePickerFieldSpinner": "date-time-picker-field-spinner", "component.dateTimePickerIncrement": "date-time-picker-increment", "component.dateTimePickerDecrement": "date-time-picker-decrement", "component.dateRangePickerTrigger": "date-range-picker-trigger", "component.dateRangePickerPanel": "date-range-picker-panel", "component.dateRangePickerGrid": "date-range-picker-grid", "component.dateRangePickerDay": "date-range-picker-day", "component.calendar": "calendar", "component.calendarHeader": "calendar-header", "component.calendarTitle": "calendar-title", "component.calendarNav": "calendar-nav", "component.calendarGrid": "calendar-grid", "component.calendarWeekday": "calendar-weekday", "component.calendarDay": "calendar-day", "component.fileUpload": "file-upload", "component.fileUploadInput": "file-upload-input", "component.fileUploadMeta": "file-upload-meta", "component.fileUploadActions": "file-upload-actions", "component.dropzone": "dropzone", "component.dropzoneInput": "dropzone-input", "component.dropzoneHint": "dropzone-hint", "component.dropzoneMeta": "dropzone-meta", "component.dropzoneActions": "dropzone-actions", "component.editableField": "editable-field", "component.editableFieldDisplay": "editable-field-display", "component.editableFieldEditor": "editable-field-editor", "component.editableFieldActions": "editable-field-actions", "component.field": "field", "component.iconButton": "icon-button", "component.iconButtonXs": "icon-button-xs", "component.iconButtonSm": "icon-button-sm", "component.iconButtonMd": "icon-button-md", "component.iconButtonLg": "icon-button-lg", "component.link": "link", "component.linkMuted": "link-muted", "component.linkDanger": "link-danger", "component.divider": "divider", "component.surface": "surface", "component.surfaceFlat": "surface-flat", "component.surfaceSubtle": "surface-subtle", "component.surfaceElevated": "surface-elevated", "component.surfaceInteractive": "surface-interactive", "component.surfaceRaised": "surface-raised", "component.surfaceSunken": "surface-sunken", "component.visuallyHidden": "visually-hidden", "component.skeleton": "skeleton", "component.skeletonText": "skeleton-text", "component.skeletonBlock": "skeleton-block", "component.skeletonCircle": "skeleton-circle", "component.spinner": "spinner", "component.spinnerSm": "spinner-sm", "component.spinnerMd": "spinner-md", "component.spinnerLg": "spinner-lg", "component.label": "label", "component.helperText": "helper-text", "component.errorText": "error-text", "component.badge": "badge", "component.badgeXs": "badge-xs", "component.badgeSm": "badge-sm", "component.badgeMd": "badge-md", "component.badgeLg": "badge-lg", "component.badgeSolid": "badge-solid", "component.badgeSoft": "badge-soft", "component.badgeOutline": "badge-outline", "component.badgePlain": "badge-plain", "component.badgeNeutral": "badge-neutral", "component.badgePrimary": "badge-primary", "component.badgeDanger": "badge-danger", "component.badgeWarning": "badge-warning", "component.badgeSuccess": "badge-success", "component.badgeInfo": "badge-info", "component.alert": "alert", "component.alertTitle": "alert-title", "component.alertDescription": "alert-description", "component.alertDanger": "alert-danger", "component.alertWarning": "alert-warning", "component.alertSuccess": "alert-success", "component.alertInfo": "alert-info", "component.alertNeutral": "alert-neutral", "component.segmentedControl": "segmented-control", "component.segmentedControlItem": "segmented-control-item", "component.segmentedControlInput": "segmented-control-input", "component.segmentedControlLabel": "segmented-control-label", "component.segmentedControlXs": "segmented-control-xs", "component.segmentedControlSm": "segmented-control-sm", "component.segmentedControlMd": "segmented-control-md", "component.segmentedControlLg": "segmented-control-lg", "component.menuBarSubtrigger": "menu-bar-subtrigger", "component.menuBarSubmenu": "menu-bar-submenu", "component.menuBarSubmenuContent": "menu-bar-submenu-content", "component.menuBarDivider": "menu-bar-divider", "component.toastSuccess": "toast-success", "component.toastInfo": "toast-info", "component.toastWarn": "toast-warn", "component.toastError": "toast-error", "component.toastTitle": "toast-title", "component.toastDescription": "toast-description", "component.toastClose": "toast-close", "component.skeletonTable": "skeleton-table", "component.skeletonTableRow": "skeleton-table-row", "component.skeletonForm": "skeleton-form", "component.skeletonFormRow": "skeleton-form-row", "component.skeletonCard": "skeleton-card", "component.skeletonContent": "skeleton-content", "component.tableEmpty": "table-empty", "component.tableLoading": "table-loading", "component.tableError": "table-error", "component.tableStateMessage": "table-state-message", "component.settingsPanel": "settings-panel", "component.settingsPanelSidebar": "settings-panel-sidebar", "component.settingsPanelNav": "settings-panel-nav", "component.settingsPanelNavItem": "settings-panel-nav-item", "component.settingsPanelContent": "settings-panel-content", "component.settingsPanelSection": "settings-panel-section", "component.settingsPanelSectionTitle": "settings-panel-section-title", "component.settingsPanelRow": "settings-panel-row", "component.settingsPanelRowLabel": "settings-panel-row-label", "component.settingsPanelRowControl": "settings-panel-row-control", "pattern.authScreen": "auth-screen", "pattern.coachmark": "coachmark", "pattern.commandBar": "command-bar", "pattern.copyButton": "copy-button", "pattern.dataTableToolbar": "data-table-toolbar", "pattern.emptySearchState": "empty-search-state", "pattern.filterBar": "filter-bar", "pattern.onboardingChecklist": "onboarding-checklist", "pattern.passwordInput": "password-input", "pattern.searchResultItem": "search-result-item", "pattern.statGroup": "stat-group", "pattern.timeRangePicker": "time-range-picker", "pattern.srOnly": "sr-only", "pattern.meshGradient": "mesh-gradient", "component.inlineNotice": "inline-notice", "component.inlineNoticeIcon": "inline-notice-icon", "component.inlineNoticeContent": "inline-notice-content", "component.inlineNoticeTitle": "inline-notice-title", "component.inlineNoticeBody": "inline-notice-body", "component.inlineNoticeActions": "inline-notice-actions", "component.inlineNoticeClose": "inline-notice-close", "component.treeTableCellToggle": "tree-table-cell-toggle", "component.treeTableCell": "tree-table-cell", "component.treeTableCellTogglePlaceholder": "tree-table-cell-toggle-placeholder", "component.chartFrame": "chart-frame", "component.chartFrameTitle": "chart-frame-title", "component.chartFrameBody": "chart-frame-body", "component.chartFrameLegend": "chart-frame-legend", "component.chartFrameLegendItem": "chart-frame-legend-item", "utility.p0": "p-0", "utility.p1": "p-1", "utility.p2": "p-2", "utility.p3": "p-3", "utility.p4": "p-4", "utility.px4": "px-4", "utility.py2": "py-2", "utility.pt1": "pt-1", "utility.pt2": "pt-2", "utility.pt4": "pt-4", "utility.pb1": "pb-1", "utility.pb2": "pb-2", "utility.pb4": "pb-4", "utility.m1": "m-1", "utility.m2": "m-2", "utility.m4": "m-4", "utility.mt0": "mt-0", "utility.mt1": "mt-1", "utility.mt2": "mt-2", "utility.mt4": "mt-4", "utility.mb1": "mb-1", "utility.mb2": "mb-2", "utility.mb4": "mb-4", "utility.gap2": "gap-2", "utility.gap4": "gap-4", "utility.gap6": "gap-6", "utility.forceMt0": "force-mt-0", "utility.flex1": "flex-1", "utility.minW0": "min-w-0", "utility.overflowAuto": "overflow-auto", "utility.textXs": "text-xs", "utility.textSm": "text-sm", "utility.textMd": "text-md", "utility.textLg": "text-lg", "utility.fontMedium": "font-medium", "utility.fontSemibold": "font-semibold", "utility.bgPrimary500": "bg-primary-500", "utility.bgPrimary600": "bg-primary-600", "utility.bgSurface": "bg-surface", "utility.bgRed500": "bg-red-500", "utility.textWhite": "text-white", "utility.textFgDefault": "text-fg-default", "utility.borderSubtle": "border-subtle", "utility.forceBgRed500": "force-bg-red-500", "utility.flex": "flex", "utility.inlineFlex": "inline-flex", "utility.itemsCenter": "items-center", "utility.justifyBetween": "justify-between", "utility.wFull": "w-full", "utility.hoverBgPrimary600": "hover:bg-primary-600", "utility.animateFadeIn": "animate-fade-in", "utility.animateSlideUp": "animate-slide-up", "utility.animateScaleIn": "animate-scale-in", "utility.animatePulseGlow": "animate-pulse-glow", "utility.focusVisibleRingPrimary": "focus-visible:ring-primary", "utility.disabledOpacity50": "disabled:opacity-50", "utility.ariaInvalidRingDanger": "aria-invalid:ring-danger", "utility.dataOpenShadowLg": "data-open:shadow-lg", "utility.roundedMd": "rounded-md", "utility.roundedLg": "rounded-lg", "utility.shadowSm": "shadow-sm", "utility.shadowMd": "shadow-md" }, "deprecated_selectors": {}, "data_markers": { "global": [ { "attr": "data-theme", "on": "html or container", "values": [ "dark" ], "description": "Enable dark theme. Apply to root or any container." }, { "attr": "data-density", "on": "html or container", "values": [ "compact", "comfortable" ], "description": "Override density. Requires compact.css or comfortable.css to be imported." }, { "attr": "data-shape", "on": "html or container", "values": [ "rounded", "sharp" ], "description": "Override border-radius globally. Requires shape.css to be imported." } ], "components": { "alert": [ { "attr": "data-style", "on": "root", "values": [ "outline" ], "description": "Outline style variant." } ], "divider": [ { "attr": "data-orientation", "on": "root", "values": [ "horizontal", "vertical" ], "description": "Divider orientation." } ], "field": [ { "attr": "data-invalid", "on": "root", "values": [ "true" ], "description": "Marks field as invalid." } ], "input": [ { "attr": "aria-invalid", "on": "root", "values": [ "true" ], "description": "Invalid/error state on the input element." }, { "attr": "disabled", "on": "root", "values": [ "present" ], "description": "Native disabled state." }, { "attr": "readonly", "on": "root", "values": [ "present" ], "description": "Native readonly state." }, { "attr": "required", "on": "root", "values": [ "present" ], "description": "Marks the field as required." } ], "textarea": [ { "attr": "aria-invalid", "on": "root", "values": [ "true" ], "description": "Invalid/error state on the textarea element." }, { "attr": "disabled", "on": "root", "values": [ "present" ], "description": "Native disabled state." }, { "attr": "readonly", "on": "root", "values": [ "present" ], "description": "Native readonly state." }, { "attr": "required", "on": "root", "values": [ "present" ], "description": "Marks the field as required." } ], "select": [ { "attr": "aria-invalid", "on": "root", "values": [ "true" ], "description": "Invalid/error state on the select element." }, { "attr": "disabled", "on": "root", "values": [ "present" ], "description": "Native disabled state." }, { "attr": "required", "on": "root", "values": [ "present" ], "description": "Marks the field as required." } ], "checkbox": [ { "attr": "aria-invalid", "on": "root", "values": [ "true" ], "description": "Invalid/error state on the checkbox element." }, { "attr": "disabled", "on": "root", "values": [ "present" ], "description": "Native disabled state." }, { "attr": "required", "on": "root", "values": [ "present" ], "description": "Marks the checkbox as required." } ], "calendar": [ { "attr": "data-today", "on": "calendar-day", "values": [ "true" ], "description": "Marks today's date." }, { "attr": "data-selected", "on": "calendar-day", "values": [ "true" ], "description": "Marks the selected date." }, { "attr": "data-outside", "on": "calendar-day", "values": [ "true" ], "description": "Marks a day rendered from the previous or next month." }, { "attr": "disabled", "on": "calendar-day", "values": [ "present" ], "description": "Disables a day button." } ], "date-picker": [ { "attr": "data-open", "on": "root", "values": [ "true" ], "description": "Shows the calendar panel." }, { "attr": "data-locale", "on": "root", "values": [ "en-US", "tr-TR", "etc" ], "description": "Sets the calendar locale." }, { "attr": "data-format", "on": "root", "values": [ "YYYY-MM-DD", "DD.MM.YYYY", "etc" ], "description": "Sets the date format contract." }, { "attr": "aria-invalid", "on": "date-picker-input", "values": [ "true" ], "description": "Invalid/error state on the text input." }, { "attr": "disabled", "on": "date-picker-input", "values": [ "present" ], "description": "Native disabled state on the text input." }, { "attr": "data-today", "on": "date-picker-day", "values": [ "true" ], "description": "Marks today's date." }, { "attr": "data-selected", "on": "date-picker-day", "values": [ "true" ], "description": "Marks the selected date." }, { "attr": "data-outside", "on": "date-picker-day", "values": [ "true" ], "description": "Marks a day rendered from the previous or next month." }, { "attr": "disabled", "on": "date-picker-day", "values": [ "present" ], "description": "Disables a day button." } ], "date-range-picker": [ { "attr": "data-open", "on": "root", "values": [ "true" ], "description": "Shows the range calendar panel." }, { "attr": "data-locale", "on": "root", "values": [ "en-US", "etc" ], "description": "Sets the calendar locale." }, { "attr": "data-format", "on": "root", "values": [ "YYYY-MM-DD", "etc" ], "description": "Sets the date format contract." }, { "attr": "data-in-range", "on": "date-range-picker-day", "values": [ "true" ], "description": "Marks a day between the start and end dates." }, { "attr": "data-range-start", "on": "date-range-picker-day", "values": [ "true" ], "description": "Marks the first selected day." }, { "attr": "data-range-end", "on": "date-range-picker-day", "values": [ "true" ], "description": "Marks the last selected day." }, { "attr": "data-outside", "on": "date-range-picker-day", "values": [ "true" ], "description": "Marks a day rendered from the previous or next month." }, { "attr": "disabled", "on": "date-range-picker-day", "values": [ "present" ], "description": "Disables a day button." } ], "date-time-picker": [ { "attr": "data-open", "on": "root", "values": [ "true" ], "description": "Shows the date-time panel." }, { "attr": "aria-invalid", "on": "date-time-picker-input", "values": [ "true" ], "description": "Invalid/error state on the text input." }, { "attr": "disabled", "on": "date-time-picker-input", "values": [ "present" ], "description": "Native disabled state on the text input." }, { "attr": "data-today", "on": "date-time-picker-day", "values": [ "true" ], "description": "Marks today's date." }, { "attr": "data-selected", "on": "date-time-picker-day", "values": [ "true" ], "description": "Marks the selected date." }, { "attr": "data-outside", "on": "date-time-picker-day", "values": [ "true" ], "description": "Marks a day rendered from the previous or next month." }, { "attr": "disabled", "on": "date-time-picker-day", "values": [ "present" ], "description": "Disables a day button." } ], "time-picker": [ { "attr": "data-open", "on": "root", "values": [ "true" ], "description": "Shows the time panel." }, { "attr": "aria-invalid", "on": "time-picker-input", "values": [ "true" ], "description": "Invalid/error state on the text input." }, { "attr": "disabled", "on": "time-picker-input", "values": [ "present" ], "description": "Native disabled state on the text input." } ], "dropzone": [ { "attr": "data-drag-over", "on": "root", "values": [ "true" ], "description": "Highlights the drop target while dragging files over it." }, { "attr": "data-state", "on": "root", "values": [ "idle", "dragging", "uploading", "error" ], "description": "Current upload/drag state." }, { "attr": "data-disabled", "on": "root", "values": [ "true" ], "description": "Visually disables the dropzone." } ], "editable-field": [ { "attr": "data-editing", "on": "root", "values": [ "true" ], "description": "Switches from display mode to editor mode." }, { "attr": "data-disabled", "on": "root", "values": [ "true" ], "description": "Visually disables the editable field." } ], "file-upload": [ { "attr": "data-has-file", "on": "root", "values": [ "true" ], "description": "Highlights the wrapper when a file is selected." }, { "attr": "data-state", "on": "root", "values": [ "idle", "uploading", "error" ], "description": "Current upload state." }, { "attr": "disabled", "on": "file-upload-input", "values": [ "present" ], "description": "Native disabled state on the file input." } ], "modal": [ { "attr": "data-open", "on": "root", "values": [ "true" ], "description": "Show modal. Remove attribute (never set to false) to hide." } ], "drawer": [ { "attr": "data-open", "on": "root", "values": [ "true" ], "description": "Show drawer. Remove attribute to hide." } ], "popover": [ { "attr": "data-open", "on": "root", "values": [ "true" ], "description": "Show popover content." } ], "dropdown-menu": [ { "attr": "data-open", "on": "root", "values": [ "true" ], "description": "Show dropdown menu." } ], "context-menu": [ { "attr": "data-open", "on": "root", "values": [ "true" ], "description": "Shows the context menu panel." } ], "split-button": [ { "attr": "data-open", "on": "root", "values": [ "true", "false" ], "description": "Controls the secondary menu state." }, { "attr": "disabled", "on": "split-button-action", "values": [ "present" ], "description": "Disables the primary action." }, { "attr": "disabled", "on": "split-button-toggle", "values": [ "present" ], "description": "Disables the secondary toggle." } ], "toast": [ { "attr": "data-open", "on": "toast", "values": [ "true" ], "description": "Show individual toast. Remove to dismiss." }, { "attr": "data-tone", "on": "toast", "values": [ "danger", "success", "info", "warn", "error" ], "description": "Toast tone variant." } ], "loading-overlay": [ { "attr": "data-loading", "on": "root", "values": [ "true" ], "description": "Activate overlay." } ], "hover-card": [ { "attr": "data-open", "on": "root", "values": [ "true" ], "description": "Show hover card." } ], "tabs": [ { "attr": "data-active", "on": "tabs-trigger", "values": [ "true" ], "description": "Active tab button." }, { "attr": "data-active", "on": "tabs-panel", "values": [ "true" ], "description": "Active tab panel (visible)." } ], "accordion": [ { "attr": "data-open", "on": "accordion-item", "values": [ "true" ], "description": "Expand panel. Remove attribute to collapse." } ], "menu-bar": [ { "attr": "data-open", "on": "menu-bar-item", "values": [ "true" ], "description": "Open submenu." } ], "settings-panel": [ { "attr": "aria-current", "on": "settings-panel-nav-item", "values": [ "page" ], "description": "Marks the current nav item." }, { "attr": "data-active", "on": "settings-panel-nav-item", "values": [ "true" ], "description": "Alternate active styling for nav items." } ], "stepper": [ { "attr": "data-status", "on": "stepper-item", "values": [ "complete", "active", "pending" ], "description": "Step status for styling." } ], "command-palette": [ { "attr": "data-open", "on": "root", "values": [ "true" ], "description": "Show command palette overlay." } ], "tree-view": [ { "attr": "data-tree-expanded", "on": "tree-view-item", "values": [ "true", "false" ], "description": "Expanded state of node." } ], "table": [ { "attr": "data-row-selected", "on": "table-row", "values": [ "true" ], "description": "Highlight selected row." }, { "attr": "data-loading", "on": "root", "values": [ "true" ], "description": "Apply loading opacity to body." } ], "tree-table": [ { "attr": "data-tree-level", "on": "table-row", "values": [ "0", "1", "2", "3", "4", "5" ], "description": "Hierarchy depth used for indentation." }, { "attr": "aria-expanded", "on": "table-row", "values": [ "true", "false" ], "description": "Expanded state for rows with children." }, { "attr": "aria-selected", "on": "table-row", "values": [ "true" ], "description": "Optional selected-row styling state." }, { "attr": "data-hidden", "on": "table-row", "values": [ "true" ], "description": "Hides collapsed descendants." } ], "data-grid": [ { "attr": "data-row-selected", "on": "data-grid-row", "values": [ "true" ], "description": "Highlight selected row." } ], "app-shell": [ { "attr": "data-variant", "on": "root", "values": [ "fullscreen" ], "description": "Edge-to-edge full screen layout with zero border/radius and 100vh height." } ], "auth-screen": [ { "attr": "data-variant", "on": "root", "values": [ "centered", "split" ], "description": "Layout variant." } ], "coachmark": [ { "attr": "data-variant", "on": "root", "values": [ "info", "warning", "success", "danger", "neutral" ], "description": "Tone variant." }, { "attr": "data-position", "on": "root", "values": [ "top", "bottom", "start", "end" ], "description": "Popover direction relative to trigger." }, { "attr": "data-arrow", "on": "root", "values": [ "true" ], "description": "Show directional arrow pointer." } ], "copy-button": [ { "attr": "data-copied", "on": "root", "values": [ "true" ], "description": "Activates copied visual state (icon + label swap)." } ], "empty-search-state": [ { "attr": "data-variant", "on": "root", "values": [ "first-use", "no-results", "filtered-empty" ], "description": "Search state variant." } ], "onboarding-checklist": [ { "attr": "data-completed", "on": "[data-slot='item']", "values": [ "true" ], "description": "Marks step as complete." } ], "password-input": [ { "attr": "data-visible", "on": "root", "values": [ "true" ], "description": "Shows password (type=text)." }, { "attr": "data-strength", "on": "root", "values": [ "weak", "fair", "strong", "very-strong" ], "description": "Password strength level." } ], "search-result-item": [ { "attr": "data-active", "on": "root", "values": [ "true" ], "description": "Highlighted/focused state." }, { "attr": "data-role", "on": "root", "values": [ "section-header" ], "description": "Section header separator between result groups." } ], "stat-group": [ { "attr": "data-variant", "on": "root", "values": [ "compact", "divided" ], "description": "Layout variant. 'divided' inserts separator lines and removes gap; 'compact' tightens gap and min column width." } ], "inline-notice": [ { "attr": "data-tone", "on": "root", "values": [ "success", "warning", "danger", "info" ], "description": "Required tone variant. Drives background, border and left-accent colors." }, { "attr": "data-hidden", "on": "root", "values": [ "true" ], "description": "Hide the notice without removing it from the DOM." } ], "time-range-picker": [ { "attr": "data-variant", "on": "root", "values": [ "block" ], "description": "Full-width block layout." }, { "attr": "data-invalid", "on": "root", "values": [ "true" ], "description": "Invalid/error state on both inputs." } ], "heading": [ { "attr": "data-size", "on": "root", "values": [ "1", "2", "3", "4", "5", "6" ], "description": "Typographic scale step." }, { "attr": "data-weight", "on": "root", "values": [ "normal", "medium", "semibold", "bold" ], "description": "Font weight variant." } ], "text": [ { "attr": "data-tone", "on": "root", "values": [ "neutral", "primary", "success", "warning", "danger", "info", "subdued" ], "description": "Color tone for the text surface." }, { "attr": "data-size", "on": "root", "values": [ "sm", "md", "lg" ], "description": "Relative font size." } ], "quote": [ { "attr": "data-variant", "on": "root", "values": [ "bordered", "minimal" ], "description": "Visual style of the quote." } ], "range-slider": [ { "attr": "disabled", "on": "root", "values": [ "present" ], "description": "Native disabled state." } ], "rating": [ { "attr": "data-active", "on": "rating-item", "values": [ "true" ], "description": "Marks the item as selected/highlighted." }, { "attr": "data-value", "on": "root", "values": [ "1..5" ], "description": "Current rating value." }, { "attr": "data-max", "on": "root", "values": [ "5", "10" ], "description": "Maximum rating scale." }, { "attr": "data-half", "on": "root", "values": [ "true" ], "description": "Enables half-step rating." }, { "attr": "aria-disabled", "on": "root", "values": [ "true" ], "description": "Disables every rating item visually and via cursor." } ], "tags-input": [ { "attr": "data-tags", "on": "root", "values": [ "JSON string" ], "description": "Serialized tag data." }, { "attr": "data-tags-invalid", "on": "root", "values": [ "true" ], "description": "Invalid/error state on the wrapper (red border)." }, { "attr": "data-tags-disabled", "on": "root", "values": [ "true" ], "description": "Disables the input and all remove buttons." } ], "autocomplete": [ { "attr": "data-open", "on": "root", "values": [ "true" ], "description": "Shows the suggestion list." }, { "attr": "data-active", "on": "autocomplete-option", "values": [ "true" ], "description": "Highlights the option (e.g. keyboard cursor)." }, { "attr": "data-active-option", "on": "root", "values": [ "ID of active option" ], "description": "ID of the keyboard-focused option (ARIA 1.2)." } ], "combobox": [ { "attr": "data-open", "on": "root", "values": [ "true" ], "description": "Shows the options list." }, { "attr": "data-active", "on": "combobox-option", "values": [ "true" ], "description": "Highlights the keyboard-focused option." }, { "attr": "aria-selected", "on": "combobox-option", "values": [ "true" ], "description": "Marks the option as the currently selected value." }, { "attr": "data-active-option", "on": "root", "values": [ "ID of active option" ], "description": "ID of the keyboard-focused option (ARIA 1.2)." } ] } } }