@enjoys/context-engine 1.2.0 → 1.4.1

package/data/hover/css.json

@@ -0,0 +1,300 @@
+{
+  "language": "css",
+  "hovers": {
+    "display": {
+      "contents": [{ "value": "```css\ndisplay: block | inline | inline-block | flex | grid | none | contents | flow-root | inline-flex | inline-grid | table | list-item;\n```\n\nSets the display type of an element.\n\n- `block` — takes full width, stacks vertically\n- `inline` — flows with text, no width/height\n- `inline-block` — inline flow with block properties\n- `flex` — enables flexbox layout\n- `grid` — enables grid layout\n- `none` — removes from rendering\n- `contents` — element box replaced by children\n- `flow-root` — creates new block formatting context" }]
+    },
+    "position": {
+      "contents": [{ "value": "```css\nposition: static | relative | absolute | fixed | sticky;\n```\n\nSets how an element is positioned.\n\n- `static` — default; normal flow\n- `relative` — offset from normal position; creates positioning context\n- `absolute` — removed from flow; relative to nearest positioned ancestor\n- `fixed` — relative to viewport; stays in place on scroll\n- `sticky` — acts as `relative` until a scroll threshold, then `fixed`\n\nWorks with `top`, `right`, `bottom`, `left`, `inset` and `z-index`." }]
+    },
+    "flex-direction": {
+      "contents": [{ "value": "```css\nflex-direction: row | row-reverse | column | column-reverse;\n```\n\nDefines the main axis direction for a flex container.\n\n- `row` (default) — left to right\n- `row-reverse` — right to left\n- `column` — top to bottom\n- `column-reverse` — bottom to top\n\nChanging direction also swaps `justify-content` and `align-items` axes." }]
+    },
+    "justify-content": {
+      "contents": [{ "value": "```css\njustify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;\n```\n\nDistributes space along the main axis (flex) or inline axis (grid).\n\n- `flex-start` — items packed to start\n- `center` — items centered\n- `space-between` — equal space between items, no edge space\n- `space-around` — equal space around items\n- `space-evenly` — equal space between and around items" }]
+    },
+    "align-items": {
+      "contents": [{ "value": "```css\nalign-items: stretch | flex-start | flex-end | center | baseline;\n```\n\nAligns flex/grid items along the cross axis.\n\n- `stretch` (default) — fill the container\n- `center` — centered in cross axis\n- `flex-start` — aligned to start of cross axis\n- `baseline` — aligned by text baselines" }]
+    },
+    "grid-template-columns": {
+      "contents": [{ "value": "```css\ngrid-template-columns: <track-size>+ | repeat(<count>, <track-size>) | minmax(<min>, <max>);\n```\n\nDefines column sizes in a grid container.\n\nExamples:\n```css\ngrid-template-columns: 200px 1fr 2fr;\ngrid-template-columns: repeat(3, 1fr);\ngrid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\ngrid-template-columns: [start] 1fr [center] 2fr [end];\n```\n\nUnits: `fr` (fraction), `px`, `%`, `em`, `rem`, `auto`, `min-content`, `max-content`, `fit-content()`." }]
+    },
+    "margin": {
+      "contents": [{ "value": "```css\nmargin: <length> | <percentage> | auto;\n/* 1-4 values: top right bottom left */\n```\n\nSets the margin area around an element.\n\n- 1 value: all sides\n- 2 values: vertical | horizontal\n- 3 values: top | horizontal | bottom\n- 4 values: top | right | bottom | left\n\n`margin: 0 auto;` centers a block element horizontally.\nMargins can collapse vertically between adjacent block elements." }]
+    },
+    "padding": {
+      "contents": [{ "value": "```css\npadding: <length> | <percentage>;\n/* 1-4 values: top right bottom left */\n```\n\nSets the padding area between content and border.\n\nSame shorthand pattern as `margin`. Cannot be negative.\nPercentages are relative to the **width** of the containing block (even for top/bottom)." }]
+    },
+    "box-sizing": {
+      "contents": [{ "value": "```css\nbox-sizing: content-box | border-box;\n```\n\n- `content-box` (default) — `width`/`height` apply to content only. Padding and border are added on top.\n- `border-box` — `width`/`height` include content, padding, and border.\n\nBest practice:\n```css\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n```" }]
+    },
+    "background": {
+      "contents": [{ "value": "```css\nbackground: <color> <image> <position>/<size> <repeat> <origin> <clip> <attachment>;\n```\n\nShorthand for all background properties. Supports multiple backgrounds separated by commas.\n\nExamples:\n```css\nbackground: #f5f5f5;\nbackground: url('img.png') no-repeat center/cover;\nbackground: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n```" }]
+    },
+    "border-radius": {
+      "contents": [{ "value": "```css\nborder-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?;\n```\n\nRounds the corners of an element's border box.\n\n- 1 value: all corners\n- 2 values: top-left+bottom-right | top-right+bottom-left\n- 4 values: top-left | top-right | bottom-right | bottom-left\n\nOptional `/` syntax for elliptical radii.\n\n`border-radius: 50%;` creates a circle on equal-dimension elements." }]
+    },
+    "transition": {
+      "contents": [{ "value": "```css\ntransition: <property> <duration> <timing-function>? <delay>?;\n```\n\nEnables smooth property changes over time.\n\nExamples:\n```css\ntransition: all 0.3s ease;\ntransition: opacity 200ms, transform 300ms ease-out;\ntransition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n```\n\nTiming functions: `ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out`, `cubic-bezier()`, `steps()`.\n\nNote: Not all properties are animatable (e.g., `display` is not)." }]
+    },
+    "animation": {
+      "contents": [{ "value": "```css\nanimation: <name> <duration> <timing-function>? <delay>? <count>? <direction>? <fill-mode>? <play-state>?;\n```\n\nExamples:\n```css\nanimation: fadeIn 0.3s ease-in-out;\nanimation: slide 1s ease infinite alternate;\nanimation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n```\n\n`fill-mode`: `none`, `forwards` (retain end state), `backwards` (apply start state during delay), `both`.\n`direction`: `normal`, `reverse`, `alternate`, `alternate-reverse`." }]
+    },
+    "transform": {
+      "contents": [{ "value": "```css\ntransform: <transform-function>+;\n```\n\n2D functions: `translate(x, y)`, `rotate(angle)`, `scale(x, y)`, `skew(x, y)`, `matrix()`.\n3D functions: `translate3d()`, `rotate3d()`, `scale3d()`, `perspective()`.\n\nExamples:\n```css\ntransform: translateX(-50%) translateY(-50%);\ntransform: rotate(45deg) scale(1.2);\ntransform: perspective(500px) rotateY(30deg);\n```\n\nMultiple transforms are applied right-to-left. Creates a new stacking context." }]
+    },
+    "z-index": {
+      "contents": [{ "value": "```css\nz-index: auto | <integer>;\n```\n\nSets the stacking order for positioned elements (`position` not `static`).\n\nHigher values appear in front. Negative values are allowed.\nCreates a new stacking context when applied to a positioned element.\n\nCommon convention: use increments of 10 or 100 for maintainability." }]
+    },
+    "var()": {
+      "contents": [{ "value": "```css\nvar(--custom-property, fallback-value)\n```\n\nAccesses CSS custom properties (CSS variables).\n\nDefined with `--` prefix:\n```css\n:root {\n  --primary: #3490dc;\n  --spacing: 1rem;\n}\n.btn {\n  color: var(--primary);\n  padding: var(--spacing, 0.5rem);\n}\n```\n\nCustom properties are inherited. Fallback is used when the property is undefined. Fallbacks can be nested: `var(--a, var(--b, #000))`." }]
+    },
+    "@media": {
+      "contents": [{ "value": "```css\n@media <type>? [and <feature>]* { ... }\n```\n\nConditional style rules based on device/viewport characteristics.\n\nCommon features:\n- `width`, `min-width`, `max-width`\n- `height`, `min-height`, `max-height`\n- `orientation: portrait | landscape`\n- `prefers-color-scheme: light | dark`\n- `prefers-reduced-motion: reduce | no-preference`\n- `hover: hover | none`\n- `pointer: fine | coarse | none`\n\nRange syntax (Level 4): `@media (400px <= width <= 800px) { }`" }]
+    },
+    "@keyframes": {
+      "contents": [{ "value": "```css\n@keyframes <name> {\n  from { /* 0% */ }\n  <percentage> { /* intermediate */ }\n  to { /* 100% */ }\n}\n```\n\nDefines animation keyframes. Referenced by `animation-name`.\n\nExample:\n```css\n@keyframes slideIn {\n  0% { transform: translateX(-100%); opacity: 0; }\n  100% { transform: translateX(0); opacity: 1; }\n}\n```\n\nMultiple keyframes can share percentages: `0%, 100% { opacity: 1; }`." }]
+    },
+    "calc()": {
+      "contents": [{ "value": "```css\ncalc(<expression>)\n```\n\nPerforms math with mixed CSS units.\n\nOperators: `+`, `-`, `*`, `/`\n\nExamples:\n```css\nwidth: calc(100% - 2rem);\nfont-size: calc(1rem + 0.5vw);\nheight: calc(100vh - var(--header-height));\nmargin: calc(var(--spacing) * 2);\n```\n\nNote: `+` and `-` require spaces around them. `*` and `/` do not.\nCan be nested: `calc(calc(100% - 1rem) / 2)`." }]
+    },
+    "clamp()": {
+      "contents": [{ "value": "```css\nclamp(MIN, VAL, MAX)\n```\n\nReturns the middle value, clamped between MIN and MAX.\n\nEquivalent to `max(MIN, min(VAL, MAX))`.\n\nExample:\n```css\nfont-size: clamp(1rem, 2.5vw, 2rem);\nwidth: clamp(200px, 50%, 600px);\n```\n\nIdeal for fluid typography and responsive sizing without media queries." }]
+    },
+    "container-type": {
+      "contents": [{ "value": "```css\ncontainer-type: normal | size | inline-size;\n```\n\nEstablishes an element as a containment context for container queries.\n\n- `normal` — no containment (default)\n- `inline-size` — containment on the inline axis only\n- `size` — containment on both axes\n\nUsed with `@container` queries:\n```css\n.card { container-type: inline-size; }\n@container (min-width: 400px) {\n  .card-body { display: flex; }\n}\n```" }]
+    },
+
+    "width": {
+      "contents": [{ "value": "```css\nwidth: <length> | <percentage> | auto | min-content | max-content | fit-content(<length>);\n```\n\nSets the width of an element's content box (or border box with `box-sizing: border-box`).\n\n- `auto` — determined by content and containment\n- `min-content` — shrink to narrowest content\n- `max-content` — expand to widest content\n- `fit-content()` — clamp between min-content and max-content" }]
+    },
+    "height": {
+      "contents": [{ "value": "```css\nheight: <length> | <percentage> | auto | min-content | max-content | fit-content(<length>);\n```\n\nSets the height of the element. Percentages resolve against the containing block's height.\n\n`height: 100vh` fills the full viewport height.\n`height: 100dvh` uses dynamic viewport height (adjusts for mobile browser chrome)." }]
+    },
+    "min-width": {
+      "contents": [{ "value": "```css\nmin-width: <length> | <percentage> | auto | min-content | max-content | fit-content(<length>);\n```\n\nSets the minimum width. The element will never be narrower than this value.\n\nOverrides `width` and `max-width` when they would result in a smaller value." }]
+    },
+    "max-width": {
+      "contents": [{ "value": "```css\nmax-width: <length> | <percentage> | none | min-content | max-content | fit-content(<length>);\n```\n\nSets the maximum width. The element will never be wider than this value.\n\nOverrides `width` but is overridden by `min-width`. Common pattern: `max-width: 1200px; margin: 0 auto;` for centered layouts." }]
+    },
+    "min-height": {
+      "contents": [{ "value": "```css\nmin-height: <length> | <percentage> | auto | min-content | max-content | fit-content(<length>);\n```\n\nSets the minimum height. Useful for ensuring content areas fill available space: `min-height: 100vh;` for full-page layouts." }]
+    },
+    "max-height": {
+      "contents": [{ "value": "```css\nmax-height: <length> | <percentage> | none | min-content | max-content;\n```\n\nSets the maximum height. Commonly used with `overflow: auto` for scrollable regions." }]
+    },
+    "top": {
+      "contents": [{ "value": "```css\ntop: <length> | <percentage> | auto;\n```\n\nSpecifies the vertical position of a positioned element. Behavior depends on `position`:\n- `relative` — offsets from normal position\n- `absolute` — distance from top edge of containing block\n- `fixed` — distance from top of viewport\n- `sticky` — threshold for sticking" }]
+    },
+    "right": {
+      "contents": [{ "value": "```css\nright: <length> | <percentage> | auto;\n```\n\nSpecifies the horizontal position from the right edge of a positioned element's containing block." }]
+    },
+    "bottom": {
+      "contents": [{ "value": "```css\nbottom: <length> | <percentage> | auto;\n```\n\nSpecifies the vertical position from the bottom edge of a positioned element's containing block." }]
+    },
+    "left": {
+      "contents": [{ "value": "```css\nleft: <length> | <percentage> | auto;\n```\n\nSpecifies the horizontal position from the left edge of a positioned element's containing block." }]
+    },
+    "inset": {
+      "contents": [{ "value": "```css\ninset: <length> | <percentage> | auto;\n/* Shorthand for: top right bottom left */\n```\n\nShorthand for `top`, `right`, `bottom`, `left`. Follows the same 1-to-4 value pattern as `margin`.\n\n`inset: 0;` fills the containing block completely (equivalent to `top: 0; right: 0; bottom: 0; left: 0;`)." }]
+    },
+    "flex-wrap": {
+      "contents": [{ "value": "```css\nflex-wrap: nowrap | wrap | wrap-reverse;\n```\n\n- `nowrap` (default) — all items on one line, may overflow\n- `wrap` — items wrap to new lines from top to bottom\n- `wrap-reverse` — items wrap from bottom to top\n\nWhen wrapping, `align-content` controls spacing between lines." }]
+    },
+    "flex-grow": {
+      "contents": [{ "value": "```css\nflex-grow: <number>;\n```\n\nSpecifies how much a flex item grows relative to siblings when positive free space is distributed.\n\n- `0` (default) — don't grow\n- `1` — grow equally\n- `2` — grow twice as much as items with `flex-grow: 1`" }]
+    },
+    "flex-shrink": {
+      "contents": [{ "value": "```css\nflex-shrink: <number>;\n```\n\nSpecifies how much a flex item shrinks relative to siblings when there isn't enough space.\n\n- `1` (default) — shrink equally\n- `0` — don't shrink (useful for fixed-width sidebars)" }]
+    },
+    "flex-basis": {
+      "contents": [{ "value": "```css\nflex-basis: <length> | <percentage> | auto | content;\n```\n\nSets the initial main size of a flex item before free space is distributed.\n\n- `auto` — uses `width`/`height` value\n- `0` — ignores content size, distributes all space via `flex-grow`\n- A specific length — sets an explicit starting size" }]
+    },
+    "align-content": {
+      "contents": [{ "value": "```css\nalign-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;\n```\n\nDistributes space between and around flex/grid lines along the cross axis.\n\nOnly applies when there are multiple lines (flex-wrap: wrap or grid with multiple rows)." }]
+    },
+    "align-self": {
+      "contents": [{ "value": "```css\nalign-self: auto | flex-start | flex-end | center | baseline | stretch;\n```\n\nOverrides `align-items` for a specific flex/grid item. Aligns this item independently on the cross axis." }]
+    },
+    "gap": {
+      "contents": [{ "value": "```css\ngap: <row-gap> <column-gap>?;\n```\n\nShorthand for `row-gap` and `column-gap`. Sets gutters between flex/grid items.\n\n- `gap: 1rem;` — uniform gap\n- `gap: 1rem 2rem;` — row gap | column gap\n\nReplaces the older `grid-gap` property. Works in both Flexbox and Grid." }]
+    },
+    "grid-template-rows": {
+      "contents": [{ "value": "```css\ngrid-template-rows: <track-size>+ | repeat(<count>, <track-size>) | auto;\n```\n\nDefines row sizes in a grid container.\n\nExamples:\n```css\ngrid-template-rows: auto 1fr auto;\ngrid-template-rows: repeat(3, minmax(100px, auto));\ngrid-template-rows: [header] auto [content] 1fr [footer] auto;\n```" }]
+    },
+    "grid-column": {
+      "contents": [{ "value": "```css\ngrid-column: <start-line> / <end-line>;\n```\n\nShorthand for `grid-column-start` / `grid-column-end`. Places a grid item horizontally.\n\nExamples:\n- `grid-column: 1 / 3;` — spans columns 1 and 2\n- `grid-column: 1 / -1;` — spans all columns\n- `grid-column: span 2;` — spans 2 columns from auto-placement" }]
+    },
+    "grid-row": {
+      "contents": [{ "value": "```css\ngrid-row: <start-line> / <end-line>;\n```\n\nShorthand for `grid-row-start` / `grid-row-end`. Places a grid item vertically.\n\nExamples:\n- `grid-row: 1 / 3;` — spans rows 1 and 2\n- `grid-row: span 2;` — spans 2 rows" }]
+    },
+    "grid-auto-flow": {
+      "contents": [{ "value": "```css\ngrid-auto-flow: row | column | dense | row dense | column dense;\n```\n\nControls how auto-placed items flow into the grid.\n\n- `row` (default) — fill rows first\n- `column` — fill columns first\n- `dense` — fill gaps in earlier cells (may reorder visually)" }]
+    },
+    "place-items": {
+      "contents": [{ "value": "```css\nplace-items: <align-items> <justify-items>?;\n```\n\nShorthand for `align-items` and `justify-items`. Centers grid/flex items:\n\n`place-items: center;` centers items both horizontally and vertically." }]
+    },
+    "place-content": {
+      "contents": [{ "value": "```css\nplace-content: <align-content> <justify-content>?;\n```\n\nShorthand for `align-content` and `justify-content`. Distributes space in both axes at once." }]
+    },
+
+    "font-size": {
+      "contents": [{ "value": "```css\nfont-size: <absolute> | <relative> | <length> | <percentage>;\n```\n\nAbsolute keywords: `xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`.\nRelative: `smaller`, `larger`.\n\nBest practice for responsive text: `font-size: clamp(1rem, 2.5vw, 2rem);`\n\n`em` is relative to parent font-size. `rem` is relative to root (`<html>`) font-size." }]
+    },
+    "font-weight": {
+      "contents": [{ "value": "```css\nfont-weight: normal | bold | bolder | lighter | 100-900;\n```\n\nNumeric scale (100–900 in increments of 100):\n- 100: Thin\n- 300: Light\n- 400: Normal (= `normal`)\n- 500: Medium\n- 700: Bold (= `bold`)\n- 900: Black\n\nVariable fonts support any integer in the 1–1000 range." }]
+    },
+    "font-family": {
+      "contents": [{ "value": "```css\nfont-family: <family-name> | <generic-family>;\n```\n\nGeneric families: `serif`, `sans-serif`, `monospace`, `cursive`, `fantasy`, `system-ui`, `ui-serif`, `ui-sans-serif`, `ui-monospace`.\n\nAlways end with a generic fallback:\n```css\nfont-family: 'Inter', 'Segoe UI', system-ui, sans-serif;\n```\n\nQuote family names containing spaces or special characters." }]
+    },
+    "line-height": {
+      "contents": [{ "value": "```css\nline-height: normal | <number> | <length> | <percentage>;\n```\n\nSets the height of a line box. Unitless values (like `1.5`) are recommended as they scale with font-size.\n\n- `normal` — browser default (~1.2)\n- `1.5` — 1.5× the font-size\n- `24px` — fixed line height\n\nAffects vertical rhythm and readability. WCAG recommends at least 1.5 for body text." }]
+    },
+    "letter-spacing": {
+      "contents": [{ "value": "```css\nletter-spacing: normal | <length>;\n```\n\nSets the space between characters. Negative values tighten text.\n\nCommon usage:\n- Headings: `letter-spacing: -0.025em;` (tighter)\n- Uppercase text: `letter-spacing: 0.05em;` (wider)\n- Body text: `letter-spacing: normal;`" }]
+    },
+    "text-align": {
+      "contents": [{ "value": "```css\ntext-align: left | right | center | justify | start | end;\n```\n\nAligns inline content within a block element.\n\n- `start`/`end` — logical values that respect writing direction (RTL-safe)\n- `justify` — stretches lines to fill width; last line is left-aligned" }]
+    },
+    "text-decoration": {
+      "contents": [{ "value": "```css\ntext-decoration: <line> <style>? <color>? <thickness>?;\n```\n\nShorthand for `text-decoration-line`, `text-decoration-style`, `text-decoration-color`, `text-decoration-thickness`.\n\nLines: `none`, `underline`, `overline`, `line-through`.\nStyles: `solid`, `double`, `dotted`, `dashed`, `wavy`.\n\n`text-underline-offset` adjusts position of underlines." }]
+    },
+    "text-transform": {
+      "contents": [{ "value": "```css\ntext-transform: none | capitalize | uppercase | lowercase | full-width;\n```\n\n- `capitalize` — first letter of each word uppercased\n- `uppercase` — all characters uppercased\n- `lowercase` — all characters lowercased\n\nNote: Doesn't change the actual content, only the visual presentation." }]
+    },
+    "text-overflow": {
+      "contents": [{ "value": "```css\ntext-overflow: clip | ellipsis;\n```\n\nSpecifies how overflowed text that is not displayed is signaled.\n\nRequires `overflow: hidden` and `white-space: nowrap` to take effect.\n\nClassic truncation pattern:\n```css\noverflow: hidden;\nwhite-space: nowrap;\ntext-overflow: ellipsis;\n```" }]
+    },
+    "white-space": {
+      "contents": [{ "value": "```css\nwhite-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces;\n```\n\n- `normal` — collapse whitespace, wrap at available width\n- `nowrap` — collapse whitespace, no wrapping\n- `pre` — preserve whitespace and newlines, no wrapping\n- `pre-wrap` — preserve whitespace, wrap at available width\n- `pre-line` — collapse whitespace, preserve newlines, wrap" }]
+    },
+    "word-break": {
+      "contents": [{ "value": "```css\nword-break: normal | break-all | keep-all | break-word;\n```\n\n- `normal` — break at allowed break points\n- `break-all` — break anywhere (for CJK text or long strings)\n- `keep-all` — don't break CJK characters\n- `break-word` — break at word boundaries, then anywhere if needed (deprecated, use `overflow-wrap: anywhere` instead)" }]
+    },
+    "overflow-wrap": {
+      "contents": [{ "value": "```css\noverflow-wrap: normal | break-word | anywhere;\n```\n\nAllows unbreakable strings to be broken to prevent overflow.\n\n- `break-word` — break long words at arbitrary points if needed\n- `anywhere` — like `break-word` but also considers soft wrap opportunities for min-content sizing" }]
+    },
+
+    "color": {
+      "contents": [{ "value": "```css\ncolor: <color>;\n```\n\nSets the foreground color for text content and text decorations.\n\nColor formats:\n- Named: `red`, `rebeccapurple`\n- Hex: `#ff0000`, `#f00`, `#ff000080`\n- RGB: `rgb(255 0 0)`, `rgb(255 0 0 / 50%)`\n- HSL: `hsl(0 100% 50%)`, `hsl(0 100% 50% / 50%)`\n- OKLCH: `oklch(70% 0.25 30)`\n- Keywords: `currentColor`, `transparent`, `inherit`" }]
+    },
+    "background-color": {
+      "contents": [{ "value": "```css\nbackground-color: <color>;\n```\n\nSets the background color. Painted behind `background-image`.\n\nSupports all color formats including alpha transparency:\n`background-color: rgb(0 0 0 / 50%);`" }]
+    },
+    "background-image": {
+      "contents": [{ "value": "```css\nbackground-image: none | <image>+;\n```\n\nSets one or more background images. Supports gradients as images.\n\nExamples:\n```css\nbackground-image: url('bg.jpg');\nbackground-image: linear-gradient(to right, #000, #fff);\nbackground-image: radial-gradient(circle, #000, transparent);\nbackground-image: conic-gradient(from 45deg, red, blue);\n```\n\nMultiple backgrounds are layered: first declared is on top." }]
+    },
+    "background-size": {
+      "contents": [{ "value": "```css\nbackground-size: auto | <length> | <percentage> | cover | contain;\n```\n\n- `cover` — scales image to fill element (may crop)\n- `contain` — scales image to fit entirely (may leave gaps)\n- `auto` — natural image dimensions\n\nTwo values: `background-size: width height;`" }]
+    },
+    "background-position": {
+      "contents": [{ "value": "```css\nbackground-position: <position>;\n```\n\nSets the initial position of a background image.\n\nKeywords: `top`, `right`, `bottom`, `left`, `center`.\nValues: `background-position: 50% 50%;` (centered)\nMulti-value: `background-position: right 10px bottom 20px;`" }]
+    },
+    "linear-gradient()": {
+      "contents": [{ "value": "```css\nlinear-gradient(<angle> | to <side>, <color-stop>, ...)\n```\n\nCreates a linear color transition.\n\nAngles: `0deg` (up), `90deg` (right), `180deg` (down), `270deg` (left).\nKeywords: `to right`, `to bottom right`, etc.\n\nExamples:\n```css\nlinear-gradient(135deg, #667eea 0%, #764ba2 100%);\nlinear-gradient(to right, red, transparent);\nlinear-gradient(to bottom, #000 0%, #000 50%, #fff 50%, #fff 100%);\n```" }]
+    },
+    "radial-gradient()": {
+      "contents": [{ "value": "```css\nradial-gradient(<shape> <size> at <position>, <color-stop>, ...)\n```\n\nCreates a radial color transition from a center point.\n\nShapes: `circle`, `ellipse` (default).\nSizes: `closest-side`, `farthest-side`, `closest-corner`, `farthest-corner`.\n\nExample: `radial-gradient(circle at top left, #667eea, transparent);`" }]
+    },
+
+    "border-width": {
+      "contents": [{ "value": "```css\nborder-width: <length>{1,4};\n```\n\nSets the width of all four borders. Uses the same 1-to-4 value shorthand as `margin`.\n\nKeywords: `thin` (~1px), `medium` (~3px), `thick` (~5px).\n\nIndividual sides: `border-top-width`, `border-right-width`, etc." }]
+    },
+    "border-style": {
+      "contents": [{ "value": "```css\nborder-style: none | solid | dashed | dotted | double | groove | ridge | inset | outset | hidden;\n```\n\nSets the line style of all four borders. `none` and `hidden` both render no border, but `hidden` wins in border-collapsing table cells." }]
+    },
+    "border-color": {
+      "contents": [{ "value": "```css\nborder-color: <color>{1,4};\n```\n\nSets the color of all four borders. Uses 1-to-4 value shorthand.\n\nDefaults to `currentColor` if not specified." }]
+    },
+    "outline": {
+      "contents": [{ "value": "```css\noutline: <width> <style> <color>;\n```\n\nDraws a line outside the element's border. Does NOT affect layout (no space taken).\n\nUnlike `border`, `outline` doesn't have corners — use `outline-offset` to push it away from the element.\n\n`outline: 2px solid blue;` is the default focus indicator in many browsers.\n`outline: none;` removes it (only do this with a visible alternative)." }]
+    },
+    "box-shadow": {
+      "contents": [{ "value": "```css\nbox-shadow: <inset>? <offset-x> <offset-y> <blur> <spread>? <color>;\n```\n\nAdds shadow effects. Supports multiple shadows separated by commas.\n\nExamples:\n```css\nbox-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);\nbox-shadow: inset 0 2px 4px rgba(0,0,0,0.1);\nbox-shadow: 0 0 0 3px rgba(66,153,225,0.5); /* ring effect */\n```" }]
+    },
+    "filter": {
+      "contents": [{ "value": "```css\nfilter: <filter-function>+;\n```\n\nFunctions: `blur()`, `brightness()`, `contrast()`, `grayscale()`, `hue-rotate()`, `invert()`, `opacity()`, `saturate()`, `sepia()`, `drop-shadow()`.\n\nExamples:\n```css\nfilter: blur(4px);\nfilter: grayscale(100%) brightness(0.8);\nfilter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));\n```\n\n`drop-shadow()` follows the alpha shape (unlike `box-shadow`)." }]
+    },
+    "backdrop-filter": {
+      "contents": [{ "value": "```css\nbackdrop-filter: <filter-function>+;\n```\n\nApplies filter effects to the area behind an element. Uses the same functions as `filter`.\n\nGlass morphism pattern:\n```css\nbackdrop-filter: blur(10px);\nbackground-color: rgba(255, 255, 255, 0.3);\n```\n\nRequires a transparent/semi-transparent background to be visible." }]
+    },
+    "mix-blend-mode": {
+      "contents": [{ "value": "```css\nmix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;\n```\n\nDefines how an element's content blends with the content behind it.\n\n`isolation: isolate;` on a parent creates a new stacking context, preventing blend from affecting ancestors." }]
+    },
+    "object-fit": {
+      "contents": [{ "value": "```css\nobject-fit: fill | contain | cover | none | scale-down;\n```\n\nSets how `<img>`, `<video>`, or other replaced elements resize to fit their container.\n\n- `cover` — fill container, maintain aspect ratio (may crop)\n- `contain` — fit entirely, maintain aspect ratio (may letterbox)\n- `fill` — stretch to fill (may distort)\n- `none` — natural size\n- `scale-down` — `none` or `contain`, whichever is smaller\n\nUsed with `object-position` to control placement." }]
+    },
+    "object-position": {
+      "contents": [{ "value": "```css\nobject-position: <position>;\n```\n\nSets the alignment of replaced content within its box. Uses the same syntax as `background-position`.\n\nDefault: `50% 50%` (centered).\nExample: `object-position: top center;`" }]
+    },
+    "aspect-ratio": {
+      "contents": [{ "value": "```css\naspect-ratio: auto | <width> / <height>;\n```\n\nSets a preferred aspect ratio for the element's box.\n\nExamples:\n- `aspect-ratio: 16 / 9;` — widescreen video\n- `aspect-ratio: 1;` — square\n- `aspect-ratio: 4 / 3;` — classic photo\n\nWorks with `width: 100%;` to create responsive containers that maintain their ratio." }]
+    },
+    "overflow-x": {
+      "contents": [{ "value": "```css\noverflow-x: visible | hidden | clip | scroll | auto;\n```\n\nControls horizontal overflow behavior.\n`overflow-x: auto;` adds a scrollbar only when content overflows horizontally." }]
+    },
+    "overflow-y": {
+      "contents": [{ "value": "```css\noverflow-y: visible | hidden | clip | scroll | auto;\n```\n\nControls vertical overflow behavior.\n`overflow-y: auto;` adds a scrollbar only when content overflows vertically." }]
+    },
+    "visibility": {
+      "contents": [{ "value": "```css\nvisibility: visible | hidden | collapse;\n```\n\n- `visible` — element is visible\n- `hidden` — element is invisible but still occupies space (unlike `display: none`)\n- `collapse` — for table elements, removes row/column; behaves like `hidden` for others\n\nHidden elements still receive events and can be tab-focused." }]
+    },
+    "pointer-events": {
+      "contents": [{ "value": "```css\npointer-events: auto | none;\n```\n\n- `auto` — element responds to pointer events normally\n- `none` — element is \"transparent\" to pointer events; clicks pass through to elements below\n\nUseful for overlays, disabled states, and decorative elements." }]
+    },
+    "user-select": {
+      "contents": [{ "value": "```css\nuser-select: auto | text | none | all | contain;\n```\n\nControls whether text can be selected.\n\n- `none` — prevents text selection (useful for UI elements)\n- `all` — entire element selected on click (useful for code blocks)\n- `text` — text can be selected normally" }]
+    },
+    "resize": {
+      "contents": [{ "value": "```css\nresize: none | both | horizontal | vertical | block | inline;\n```\n\nSets whether an element is resizable by the user.\n\nRequires `overflow` other than `visible`. `<textarea>` is resizable by default." }]
+    },
+    "scroll-behavior": {
+      "contents": [{ "value": "```css\nscroll-behavior: auto | smooth;\n```\n\nSets whether scrolling is instant or animated.\n\n`html { scroll-behavior: smooth; }` enables smooth scrolling for all anchor links and `scrollTo()` calls." }]
+    },
+    "scroll-snap-type": {
+      "contents": [{ "value": "```css\nscroll-snap-type: none | <axis> <strictness>?;\n```\n\nAxis: `x`, `y`, `block`, `inline`, `both`.\nStrictness: `mandatory`, `proximity`.\n\nCarousel pattern:\n```css\n.container { scroll-snap-type: x mandatory; overflow-x: auto; }\n.item { scroll-snap-align: start; }\n```" }]
+    },
+    "will-change": {
+      "contents": [{ "value": "```css\nwill-change: auto | <property>+;\n```\n\nHints to the browser about upcoming changes for optimization.\n\nExamples:\n- `will-change: transform;` — optimizes for transform animations\n- `will-change: opacity;` — optimizes for opacity changes\n\nUse sparingly — add before animation, remove after. Excessive use wastes GPU memory." }]
+    },
+    "contain": {
+      "contents": [{ "value": "```css\ncontain: none | strict | content | size | layout | style | paint;\n```\n\nIndicates containment restrictions to the browser for performance optimization.\n\n- `layout` — element's layout is independent of the rest of the page\n- `paint` — descendants are not rendered outside the element's bounds\n- `size` — element's size is not affected by its descendants\n- `content` — shorthand for `layout paint style`\n- `strict` — shorthand for `layout paint size style`" }]
+    },
+    "accent-color": {
+      "contents": [{ "value": "```css\naccent-color: auto | <color>;\n```\n\nSets the accent color for form controls: checkboxes, radio buttons, range sliders, and progress bars.\n\n`accent-color: auto;` uses the browser/OS default.\n\nSimplifies form theming without custom styling." }]
+    },
+    "color-scheme": {
+      "contents": [{ "value": "```css\ncolor-scheme: normal | light | dark | light dark;\n```\n\nIndicates which color schemes the element supports.\n\n`:root { color-scheme: light dark; }` tells the browser both are supported, enabling native dark mode for form controls, scrollbars, and other UA-rendered elements." }]
+    },
+    "::placeholder": {
+      "contents": [{ "value": "```css\n::placeholder {\n  color: <color>;\n  opacity: <number>;\n  font-style: <style>;\n}\n```\n\nStyles the placeholder text of `<input>` and `<textarea>` elements.\n\nNote: Default opacity varies by browser (Firefox uses 0.54). Set `opacity: 1;` for consistent rendering." }]
+    },
+    "@container": {
+      "contents": [{ "value": "```css\n@container <name>? (<condition>) { ... }\n```\n\nApplies styles based on the size of a containing element (not the viewport).\n\nConditions: `min-width`, `max-width`, `min-height`, `max-height`, `width`, `inline-size`, `block-size`.\n\nRequires `container-type` on ancestor:\n```css\n.parent { container-type: inline-size; container-name: card; }\n@container card (min-width: 400px) { .child { flex-direction: row; } }\n```" }]
+    },
+    "@layer": {
+      "contents": [{ "value": "```css\n@layer <name>;\n@layer <name> { ... }\n@layer <name1>, <name2>, <name3>;\n```\n\nDeclares cascade layers to control specificity ordering.\n\n- Layers declared earlier have **lower** priority\n- Unlayered styles have **higher** priority than layered styles\n- Layers can be nested: `@layer framework.components { }`\n\nUseful for managing third-party CSS specificity conflicts." }]
+    },
+    "@supports": {
+      "contents": [{ "value": "```css\n@supports (<condition>) { ... }\n@supports not (<condition>) { ... }\n@supports (<condition>) and (<condition>) { ... }\n```\n\nFeature queries — conditionally applies styles based on browser support.\n\nExamples:\n```css\n@supports (display: grid) { .layout { display: grid; } }\n@supports selector(:has()) { .parent:has(.child) { color: red; } }\n@supports (backdrop-filter: blur(10px)) { .glass { backdrop-filter: blur(10px); } }\n```" }]
+    },
+    "@import": {
+      "contents": [{ "value": "```css\n@import url(<path>) <media>? <layer>?;\n```\n\nImports an external stylesheet. Must appear before all rules except `@charset` and `@layer`.\n\nExamples:\n```css\n@import url('reset.css');\n@import url('print.css') print;\n@import url('lib.css') layer(lib);\n@import url('dark.css') (prefers-color-scheme: dark);\n```\n\nNote: Multiple `@import` rules create sequential blocking requests. Consider bundling instead." }]
+    },
+    "min()": {
+      "contents": [{ "value": "```css\nmin(<value>, <value>, ...)\n```\n\nReturns the smallest value from a comma-separated list.\n\nExample: `width: min(100%, 600px);` — never exceeds 600px but also never exceeds parent width.\n\nEquivalent to `max-width`-like behavior without a separate property." }]
+    },
+    "max()": {
+      "contents": [{ "value": "```css\nmax(<value>, <value>, ...)\n```\n\nReturns the largest value from a comma-separated list.\n\nExample: `width: max(300px, 50%);` — at least 300px but grows with parent.\n\nEquivalent to `min-width`-like behavior without a separate property." }]
+    },
+    ":has()": {
+      "contents": [{ "value": "```css\n:has(<selector>)\n```\n\nThe \"parent selector\" — matches an element if any of its descendants match the argument selector.\n\nExamples:\n```css\n.card:has(img) { padding: 0; }\n.form:has(:invalid) { border-color: red; }\nh2:has(+ p) { margin-bottom: 0; } /* h2 followed by p */\n```\n\nHighly powerful but use carefully for performance — browser evaluates from the subject outward." }]
+    },
+    ":is()": {
+      "contents": [{ "value": "```css\n:is(<selector-list>)\n```\n\nMatches any element that can be matched by one of the selectors in the list. Simplifies complex selectors.\n\n```css\n:is(h1, h2, h3) { color: blue; }\n:is(.card, .panel) :is(h2, h3) { margin: 0; }\n```\n\nSpecificity: takes the **most specific** selector in the list. Use `:where()` for zero-specificity version." }]
+    },
+    ":where()": {
+      "contents": [{ "value": "```css\n:where(<selector-list>)\n```\n\nSame as `:is()` but with **zero specificity**. Ideal for default stylesheets that should be easily overridable.\n\n```css\n:where(.dialog, .modal) { margin: auto; }\n```" }]
+    }
+  }
+}